模板方法模式

假如我们有一些对象,各个对象之间有一些相同的行为,也有一些不同的行为,这时,我们就可以用模板方法模式来把相同的部分上移到它们的共同原型中(父类),而将不同的部分留给自己各自重新实现。

模板方法:在这些平行对象的共同原型中定义的一个方法,它封装了子类的算法框架,它作为一个算法的模板,指导子类以何种顺序去执行哪些方法。

模板方法常常被架构师用于搭建项目的框架,架构师定好了框架的骨架,程序员们继承框架的结构后,负责往里面填空。

模板方法模式中,常常用到一个钩子方法:在父类中的容易变化的方法上放置钩子,模板方法依据钩子方法的返回值来决定是否执行容易变化的方法。

模板方法模式是一种基于继承的设计模式,但在JavaScript中也可以通过高阶函数来实现。

基于继承的模板方法模式:

//模板方法模式
//泡茶和冲咖啡,有相似的方法,也有不同的方法
//相似的方法在父类中实现,不同的方法在子类中各自重写
var Beverage = function () {};
Beverage.prototype.boilWater = function () {
console.log('把水煮沸');
};
Beverage.prototype.pourMaterial = function (material) {
console.log('把'+material+'倒进杯子');
};
Beverage.prototype.pourInCup = function () {
console.log('把沸水倒进杯子');
};
Beverage.prototype.addCondiments = function () {
throw new Error('子类必须自行实现该方法');
};
//钩子方法,是否需要加配料
Beverage.prototype.isWantCondiments = function () {
return true; //默认为true,子类自行实现来改变返回值
};
//模板方法,规定了各个方法的执行顺序
Beverage.prototype.init = function (material) {
this.boilWater();
this.pourMaterial(material);
this.pourInCup();
if(this.isWantCondiments()){ //根据钩子方法的返回值决定是否执行
this.addCondiments();
}
};
//====子类
var Coffee = function () {};
Coffee.prototype = new Beverage(coffee);
Coffee.prototype.addCondiments = function () {
console.log('加糖');
};
Coffee.prototype.isWantCondiments = function () {
return window.confirm('请问需要加糖吗?');
};
//调用
var coffee = '咖啡粉';
var coffee1 = new Coffee();
coffee1.init(coffee);

通过高阶函数来实现:

var Beverage1 = function (obj,material) {
var boilWater = function(){
console.log('把水煮沸');
};
var pourMaterial = function(material){
console.log('把'+material+'倒进杯子');
};
var pourInCup = function () {
console.log('把沸水倒进杯子');
};
var addCondiments = obj.addCondiments||function () {
throw new Error('子类必须自行实现该方法');
};
var isWantCondiments = obj.isWantCondiments||function () {
return true; //默认为true,子类自行实现来改变返回值
};
var F = function(){};
F.prototype.init = function(){
boilWater();
pourMaterial(material);
pourInCup();
if(isWantCondiments()){ //根据钩子方法的返回值决定是否执行
addCondiments();
}
};
return F;
};
//定义子类
var Coffee1 = Beverage1({
addCondiments: function(){
console.log('加糖');
},
isWantCondiments: function () {
return window.confirm('请问需要加糖吗?');
}
},'咖啡粉');
var Tea1 = Beverage1({
addCondiments: function(){
console.log('加柠檬');
},
isWantCondiments: function () {
return window.confirm('请问需要加柠檬吗?');
}
},'茶叶');
var aCupOfCoffee = new Coffee1();
aCupOfCoffee.init();
//把水煮沸
//把咖啡粉倒进杯子
//把沸水倒进杯子
//加糖(点确定)
var aCupOfTea = new Tea1();
aCupOfTea.init();
//把水煮沸
//把茶叶倒进杯子
//把沸水倒进杯子
//加柠檬(点确定)

参考文献: 《JavaScript模式》 《JavaScript设计模式与开发实践》

轻松掌握:JavaScript模板方法模式的更多相关文章

  1. javascript模板方法模式

    一:什么是模板方法模式: 模板方法模式由二部分组成,第一部分是抽象父类,第二部分是具体实现的子类,一般的情况下是抽象父类封装了子类的算法框架,包括实现一些公共方法及封装子类中所有方法的执行顺序,子类可 ...

  2. 《JavaScript设计模式与开发实践》读书笔记之模板方法模式

    1. 模板方法模式 1.1 面向对象方式实现模板方法模式 以泡茶和泡咖啡为例,可以整理为下面四步 把水煮沸 用沸水冲泡饮料 把饮料倒进杯子 加调料 首先创建一个抽象父类来表示泡一杯饮料 var Bev ...

  3. 再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  4. javascript设计模式——模板方法模式

    前面的话 在javascript开发中用到继承的场景其实并不是很多,很多时候喜欢用mix-in的方式给对象扩展属性.但这不代表继承在javascript里没有用武之地,虽然没有真正的类和继承机制,但可 ...

  5. JavaScript设计模式-----模板方法模式

    模板方法模式是一种只需要使用继承就可以实现的非常简单点的模式. 模板方法模式有两部分组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现 一些公共方法以及 ...

  6. [设计模式] javascript 之 模板方法模式

    模板方法模式说明 定义:定义方法操作的骨架,把一些具体实现延伸到子类中去,使用得具体实现不会影响到骨架的行为步骤! 说明:模式方法模式是一个继承跟复用的典型模式,该模式定义了一个抽象类,Abstrac ...

  7. javascript设计模式与开发实践阅读笔记(11)—— 模板方法模式

    模板方法模式: 由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序.子类通过继承这个抽象类,也继 ...

  8. javascript设计模式(张容铭)学习笔记 - 照猫画虎-模板方法模式

    模板方法模式(Template Method):父类中定义一组操作算法骨架,而降一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 项目经理体验了各个页面的 ...

  9. PHP设计模式之模板方法模式

    模板方法模式,也是我们经常会在不经意间有会用到的模式之一.这个模式是对继承的最好诠释.当子类中有重复的动作时,将他们提取出来,放在父类中进行统一的处理,这就是模板方法模式的最简单通俗的解释.就像我们平 ...

随机推荐

  1. 设有一数据库,包括四个表:学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)。

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  2. 快速搭建php环境

    WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...

  3. 在 ML2 中配置 Vlan Network- 每天5分钟玩转 OpenStack(93)

    上一节我们学习了 Neutron Vlan Network 的原理,今天讨论如何在 ML2 配置中 enable 它. 首先在 /etc/neutron/plugins/ml2/ml2_conf.in ...

  4. 探讨Android中的内置浏览器和Chrome

    1.Android默认浏览器和Chrome的区别 Android出厂自带的浏览器:安卓WebKit浏览器,也成内置浏览器或者默认浏览器. 安卓WebKit不是Chrome.Chrome浏览器在它的用户 ...

  5. 应用程序框架实战三十七:Util最新代码更新说明

    离上一篇又过去了一个月,时间比较紧,后续估计会更紧,所以这次将放出更多公共操作类及配套的CodeSmith模板,本篇将简要介绍新放出的重要功能,供有兴趣的同学参考. 重要更新 这一次对两个VS解决方案 ...

  6. android 通过访问 php 接受 or 传送数据

    先说传送数据,可以在 利用 php 代替传送,直接把 访问的url加上 xxx.php?informatin=xxxxxx 就行了 接收的看代码吧,详细注释. 首先是 我自己定义的php 文件 < ...

  7. Solr学习总结(三)Solr web 管理后台

    前面讲到了Solr的安装,按道理,这次应该讲讲.net与数据库的内容,C#如何操作Solr索引等.不过我还是想先讲一些基础的内容,比如solr查询参数如何使用,各个参数都代表什么意思? 还有solr ...

  8. Android 程序打包及签名

    为什么要签名??? 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来 ...

  9. PHP实现实现数字补零格式化

    在接支付SDK的时候,第三方回调处理时需要IP,并且IP的需求是:去掉点号,补零到每地址段3位, 如:192168000001 先看看我的实现: <?php $IP = explode ( '. ...

  10. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...