js设计模式-模板方法模式

模版方法模式

定义:模板方法模式由二部分组成,第一部分是抽象父类,第二部分是具体实现的子类,一般的情况下是抽象父类封装了子类的算法框架,包括实现一些公共方法及封装子类中所有方法的执行顺序,子类可以继承这个父类,并且可以在子类中重写父类的方法,从而实现自己的业务逻辑。
使用场景:(主要用于步骤相似的事情)

  1. 泡饮品(茶 和 coffee)
  2. 公司面试

泡饮品(茶 和 coffee)

在例子中聊,泡茶和泡咖啡有同样的步骤,比如烧开水(boilWater)、冲泡(brew)、倒在杯子里(pourOnCup),加小料(addCondiments)等等。但每种饮料冲泡的方法以及所加的小料不一样,所以我们可以利用模板方法实现这个主要步骤。

首先先来定义抽象步骤(模板):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var CaffeineBeverage = function () {

};
CaffeineBeverage.prototype.prepareRecipe = function () {
this.boilWater();
this.brew();
this.pourOnCup();
if (this.customerWantsCondiments()) {
// 如果想加小料,就加上
this.addCondiments();
}
};
CaffeineBeverage.prototype.boilWater = function () {
console.log("将水烧开!");
};
CaffeineBeverage.prototype.pourOnCup = function () {
console.log("将饮料到再杯子里!");
};
CaffeineBeverage.prototype.brew = function () {
throw new Error("该方法必须重写!");
};
CaffeineBeverage.prototype.addCondiments = function () {
throw new Error("该方法必须重写!");
};
// 默认加上小料
CaffeineBeverage.prototype.customerWantsCondiments = function () {
return true;
};

下面两个函数分别是冲咖啡和冲茶所对应的函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 冲咖啡
var Coffee = function () {
CaffeineBeverage.apply(this);
};
Coffee.prototype = new CaffeineBeverage();
Coffee.prototype.brew = function () {
console.log("从咖啡机想咖啡倒进去!");
};
Coffee.prototype.addCondiments = function () {
console.log("添加糖和牛奶");
};
Coffee.prototype.customerWantsCondiments = function () {
return confirm("你想添加糖和牛奶吗?");
};

//冲茶
var Tea = function () {
CaffeineBeverage.apply(this);
};
Tea.prototype = new CaffeineBeverage();
Tea.prototype.brew = function () {
console.log("泡茶叶!");
};
Tea.prototype.addCondiments = function () {
console.log("添加柠檬!");
};
Tea.prototype.customerWantsCondiments = function () {
return confirm("你想添加柠檬嘛?");
};

使用confirm,可以让用户自己选择加不加小料,很不错嘛!

公司面试(百度面试 和 阿里面试)

面试例子

定义父类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 定义父类
let ITInterview = function(){};

// 笔试
ITInterview.prototype.writtenTest = function(){
console.log("某公司笔试测试");
};

// 技术面试
ITInterview.prototype.technicalInterview = function(){
console.log("某公司技术面试测试");
};

// 领导面试
ITInterview.prototype.leader = function(){
console.log("某公司leader来面试了");
};

// 等通知
ITInterview.prototype.waitNotice = function(){
console.log("某公司的offer到了");
};

定义模版方法
// 作用:封装了子类的算法框架,包括实现一些公共方法及封装子类中所有方法的执行顺序。
ITInterview.prototype.init = function(){
this.writtenTest();
this.technicalInterview();
this.leader();
this.waitNotice();
};

定义子类

首先子类需要重父类哪里继承所有的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let BaiDuInterview = function(){};
BaiDuInterview.prototype = new ITInterview();

// 笔试
BaiDuInterview.prototype.writtenTest = function(){
console.log("百度公司笔试测试"); // 无非就是面试题不一样呗
};

// 技术面试
BaiDuInterview.prototype.technicalInterview = function(){
console.log("百度公司技术面试测试");
};

// 领导面试
BaiDuInterview.prototype.leader = function(){
console.log("百度公司leader来面试了");
};

// 等通知
BaiDuInterview.prototype.waitNotice = function(){
console.log("百度公司的offer到了");
};

let baiduInterview = new BaiDuInterview();
baiduInterview.init(); // 子类还可以重写父类的init方法,这样各个公司面试的流程就不一样了。

总结

模板方法应用于下列情况:

一次性实现一个算法的不变的部分,并将可变的行为留给子类来实现
各子类中公共的行为应被提取出来并集中到一个公共父类中以避免代码重复,不同之处分离为新的操作,分别实现
控制子类扩展,模板方法可以只在特定点调用“Hook”操作,这样就只允许在这些点进行扩展。

注:
钩子(Hook)操作,它提供了缺省的行为,子类在必要时进行扩展。一个钩子操作的缺省操作通常是一个空操作。在模板方法中应指明哪些操是钩子操作(可以被重定义)以及哪些是抽象操作(必须被重定义)

和策略模式不同,模板方法使用继承来改变算法的一部分,而策略模式使用委托来改变整个算法(这一点暂时不是很明白,学习策略模式后再回来理解)。

Buy me a cup of coffee,thanks!