学习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 相关文章推荐
iphone safari不支持position fixed的解决方法
May 04 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php导入模块文件分享
2015/03/17 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
javascript prototype 原型链
2009/03/12 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
在django中,关于session的通用设置方法
2019/08/06 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
国家助学金受助感言
2015/08/01 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记