JavaScript设计模式之模板方法模式原理与用法示例


Posted in Javascript onAugust 07, 2018

本文实例讲述了JavaScript设计模式之模板方法模式原理与用法。分享给大家供大家参考,具体如下:

一、模板方法模式:一种只需使用继承就可以实现的非常简单的模式。

二、模板方法模式由两部分组成,第一部分是抽象父类,第二部分是具体的实现子类。

三、以设计模式中的Coffee or Tea来说明模板方法模式:

1、模板Brverage,代码如下:

var Beverage = function(){};
Beverage.prototype.boilWater = function(){
  console.log('把水煮沸');
};
Beverage.prototype.pourInCup = function(){
  throw new Error( '子类必须重写pourInCup' );
};
Beverage.prototype.addCondiments = function(){
  throw new Error( '子类必须重写addCondiments方法' );
};
Beverage.prototype.customerWantsConditions = function(){
  return true; //默认需要调料
};
Beverage.prototype.init = function(){
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()){
    //如果挂钩返回true,则需要调料
    this.addCondiments();
  }
};

2、子类继承父类

var CoffeeWithHook = function(){};
CoffeeWithHook.prototype = new Beverage();
CoffeeWithHook.prototype.brew = function(){
  console.log('把咖啡倒进杯子');
};
CoffeeWithHook.prototype.addCondiments = function(){
  console.log('加糖和牛奶');
};
CoffeeWithHook.prototype.customerWantsCondiments = function(){
 return window.confirm( '请问需要调料吗?' );
};

3、煮一杯咖啡

var coffeeWithHook = new CoffeeWithHook();
coffeeWithHook.init();

四、另一种写法

var Beverage = function( param ){
  var boilWater = function(){
   console.log( '把水煮沸' );
  };
  var brew = param.brew || function(){
   throw new Error( '必须传递brew方法' );
  };
  var pourInCup = param.pourInCup || function(){
    throw new Error( '必须传递pourInCup方法' );
  };
  var addCondiments = param.addCondiments || function(){
   throw new Error( '必须传递addCondiments方法' );
  };
  var F = function(){};
  F.prototype.init = function(){
   boilWater();
   brew();
   pourInCup();
   addCondiments();
  };
  return F;
};
var Coffee = Beverage({
  brew: function(){
     console.log( '用沸水冲泡咖啡' );
  },
  pourInCup: function(){
    console.log('把咖啡倒进杯子');
  },
  addCondiments: function(){
    console.log('加糖和牛奶');
  }
});
var coffee = new Coffee();
coffee.init();

上述代码使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试运行结果:

JavaScript设计模式之模板方法模式原理与用法示例

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
js 自动播放的实例代码
Nov 19 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
javascript如何创建对象
Aug 29 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 #Javascript
深入浅析var,let,const的异同点
Aug 07 #Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 #Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 #Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 #Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 #Javascript
You might like
解析dedecms空间迁移步骤详解
2013/05/15 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
对numpy.append()里的axis的用法详解
2018/06/28 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python中while和for的区别总结
2019/06/28 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python函数中的可变长参数详解
2019/09/12 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
见习期自我鉴定
2013/11/07 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
初三英语教学计划
2015/01/23 职场文书
会计试用期自我评价
2015/03/10 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python