学习JavaScript设计模式之模板方法模式


Posted in Javascript onJanuary 20, 2016

一、定义

模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类
模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。

二、示例

Coffee or Tea
(1) 把水煮沸
(2) 用沸水浸泡茶叶
(3) 把茶水倒进杯子
(4) 加柠檬

/* 抽象父类:饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
  throw new Error("子类必须重写addCondiments方法");
};

/* 模板方法 */
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  this.addCondiments();
}

/* 实现子类 Coffee*/
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 coffee = new Coffee();
coffee.init();

通过模板方法模式,在父类中封装了子类的算法框架。这些算法框架在正常状态下是适用大多数子类的,但也会出现“个性”子类。
如上述流程,加调料是可选的。
钩子方法可以解决这个问题,放置钩子是隔离变化的一种常见手段。

/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
  return true;
};
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()) {
    this.addCondiments();
  }
}

/* 实现子类 Tea*/
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("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加调料吗?");
};
var tea = new Tea();
tea.init();

JavaScript没有提供真正的类式继承,继承是通过对象与对象之间的委托来实现的。

三、“好莱坞原则”:别调用我们,我们会调用你

典型使用场景:

(1)模板方法模式:使用该设计模式意味着子类放弃了对自己的控制权,而是改为父类通知子类。作为子类,只负责提供一些设计上的细节。
(2)观察者模式:发布者把消息推送给订阅者。
(3)回调函数:ajax异步请求,把需要执行的操作封装在回调函数里,当数据返回后,这个回调函数才被执行。

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
JS的数组迭代方法
Feb 05 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
angular分页指令操作
Jan 09 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 #Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 #Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 #Javascript
js实现图片无缝滚动特效
Mar 19 #Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
PHP的FTP学习(一)
2006/10/09 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
OpenCV实现人脸识别
2017/04/07 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python饼状图的绘制实例
2019/01/15 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
医院工作检讨书范文
2014/02/10 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
二婚主持词
2015/06/30 职场文书
cf战队宣传语
2015/07/13 职场文书
养成教育主题班会
2015/08/13 职场文书
如何用python插入独创性声明
2021/03/31 Python