>[success] # 前端的模板方法模式 ~~~ 1.模板方法模式是一種只需使用繼承就可以實現 2.組成第一部分是抽象父類（可以利用es6 或者ts實現），第二部分是具體的實現子類 2.1.抽象父類中封裝了子類的算法框架，包括實現一些公共方法以及封裝子類中所有 方法的執行順序。 2.2.子類通過繼承這個抽象類，也繼承了整個算法結構，并且可以選擇重寫父類的方法 3.'解決問題：' 如我們有一些平行的子類，各個子類之間有一些相同的行為，也有一些不同的行為。如果 相同和不同的行為都混合在各個子類的實現中，說明這些相同的行為會在各個子類中重復出現。 但實際上，相同的行為可以被搬移到另外一個單一的地方 4.'如何實現：' 在模板方法模式中，子類實現中的相同部分被上移到父類中，而將不同的部分留待子類來 實現 ~~~ >[info] ## 案例 ~~~ 1.書中舉了一個案例咖啡和茶的案例 ~~~ >[danger] ##### 需要泡咖啡需求 ~~~ 我們的需分為四步： 1.把水煮沸 2.用沸水沖咖啡 3.把咖啡倒進杯子 4.加糖和牛奶 ~~~ ~~~ var Coffee = function(){}; Coffee.prototype.boilWater = function(){ console.log( '把水煮沸' ); }; Coffee.prototype.brewCoffeeGriends = function(){ console.log( '用沸水沖泡咖啡' ); }; Coffee.prototype.pourInCup = function(){ console.log( '把咖啡倒進杯子' ); }; Coffee.prototype.addSugarAndMilk = function(){ console.log( '加糖和牛奶' ); }; Coffee.prototype.init = function(){ this.boilWater(); this.brewCoffeeGriends(); this.pourInCup(); this.addSugarAndMilk(); }; var coffee = new Coffee(); coffee.init(); ~~~ >[danger] ##### 泡檸檬茶 ~~~ 我們的需分為四步： 1.把水煮沸 2.用沸水浸泡茶葉 3.把茶水倒進杯子 4.加檸檬 ~~~ ~~~ var Tea = function(){}; Tea.prototype.boilWater = function(){ console.log( '把水煮沸' ); }; Tea.prototype.steepTeaBag = function(){ console.log( '用沸水浸泡茶葉' ); }; Tea.prototype.pourInCup = function(){ console.log( '把茶水倒進杯子' ); }; Tea.prototype.addLemon = function(){ console.log( '加檸檬' ); }; Tea.prototype.init = function(){ this.boilWater(); this.steepTeaBag(); this.pourInCup(); this.addLemon(); }; var tea = new Tea(); tea.init(); ~~~ >[info] ## 分析 ~~~ 1.上面的步驟有很多都是重復行為的動作，我們將這些重復行為的動作進行抽象 的理解可以得到下面的分析： 1.1.原料不同。一個是咖啡，一個是茶，但我們可以把它們都抽象為'飲料'。 1.2.泡的方式不同。咖啡是沖泡，而茶葉是浸泡，我們可以把它們都抽象為'泡'。 1.3.加入的調料不同。一個是糖和牛奶，一個是檸檬，但我們可以把它們都抽象為'調料'。 2.將需求抽象四個步驟： 2.1.把水煮沸 2.2.用沸水沖泡飲料 2.3.把飲料倒進杯子 2.4.加調料 ~~~ >[danger] ##### 封裝一個抽象父類 ~~~ 1.這個抽象父類有了我們剛才抽離出來得模板，指定義方法內容，具體實現讓子類去做 ~~~ ~~~ var Beverage = function(){}; Beverage.prototype.boilWater = function(){ console.log( '把水煮沸' ); }; Beverage.prototype.brew = function(){}; // 空方法，應該由子類重寫 Beverage.prototype.pourInCup = function(){}; // 空方法，應該由子類重寫 Beverage.prototype.addCondiments = function(){}; // 空方法，應該由子類重寫 Beverage.prototype.init = function(){ this.boilWater(); this.brew(); this.pourInCup(); this.addCondiments(); }; ~~~ >[danger] ##### 泡茶繼承(分析模板方法) ~~~ 1.首先概念中描述：抽象父類中封裝了子類的算法框架，包括實現一些公共方法以及封裝子 類中所有方法的執行順序，根據這個描述可以分析出模板方法是'Beverage.prototype.init' ~~~ ~~~ var Tea = function(){}; // 繼承 Tea.prototype = new Beverage(); // 重寫 Tea.prototype.brew = function(){ console.log( '用沸水浸泡茶葉' ); }; // 重寫 Tea.prototype.pourInCup = function(){ console.log( '把茶倒進杯子' ); }; // 重寫 Tea.prototype.addCondiments = function(){ console.log( '加檸檬' ); }; var tea = new Tea(); // 調用模板方法 tea.init(); ~~~ >[success] # 前端的使用場景 ~~~ 1.模板方法模式常被架構師用于搭建項目的框架，架構師定好了框架的骨架， 程序員繼承框架的結構之后，負責往里面填空 2.書中給了一個案例場景： 在 Web 開發中也能找到很多模板方法模式的適用場景，比如我們在構建一系列的 UI 組件， 這些組件的構建過程一般如下所示： (1) 初始化一個 div 容器； (2) 通過 ajax 請求拉取相應的數據； (3) 把數據渲染到 div 容器里面，完成組件的構造； (4) 通知用戶組件渲染完畢。 我們看到，任何組件的構建都遵循上面的 4 步，其中第(1)步和第(4)步是相同的。第(2)步不 同的地方只是請求 ajax 的遠程地址，第(3)步不同的地方是渲染數據的方式。 于是我們可以把這 4 個步驟都抽象到父類的模板方法里面，父類中還可以順便提供第(1)步和 第(4)步的具體實現。當子類繼承這個父類之后，會重寫模板方法里面的第(2)步和第(3)步。 ~~~