javascript设计模式七：模板方法模式

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

定义抽象类，父类

模板方法模式

Beverage是模板类，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.init = function(){   //初始化方法    
    this.boilWater()
    this.brew()
    this.pourInCup()
    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('加糖和牛奶');
}

var oneCoffee = new Coffee()

oneCoffee.init()

//子类
//茶类，泡茶
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 oneTea = new Tea()

oneTea.init()

父类中钩子方法

在之前的Beverage类中，模板方法init已经规定好饮料冲泡的顺序，大部分情况是合适的，但如果有的饮料不加调料呢？所以需要有个合适的方法来使得子类不受父类模板方法的约束。

钩子方法(hook)可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，由子类自行决定。

钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向，如此，程序就拥有变化的可能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
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 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 oneCoffeeWithHooK = new CoffeeWithHooK()

oneCoffeeWithHooK.init()

</script>
</html>

在js中，基于继承的应用场景其实并不多，因为有更好的选择，模板方法模式使用高阶函数的写法会更为优雅。

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

    var brew = param.brew || function(){
        throw new Error('必须传递brew方法')
    }

    var pourInCup = param.pourInCup || function(){
        throw new Error('必须传递pourInCup方法')
    }

    var addCondiments = param.addCondiments || function(){
        throw new Error('必须传递addCondiments方法')
    }

    var F = function(){}

    F.prototype.init = function(){
        boilWater();
        brew();
        pourInCup();
        addCondiments();
    }

    return F;
}

var Coffee = new Beverage({
    brew: function(){
        console.log('用沸水冲泡咖啡');
    },
    pourInCup: function(){
        console.log('把咖啡倒进杯子');
    },
    addCondiments: function(){
        console.log('加糖和牛奶');
    }
})

var Tea = new Beverage({
    brew: function(){
        console.log('用沸水浸泡茶叶');
    },
    pourInCup: function(){
        console.log('把茶倒进杯子');
    },
    addCondiments: function(){
        console.log('加柠檬');
    }
})

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

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

//把brew、pourInCup、addCondiments依次传入Beverage函数中，Beverage函数被调用之后返回构造器F。F中包含模板方法 F.prototype.init，跟继承得到的结果一样，该模板方法封装了子类的算法结构。

//在js中，基于继承的应用场景其实并不多，因为有更好的选择，使用高阶函数的写法会更为优雅。
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,723评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,003评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,512评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,825评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,874评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,841评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,812评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,582评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,033评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,158评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,789评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2赞 352

推荐阅读更多精彩内容

  • 静待花开
    静待花开 初春的天气，晚上依然是寒风凛冽，低年级的学生们还是坚持在上晚自习，我很早便等候在学校门口，不停的...
    橙子的时光阅读 200评论 2赞 1
  • 我怀念的
    这一年，我大四毕业。 这一天，我在浙江金华。 这一刻，我在怀念我怀念的人和事...
    酒挺好听故事挺好喝阅读 352评论 2赞 3