学习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 相关文章推荐
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
javascript中的面向对象
Mar 30 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
vue-router 中 meta的用法详解
Nov 01 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 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
基于JSON数据格式详解
2017/08/31 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
python得到windows自启动列表的方法
2018/10/14 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python爬虫之遍历单个域名
2019/11/20 Python
python -v 报错问题的解决方法
2020/09/15 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
中学生校园广播稿
2014/01/16 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
森林病虫害防治方案
2014/06/02 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
手写实现JS中的new
2021/11/07 Javascript
原生JS实现分页
2022/04/19 Javascript