概念與特點
概念：
模版方法是對封裝的一種改造，定義一個抽象類，公共的業務實現放在父類中，需要拓展或者變化的部分放到子類中去完成（即把變化的邏輯增加到子類中，而不改動父類）。最後直接調用模板方法即可。
特點：
- 封裝不變部分，拓展可變部分。
- 每個不同的實現都需要定義一個子類，增加子類數目。
- 子類實現父類的方法，會影響父類的結果，導致反向控制。
結構與實現
模板方法模式包含抽象類（模板方法，抽象方法、具體方法、鉤子方法），具體子類。
抽象類：由模板方法和若干個基本方法構成。
模板方法：按邏輯順序調用業務方法。
抽象方法：在抽象類中聲明，由具體類實現。
具體方法：在抽象類中實現一些公共的業務場景，子類可以繼承或者重寫。
鉤子方法：在抽象類中已經實現，包括用於判斷的邏輯方法和需要子類重寫的空方法。
具體子類：實現抽象類中所定義的抽象方法和鉤子方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<script>
//抽象類-含模板方法，具體方法，鉤子方法
class HookAbstract {
templateMethod() {
this.abstractMethod1();
this.hookMethod1();
if (this.hookMethod2()) {
this.specificMethod();
}
this.abstractMethod2();
}
hookMethod1() {
console.log("我是鉤子1")
};
hookMethod2() {
return true
}
specificMethod() {
console.log("具體方法被執行...")
}
}
//具體類
class HookConcrete extends HookAbstract {
constructor() {
super();
}
abstractMethod1(){
console.log("抽象方法1被實現")
}
abstractMethod2(){
console.log("抽象方法2被實現")
}
hookMethod1() {
console.log("鉤子1被重寫")
};
hookMethod2() {
return false
};
}
class Customer {
static main() {
let temp = new HookConcrete();
temp.templateMethod();
}
}
Customer.main();
</script>
</body>
</html>
應用場景
- 實現的業務場景比較固定，只是某些功能點可能需要拓展。
- 多個子類存在公共行爲，即可抽離到父類中去實現。
- 需要控制子類的拓展時，模板方法只在特定點調用鉤子操作，這樣就只允許在這些特定點進行拓展。
應用實例
暫無。
總結
模板方法設計模式可以應用在前端的很多場景。比如封裝公共組件，就是將組件作爲一種模板。還有 webpack 打包，不斷是什麼項目，都有一個固定的打包模板。包括 react 的實現。在 react 中作爲性能優化的聲明週期鉤子函數 shouldComponentUpdate 就是在其內部根據 shouldComponentUpdate 的返回值來判斷是否重新渲染組件。