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


Posted in Javascript onMarch 04, 2015

介绍

模板方法(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”操作,这样就允许在这些点进行扩展

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

Javascript 相关文章推荐
a标签的href与onclick事件的区别详解
Nov 12 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
百度地图自定义控件分享
Mar 04 #Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 #Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 #Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 #Javascript
You might like
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
Vue中props的详解
2019/05/16 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python 下载文件的多种方法汇总
2020/11/17 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
医院信息公开实施方案
2014/05/09 职场文书
授权委托书格式
2014/07/31 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
二人合伙经营协议书
2014/09/13 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
python微信智能AI机器人实现多种支付方式
2022/04/12 Python