模版方法模式
模版方法是一种只需使用继承就可以实现的非常简单的模式
模版方法模式由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序.子类通过继承这个抽象类,也继承了整个算法结构,并且可以选择重写父类的方法
模式作用:
- 一次性实现一个算法的不变的部分,并将可变的行为留给子类来实现
- 各子类中公共的行为应被提取出来并集中到一个公共父类中,避免代码重复,不同之处分离为新的操作,最后用一个钩子的模版方法来替换这些不同的代码
- 控制子类扩展,模版方法只在特定点调用"hook"操作,这样就允许在这些点进行扩展
注意事项
- 和策略模式不同,模版方法使用继承来改变算法的一部分,而策略模式使用委托来改变整个算法
例子
Coffee of Tea
咖啡与茶是一个经典的例子,经常用来讲解模版方法模式
先泡一杯咖啡
首先,我们先来泡一杯咖啡,如果没有什么太个性化的的需求,泡咖啡的步骤通常如下:
(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) 加调料
所以,不管是冲泡还是浸泡,我们都能给它一个新的方法名称,比如说brew().同理,不管是加糖和牛奶,还是加柠檬,我们都可以称之为addCoundiments()
让我们忘记最开始创建的Coffee和Tea类.现在可以创建一个抽象父类来表示泡一杯饮料的整个过程.不论是Coffee还是Tea,都被我们用Beverage来表示,代码如下:
使用模版方法:
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();
}
创建Coffee子类和Tea子类
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()
现在我们的Coffee类已经完成了,接下来依葫芦画瓢,创建我们的Tea类:
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.prptotype.init
Beverage.prptotype.init被称为模版方法的原因是,该方法封装了子类的算法框架,它作为一个算法的模版,指导子类以何种顺序去执行哪些方法.在Beverage.prptotype.init方法中,算法内的每一个步骤都清楚地展示在我们眼前.
钩子方法
通过模版方法模式,我们在父类中封装了子类的算法框架.这些算法框架在正常状态下适用于大多数子类的,但如果有一些特别"个性"的子类呢?比如我们在饮料类Beverage中封装了饮料的冲泡顺序:
(1) 把水煮沸
(2) 用沸水冲泡饮料
(3) 把饮料倒进杯子
(4) 加调料
这四个冲泡饮料的步骤适用于咖啡和茶,在我们的饮料店里,根据这4个步骤制作出来的咖啡和茶,一直顺利地提供给绝大部分客人享用.但有一些客人喝咖啡是不加调料的(糖和牛奶)的.既然Bverage作为父类,已经规定好了冲泡饮料的4个步骤,那么有什么办法可以让子类不受这个约束呢?
钩子方法(hook)可以用来解决这个问题,放置钩子是隔离变化的一种常见手段.我们在父类中容易变化的地方放置钩子,钩子可以有一个默认的实现,究竟要不要"挂钩",这由子类自行决定.钩子方法的返回结构决定了模版方法后面的执行步骤,也就是程序接下来的走向,这样一来,程序就拥有了变化的可能.
在这个例子里,我们把挂钩的名字定位customerWantsCondiments,接下来将挂钩放入Beverage类,看看我们如何得到一杯不需要糖和牛奶的咖啡,代码如下:
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();
}
}
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("加糖和牛奶");
}
Beverage.prototype.customerWantsCondiments=function(){
return window.confirm("请问要加调料吗?");
}
var coffee=new Coffee();
coffee.init()
在JavaScript中,我们很多时候不需要依样画瓢地实现一个模版方法模式,高阶函数是更好的选择.