模板方法模式，是一種典型的通過封裝變化提高系統(tǒng)擴(kuò)展性的設(shè)計模式。在傳統(tǒng)的面向?qū)ο笳Z言中榔袋，一個運用了模板方法模式的程序中烈和，子類的方法種類和執(zhí)行順序都是基本不變的爱只，所以把這部分邏輯抽象到父類的模板方法中。而子類的方法具體怎么實現(xiàn)則是可變的招刹，于是我們把這部分變化的邏輯封裝到子類中恬试。通過增加新的子類，就能給系統(tǒng)增加新的功能疯暑，并不需要改動抽象父類以及其他子類训柴，這符合開放-封閉原則。
定義抽象類妇拯，父類
模板方法模式
Beverage是模板類幻馁，Beverage.prototype.init是模板方法洗鸵，它被稱為模板方法的原因是它內(nèi)部封裝了子類的算法框架，它作為一個算法的模板仗嗦，指導(dǎo)子類以何種順序去執(zhí)行方法
var Beverage = function(){}
Beverage.prototype.boilWater = function(){
console.log('把水煮沸');
}
Beverage.prototype.brew = function(){
throw new Error('子類必須重寫brew方法')
} //空方法膘滨，由子類重寫，如果子類不重寫該方法稀拐，會直接拋出異常提醒
Beverage.prototype.pourInCup = function(){
throw new Error('子類必須重寫pourInCup方法')
} //空方法火邓，由子類重寫，如果子類不重寫該方法钩蚊，會直接拋出異常提醒
Beverage.prototype.addCondiments = function(){
throw new Error('子類必須重寫addCondiments方法')
} //空方法贡翘，由子類重寫，如果子類不重寫該方法砰逻，會直接拋出異常提醒
Beverage.prototype.init = function(){ //初始化方法
this.boilWater()
this.brew()
this.pourInCup()
this.addCondiments()
}
//子類繼承父類
//咖啡類鸣驱，泡咖啡
var Coffee = function(){}
Coffee.prototype = new Beverage()
Coffee.prototype.brew = function(){
console.log('用沸水沖泡咖啡');
}
Coffee.prototype.pourInCup = function(){
console.log('把咖啡倒進(jìn)杯子');
}
Coffee.prototype.addCondiments = function(){
console.log('加糖和牛奶');
}
var oneCoffee = new Coffee()
oneCoffee.init()
//子類
//茶類，泡茶
var Tea = function(){}
Tea.prototype = new Beverage()
Tea.prototype.brew = function(){
console.log('用沸水浸泡茶葉');
}
Tea.prototype.pourInCup = function(){
console.log('把茶倒進(jìn)杯子');
}
Tea.prototype.addCondiments = function(){
console.log('加檸檬');
}
var oneTea = new Tea()
oneTea.init()
父類中鉤子方法
在之前的Beverage類中蝠咆，模板方法init已經(jīng)規(guī)定好飲料沖泡的順序踊东，大部分情況是合適的，但如果有的飲料不加調(diào)料呢刚操？所以需要有個合適的方法來使得子類不受父類模板方法的約束闸翅。
鉤子方法(hook)可以用來解決這個問題，放置鉤子是隔離變化的一種常見手段菊霜。在父類中容易變化的地方放置鉤子坚冀，鉤子可以有一個默認(rèn)的實現(xiàn)，究竟要不要“掛鉤”鉴逞，由子類自行決定记某。
鉤子方法的返回結(jié)果決定了模板方法后面部分的執(zhí)行步驟，也就是程序接下來的走向构捡，如此液南，程序就擁有變化的可能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
var Beverage = function(){}
Beverage.prototype.boilWater = function(){
console.log('把水煮沸');
}
Beverage.prototype.brew = function(){
throw new Error('子類必須重寫brew方法')
} //空方法勾徽，由子類重寫滑凉，如果子類不重寫該方法，會直接拋出異常提醒
Beverage.prototype.pourInCup = function(){
throw new Error('子類必須重寫pourInCup方法')
} //空方法喘帚，由子類重寫畅姊，如果子類不重寫該方法，會直接拋出異常提醒
Beverage.prototype.addCondiments = function(){
throw new Error('子類必須重寫addCondiments方法')
} //空方法吹由，由子類重寫若未，如果子類不重寫該方法，會直接拋出異常提醒
Beverage.prototype.customerWantsCondiments = function(){ //鉤子方法溉知，
return true; //默認(rèn)需要調(diào)料
}
Beverage.prototype.init = function(){ //初始化方法
this.boilWater()
this.brew()
this.pourInCup()
if(this.customerWantsCondiments()){ //在模板方法中陨瘩，默認(rèn)是需要調(diào)料的
this.addCondiments()
}
}
//子類
var CoffeeWithHooK = function(){}
CoffeeWithHooK.prototype = new Beverage()
CoffeeWithHooK.prototype.brew = function(){
console.log('用沸水沖泡咖啡');
}
CoffeeWithHooK.prototype.pourInCup = function(){
console.log('把咖啡倒進(jìn)杯子');
}
CoffeeWithHooK.prototype.addCondiments = function(){
console.log('加糖和牛奶');
}
CoffeeWithHooK.prototype.customerWantsCondiments = function(){
return window.confirm('您需要加調(diào)料么?')
}
var oneCoffeeWithHooK = new CoffeeWithHooK()
oneCoffeeWithHooK.init()
</script>
</html>
在js中腕够，基于繼承的應(yīng)用場景其實并不多，因為有更好的選擇舌劳，模板方法模式使用高階函數(shù)的寫法會更為優(yōu)雅帚湘。
var Beverage = function(param){
var boilWater = function(){
console.log('把水煮沸');
}
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 = new Beverage({
brew: function(){
console.log('用沸水沖泡咖啡');
},
pourInCup: function(){
console.log('把咖啡倒進(jìn)杯子');
},
addCondiments: function(){
console.log('加糖和牛奶');
}
})
var Tea = new Beverage({
brew: function(){
console.log('用沸水浸泡茶葉');
},
pourInCup: function(){
console.log('把茶倒進(jìn)杯子');
},
addCondiments: function(){
console.log('加檸檬');
}
})
var coffee = new Coffee()
coffee.init()
var tea = new Tea()
tea.init()
//把brew、pourInCup甚淡、addCondiments依次傳入Beverage函數(shù)中大诸，Beverage函數(shù)被調(diào)用之后返回構(gòu)造器F。F中包含模板方法 F.prototype.init贯卦，跟繼承得到的結(jié)果一樣资柔，該模板方法封裝了子類的算法結(jié)構(gòu)。
//在js中撵割，基于繼承的應(yīng)用場景其實并不多贿堰，因為有更好的選擇，使用高階函數(shù)的寫法會更為優(yōu)雅啡彬。
