深入理解JavaScript系列(41):设计模式之模板方法详解

 更新时间:2015年03月04日 09:40:43   投稿:junjie  
这篇文章主要介绍了深入理解JavaScript系列(41):设计模式之模板方法详解,模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤,需要的朋友可以参考下

介绍

模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。

模板方法是一种代码复用的基本技术,在类库中尤为重要,因为他们提取了类库中的公共行为。模板方法导致一种反向的控制结构,这种结构就是传说中的“好莱坞法则”,即“别找找我们,我们找你”,这指的是父类调用一个类的操作,而不是相反。具体体现是面向对象编程编程语言里的抽象类(以及其中的抽象方法),以及继承该抽象类(和抽象方法)的子类。

正文

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

首先先来定义抽象步骤:

复制代码 代码如下:

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;
};

该函数在原型上扩展了所有的基础步骤,以及主要步骤,冲泡和加小料步骤没有实现,供具体饮料所对应的函数来实现,另外是否加小料(customerWantsCondiments )默认返回true,子函数重写的时候可以重写该值。

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

复制代码 代码如下:

// 冲咖啡
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.控制子类扩展,模板方法只在特定点调用“hook”操作,这样就允许在这些点进行扩展

和策略模式不同,模板方法使用继承来改变算法的一部分,而策略模式使用委托来改变整个算法。

相关文章

  • jquery中prop()方法和attr()方法的区别浅析

    jquery中prop()方法和attr()方法的区别浅析

    官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢
    2013-09-09
  • JavaScript String 对象常用方法详解

    JavaScript String 对象常用方法详解

    下面小编就为大家带来一篇JavaScript String 对象常用方法详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript es6的常用语法你知道吗

    javascript es6的常用语法你知道吗

    这篇文章主要为大家介绍了javascriptes6的常用语法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • javascript操作html控件实例(javascript添加html)

    javascript操作html控件实例(javascript添加html)

    几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。html标签便捷的操作,深受大家的喜欢。如何使用javascript来操作HTML控件,下面我介绍下比较麻烦的几个控件
    2013-12-12
  • Javascript Throttle & Debounce应用介绍

    Javascript Throttle & Debounce应用介绍

    Throttle:无视一定时间内所有的调用Debounce:一定间隔内没有调用时,接下来将为大家介绍下Throttle & Debounce的应用,感兴趣的朋友可以参考下哈
    2013-03-03
  • 使用HTML+CSS+JS制作简单的网页菜单界面

    使用HTML+CSS+JS制作简单的网页菜单界面

    这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下
    2015-07-07
  • JavaScript中对JSON对象的基本操作示例

    JavaScript中对JSON对象的基本操作示例

    JSON格式本就发自于JavaScript中的对象和数组,所以js操作起来自然也是最为简单原始,接下来我们就来看一些常用的JavaScript中对JSON对象的基本操作示例
    2016-05-05
  • Javascript的ES5,ES6的7种继承详解

    Javascript的ES5,ES6的7种继承详解

    这篇文章主要为大家详细介绍了Javascript的ES5,ES6的7种继承,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 与Math.pow 相反的函数使用介绍

    与Math.pow 相反的函数使用介绍

    Math.pow函数想必大家都知道吧,本例介绍的是与其相反的函数
    2014-08-08
  • 轻松学习JavaScript函数中的 Rest 参数

    轻松学习JavaScript函数中的 Rest 参数

    ES6 引入 rest 参数用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。下面我们来详细了解一下吧
    2019-05-05

最新评论