在 JavaScript 開發(fā)中用到繼承的場景其實并不是很多汛闸，很多時候我們都喜歡用 mix-in 的方式給對象擴展屬性。但這不代表繼承在 JavaScript 里沒有用武之地艺糜，雖然沒有真正的類和繼承機制，但我們可以通過原型 prototype 來變相地實現(xiàn)繼承。
定義
模板方法模式是一種只需使用繼承就可以實現(xiàn)的非常簡單的模式揉忘。
模板方法模式由兩部分結(jié)構(gòu)組成：
- 第一部分是抽象父類跳座，
- 第二部分是具體的實現(xiàn)子類。
通常在抽象父類中封裝了子類的算法框架泣矛，包括實現(xiàn)一些公共方法以及封裝子類中所有方法的執(zhí)行順序疲眷。子類通過繼承這個抽象類，也繼承了整個算法結(jié)構(gòu)您朽，并且可以選擇重寫父類的方法狂丝。
使用實例
Coffee or Tea
咖啡與茶是一個經(jīng)典的例子，經(jīng)常用來講解模板方法模式
泡茶和泡咖啡有同樣的步驟哗总，比如燒開水（boilWater）几颜、沖泡（brew）、倒在杯子里（pourInCup）讯屈，加小料（addCondiments）等等蛋哭。
但每種飲料沖泡的方法以及所加的小料不一樣，所以我們可以利用模板方法實現(xiàn)這個主要步驟
首先先來定義抽象步驟：
var Beverage = function(){};
Beverage.prototype.boilWater = function(){
console.log( '把水煮沸' );
};
Beverage.prototype.brew = function(){}; // 空方法涮母，應(yīng)該由子類重寫
Beverage.prototype.pourInCup = function(){}; // 空方法谆趾，應(yīng)該由子類重寫
Beverage.prototype.addCondiments = function(){}; // 空方法，應(yīng)該由子類重寫
Beverage.prototype.init = function(){
this.boilWater();
this.brew();
this.pourInCup();
this.addCondiments();
};
接下來我們要創(chuàng)建咖啡類和茶類叛本，并讓它們繼承抽象類:
// 沖咖啡
var Coffee = function(){};
Coffee.prototype = new Beverage();
Coffee.prototype.brew = function() {
console.log( '用沸水沖泡咖啡' );
}
Coffee.prototype.pourInCup = function() {
console.log( '把咖啡倒進杯子' );
}
Coffee.prototype.addCondiments = function() {
console.log( '加糖和牛奶' );
}
var Coffee = new Coffee();
Coffee.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();
那么在上面的例子中沪蓬，到底誰才是所謂的模板方法呢?答案是 Beverage.prototype.init。
Beverage.prototype.init 被稱為模板方法的原因是来候，該方法中封裝了子類的算法框架怜跑，它作為一個算法的模板，指導(dǎo)子類以何種順序去執(zhí)行哪些方法吠勘。在 Beverage.prototype.init 方法中性芬，算法內(nèi)的每一個步驟都清楚地展示在我們眼前。
好萊塢原則
我們要引入一個新的設(shè)計原則——著名的“好萊塢原則”剧防。
好萊塢原則簡單來說就是：“別找我們植锉，我們來找你”，是一種反向的控制結(jié)構(gòu)峭拘，指的是父類調(diào)用一個類的操作俊庇。
在這一原則的指導(dǎo)下，模板方法模式就是允許底層組件將自己掛鉤到高層組件中鸡挠，而高層組件會決定什么時候辉饱、以何種方式去使用這些底層組件。
在好萊塢原則的指導(dǎo)之下拣展，下面這段代碼可以達到和使用繼承一樣的效果：
var Beverage = function(param) {
var boilWater = function() {
console.log( '0 把水煮沸' );
};
var brew = param.brew || function() {
throw new Error( '必須傳遞 brew 方法' );
};
var pourInCup = param.pourInCup || function() {
throw new Error( '必須傳遞 pourInCup 方法' );
};
var addCondiments = param.addCondiments || function() {
throw new Error( '必須傳遞 addCondiments 方法' );
};
var F = function(){};
F.prototype.init = function(){
boilWater();
brew();
pourInCup();
addCondiments();
};
return F;
};
var Coffee = Beverage({
brew: function() {
console.log( '1 用沸水沖泡咖啡' );
},
pourInCup: function() {
console.log( '2 把咖啡倒進杯子' );
},
addCondiments: function() {
console.log( '3 加糖和牛奶' );
}
});
var coffee = new Coffee();
coffee.init();
var Tea = Beverage({
brew: function() {
console.log( '1 用沸水浸泡茶葉' );
},
pourInCup: function(){
console.log( '2 把茶倒進杯子' );
},
addCondiments: function() {
console.log( '3 加檸檬' );
}
});
var tea = new Tea();
tea.init();
總結(jié)
模板方法應(yīng)用于下列情況：
- 一次性實現(xiàn)一個算法的不變的部分彭沼，并將可變的行為留給子類來實現(xiàn)
- 各子類中公共的行為應(yīng)被提取出來并集中到一個公共父類中的避免代碼重復(fù)，不同之處分離為新的操作备埃，最后姓惑，用一個釣魚這些新操作的模板方法來替換這些不同的代碼
- 控制子類擴展褐奴，模板方法只在特定點調(diào)用“hook”操作，這樣就允許在這些點進行擴展
和策略模式不同于毙，模板方法使用繼承來改變算法的一部分敦冬，而策略模式使用委托來改變整個算法。
參考引用資料
《JavaScript設(shè)計模式與開發(fā)實踐》
