学习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 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
浅谈javascript错误处理
Aug 11 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
vue按需加载实例详解
Sep 06 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
JavaScript实现简单的计算器
Jan 16 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
浅析php变量修饰符static的使用
2013/06/28 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python 文件管理实例详解
2015/11/10 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
使用Pycharm分段执行代码
2020/04/15 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Python 如何创建一个线程池
2020/07/28 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
参赛口号
2014/06/16 职场文书
刑事法律意见书
2015/06/04 职场文书
婚宴来宾致辞
2015/07/28 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
python绘制箱型图
2021/04/27 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server