javascript设计模式七：模板方法模式
模板方法模式，是一种典型的通过封装变化提高系统扩展性的设计模式。在传统的面向对象语言中，一个运用了模板方法模式的程序中，子类的方法种类和执行顺序都是基本不变的，所以把这部分逻辑抽象到父类的模板方法中。而子类的方法具体怎么实现则是可变的，于是我们把这部分变化的逻辑封装到子类中。通过增加新的子类，就能给系统增加新的功能，并不需要改动抽象父类以及其他子类，这符合开放-封闭原则。
定义抽象类，父类
模板方法模式
Beverage是模板类，Beverage.prototype.init是模板方法，它被称为模板方法的原因是它内部封装了子类的算法框架，它作为一个算法的模板，指导子类以何种顺序去执行方法
1var Beverage = function(){}
2
3Beverage.prototype.boilWater = function(){
4 console.log('把水煮沸');
5}
6
7Beverage.prototype.brew = function(){
8 throw new Error('子类必须重写brew方法')
9} //空方法，由子类重写，如果子类不重写该方法，会直接抛出异常提醒
10
11Beverage.prototype.pourInCup = function(){
12 throw new Error('子类必须重写pourInCup方法')
13} //空方法，由子类重写，如果子类不重写该方法，会直接抛出异常提醒
14
15Beverage.prototype.addCondiments = function(){
16 throw new Error('子类必须重写addCondiments方法')
17} //空方法，由子类重写，如果子类不重写该方法，会直接抛出异常提醒
18
19Beverage.prototype.init = function(){ //初始化方法
20 this.boilWater()
21 this.brew()
22 this.pourInCup()
23 this.addCondiments()
24}
25
26//子类继承父类
27//咖啡类，泡咖啡
28var Coffee = function(){}
29
30Coffee.prototype = new Beverage()
31
32Coffee.prototype.brew = function(){
33 console.log('用沸水冲泡咖啡');
34}
35
36Coffee.prototype.pourInCup = function(){
37 console.log('把咖啡倒进杯子');
38}
39
40Coffee.prototype.addCondiments = function(){
41 console.log('加糖和牛奶');
42}
43
44var oneCoffee = new Coffee()
45
46oneCoffee.init()
47
48//子类
49//茶类，泡茶
50var Tea = function(){}
51Tea.prototype = new Beverage()
52
53Tea.prototype.brew = function(){
54 console.log('用沸水浸泡茶叶');
55}
56
57Tea.prototype.pourInCup = function(){
58 console.log('把茶倒进杯子');
59}
60
61Tea.prototype.addCondiments = function(){
62 console.log('加柠檬');
63}
64
65var oneTea = new Tea()
66
67oneTea.init()父类中钩子方法
在之前的Beverage类中，模板方法init已经规定好饮料冲泡的顺序，大部分情况是合适的，但如果有的饮料不加调料呢？所以需要有个合适的方法来使得子类不受父类模板方法的约束。
钩子方法(hook)可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，由子类自行决定。
钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向，如此，程序就拥有变化的可能。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8</head>
9<body>
10
11</body>
12<script>
13var Beverage = function(){}
14
15Beverage.prototype.boilWater = function(){
16 console.log('把水煮沸');
17}
18
19Beverage.prototype.brew = function(){
20 throw new Error('子类必须重写brew方法')
21} //空方法，由子类重写，如果子类不重写该方法，会直接抛出异常提醒
22
23Beverage.prototype.pourInCup = function(){
24 throw new Error('子类必须重写pourInCup方法')
25} //空方法，由子类重写，如果子类不重写该方法，会直接抛出异常提醒
26
27Beverage.prototype.addCondiments = function(){
28 throw new Error('子类必须重写addCondiments方法')
29} //空方法，由子类重写，如果子类不重写该方法，会直接抛出异常提醒
30
31Beverage.prototype.customerWantsCondiments = function(){ //钩子方法，
32 return true; //默认需要调料
33}
34
35Beverage.prototype.init = function(){ //初始化方法
36 this.boilWater()
37 this.brew()
38 this.pourInCup()
39 if(this.customerWantsCondiments()){ //在模板方法中，默认是需要调料的
40 this.addCondiments()
41 }
42
43}
44
45//子类
46var CoffeeWithHooK = function(){}
47
48CoffeeWithHooK.prototype = new Beverage()
49
50CoffeeWithHooK.prototype.brew = function(){
51 console.log('用沸水冲泡咖啡');
52}
53
54CoffeeWithHooK.prototype.pourInCup = function(){
55 console.log('把咖啡倒进杯子');
56}
57
58CoffeeWithHooK.prototype.addCondiments = function(){
59 console.log('加糖和牛奶');
60}
61
62CoffeeWithHooK.prototype.customerWantsCondiments = function(){
63 return window.confirm('您需要加调料么?')
64}
65
66var oneCoffeeWithHooK = new CoffeeWithHooK()
67
68oneCoffeeWithHooK.init()
69
70</script>
71</html>在js中，基于继承的应用场景其实并不多，因为有更好的选择，模板方法模式使用高阶函数的写法会更为优雅。
1var Beverage = function(param){
2 var boilWater = function(){
3 console.log('把水煮沸');
4 }
5
6 var brew = param.brew || function(){
7 throw new Error('必须传递brew方法')
8 }
9
10 var pourInCup = param.pourInCup || function(){
11 throw new Error('必须传递pourInCup方法')
12 }
13
14 var addCondiments = param.addCondiments || function(){
15 throw new Error('必须传递addCondiments方法')
16 }
17
18 var F = function(){}
19
20 F.prototype.init = function(){
21 boilWater();
22 brew();
23 pourInCup();
24 addCondiments();
25 }
26
27 return F;
28}
29
30var Coffee = new Beverage({
31 brew: function(){
32 console.log('用沸水冲泡咖啡');
33 },
34 pourInCup: function(){
35 console.log('把咖啡倒进杯子');
36 },
37 addCondiments: function(){
38 console.log('加糖和牛奶');
39 }
40})
41
42var Tea = new Beverage({
43 brew: function(){
44 console.log('用沸水浸泡茶叶');
45 },
46 pourInCup: function(){
47 console.log('把茶倒进杯子');
48 },
49 addCondiments: function(){
50 console.log('加柠檬');
51 }
52})
53
54var coffee = new Coffee()
55coffee.init()
56
57var tea = new Tea()
58tea.init()
59
60//把brew、pourInCup、addCondiments依次传入Beverage函数中，Beverage函数被调用之后返回构造器F。F中包含模板方法 F.prototype.init，跟继承得到的结果一样，该模板方法封装了子类的算法结构。
61
62//在js中，基于继承的应用场景其实并不多，因为有更好的选择，使用高阶函数的写法会更为优雅。本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-11-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读