JavaScript设计模式九（模板方法模式）

定义：

模板方法模式是一种只需要使用继承就可以实现的非常简单的模式
模板方法模式由两部分组成，第一部分是抽象父类，另一部分是具体的实现子类。通常抽象父类中封装了子类的算法框架，包括实现一些公共的方法以及封装子类中所有方法的执行顺序。子类通过继承这个类，然后继承了这个算法，然后重写父类的方法

例子

例子是泡一杯咖啡和茶
对于咖啡的顺序:

• 把水煮沸
• 用沸水冲泡咖啡
• 把咖啡倒进杯子
• 加糖和牛奶

代码实现：

var Coffee = function(){};
Coffee.prototype.boilWater = function(){
    console.log('把水煮沸');
};
Coffee.prototype.brewCoffee = function(){
    console.log('用沸水冲泡咖啡');
};
Coffee.prototype.pourInCup = function(){
    console.log('把咖啡倒进杯子');
};
Coffee.prototype.addSugarAndMilk = function() {
    console.log('加糖和牛奶');
};
Coffee.prototype.init = function(){
    this.boilWater();
    this.brewCoffee();
    this.pourInCup();
    this.addSugarAndMilk();
};

var coffee = new Coffee();
coffee.init();

然后我们看泡一壶茶：

• 把水煮沸
• 用沸水浸泡茶叶
• 把茶叶倒进杯子
• 加柠檬

var Tea = function(){};
Tea.prototype.boilWater = function() {
    console.log('把水煮沸');
}
Tea.prototype.steepTeaBag = function() {
    console.log('用沸水浸泡茶叶');
}
Tea.prototype.pourInCup = function() {
    console.log('把茶叶倒进杯子');
}
Tea.prototype.addLimo = function() {
    console.log('加柠檬');
}
Tea.protype.init = function(){
    this.boilWater();
    this.steepTeaBag();
    this.pourInCup();
    this.addLimo();
}

var tea = new Tea();
tea.init();

我们看这两个是不是有很多共同点？抽离下，基本是4个步骤：

• 把水煮沸
• 用沸水冲泡饮料
• 把饮料倒到杯子中
• 加调料

代码如下：

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();
};

但是这个类在现实来说，是没有啥意义的，我们可以让Coffee, Tea继承于Beverage

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();

这样一杯咖啡就完成了，茶也可以用类似的方法来实现，我们本章说的是模板方法，那么什么是模板方法呢？就是Beverage.prototype.init方法，这个方法中封装了子类的算法框架，作为算法的模板，指导子类以何种方法和顺序去执行方法

钩子方法

通过模板方法，我们在父类中封装了子类的算法框架，这些正常情况下是适用的，但是总是有特殊情况，例如有些喝咖啡的人不要加糖，利用钩子就可以实现

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; // 默认需要调料 
};

Beverage.prototype.init = function(){ 
    this.boilWater();
    this.brew(); 
    this.pourInCup(); 
    if ( this.customerWantsCondiments() ){
        this.addCondiments(); 
    } 
};

// 如果挂钩返回 true，则需要调料

var CoffeeWithHook = function(){};

CoffeeWithHook.prototype = new Beverage();

CoffeeWithHook.prototype.brew = function(){ 
    console.log( '用沸水冲泡咖啡' ); 
};

CoffeeWithHook.prototype.pourInCup = function(){ 
    console.log( '把咖啡倒进杯子' ); 
};

CoffeeWithHook.prototype.addCondiments = function(){ 
    console.log( '加糖和牛奶' ); 
};

CoffeeWithHook.prototype.customerWantsCondiments = function(){
    return window.confirm( '请问需要调料吗？' );
};

var coffeeWithHook = new CoffeeWithHook(); 

coffeeWithHook.init();