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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
Javascript 面向对象特性
2009/12/28 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
详解Django之auth模块(用户认证)
2018/04/17 Python
python使用matplotlib绘制热图
2018/11/07 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
银行柜员求职自荐书
2014/06/18 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL