模板方法模式

什么是模板方法模式

模板方法模式（Template Method） ——基于继承的设计模式

模板方法模式是一种典型的通过封装变化提高系统扩展性的设计模式。在传统的面向对象语言中，一个运用了模板方法模式的程序中，子类的方法种类和执行顺序都是不变的，所以我们把这部分逻辑抽象到父类的模板方法里面。而子类的方法具体怎么实现则是可变的，于是我们把这 部分变化的逻辑封装到子类中。通过增加新的子类，我们便能给系统增加新的功能，并不需要改动抽象父类以及其他子类，这也是符合开放-封闭原则的。

但在 JavaScript中，我们很多时候都不需要依样画瓢地去实现一个模版方法模式，高阶函数是更好的选择。

模板模式的组成

模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类

• 父类：封装了之类的算法框架，包括一些公共方法以及封装子类中所有方法的执行顺序
• 子类：继承整个抽象类，也继承整个算法的结构，并且可以选择重写父类的方法

例子

使用咖啡与茶（经典）的例子

咖啡

煮咖啡有以下步骤：

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

茶

煮茶有以下步骤：

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

使用模板模式

我们先看他们的共同点：

步骤	泡咖啡	泡茶
1	把水煮沸	把水煮沸
2	用沸水冲泡咖啡	用沸水浸泡茶叶
3	把咖啡倒进杯子	把茶水倒进杯子
4	加糖和牛奶	加柠檬

• 步骤1：相同
• 步骤2：类似。只不过一个是泡咖啡，一个是泡茶叶，但是我们可以把它们都抽象为"饮料"
• 步骤3：类似。也和步骤2是一个问题
• 步骤4：类似。一个是加糖和牛奶，一个是加柠檬，因此我们可以把它们都抽象为"调料"

因此现在的步骤就是：

1. 把水煮沸
2. 用沸水浸泡饮料
3. 把饮料倒进杯子
4. 加调料

我们先写一个抽象类（父类）：

var Beverage = function() {};

Beverage.prototype.boilWater = function() {
    console.log('把水煮沸');
}

Beverage.prototype.brew = function() {}

Beverage.prototype.pourInCup = function() {}   

Beverage.prototype.addConiments = function() {}

Beverage.prototype.init = function() {
    this.boilWater();
    this.brew();
    this.pourInCup();
    this.addConiments();
}

再写 Coffee 子类 和 Tea 子类

var Coffee = function() {};

Coffee.prototype =  new Beverage();

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

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

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


var Tea = function() {};

Tea.prototype = new Beverage();

Tea.prototype.brew = function() {
    console.log('用沸水浸泡茶叶');
}
Tea.prototype.pourInCup = function() {
    console.log('把茶倒进杯子');
}
Tea.prototype.addConiments = function() {
    console.log('加柠檬');
}

通过brew，pourInCup，addConiments重新抽象类Beverage的方法

Tea 子类 和 Coffee 子类 调用init方法，沿着原型链，找到抽象类Beverage的init方法，并调用该方法

调用 new Tea()：

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

其中Beverage.prototype.init是被称为模板方法的原因：它作为一个算法的模板，指导子类以何种顺序去执行哪些方法，在 Beverage.prototype.init 方法中，执行的每一个步骤我们的非常清楚

参考资料：

• JavaScript 设计模式与开发实践
• Head First 设计模式