学习JavaScript设计模式之模板方法模式

一、定义

模板方法是基于继承的设计模式，可以很好的提高系统的扩展性。 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程序设计有所帮助。

赞 (0)

相关推荐

  • 学习php设计模式 php实现模板方法模式

    学习php设计模式 php实现模板方法模式

    一.意图 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.Template Method 使得子类可以在不改变一个算法的结构的情况下重定义该算法的某些特定的步骤[GOF95] 二.模板方法模式结构图 三.模板方法模式中主要角色 抽象模板(AbstractClass)角色: 定义一个或多个抽象方法让子类实现.这些抽象方法叫做基本操作,它们是顶级逻辑的组成部分. 定义一个模板方法.这个模板方法一般是一个具体方法,它给出顶级逻辑的骨架,而逻辑的组成步骤在对应的抽象操作中,这些操作将会推迟到子类中

  • C++设计模式之模板方法模式

    C++设计模式之模板方法模式

    前言 离开了自己工作了将近两年的公司,日子不再有了忙碌,可以闲下来,躺在家里的床上,想着以后的路怎么走,说实话,真的很迷茫,从2012年毕业到现在,时间不长,但是学到的东西真的是非常有限,一直从事于Windows平台上的开发.说到Windows平台的开发,大家都肯定知道的HOOK的,即使不知道HOOK,对于COM应该也是知道的,我的系列博文中也对COM进行过全面的总结.说白了,HOOK就是在执行某个功能时,会有一个一系列的执行过程,对于这个过程一般都是固定的,比如:第一步执行什么,第二步干什么,

  • C#模板方法模式(Template Method Pattern)实例教程

    本文以一个简单的实例形式讲述了C#模板方法模式的实现方法,分享给大家供大家参考.具体实现方法如下: 这里假设要做一道红烧肉,做法有很多,在不同的做法中都有相同的部分,比如都要放油.放肉.放调料等.也有不同之处,比如有些做法放可乐,有些做法放甜蜜酱,等等. 先提炼出一个抽象类,该类不仅有制作红烧肉的各个步骤,而且还把各个步骤归纳到另一个方法,我们把这个方法称作模版方法.另外,在模版方法中,对于一些不确定的方面先用抽象方法. public abstract class HongShaoRou { p

  • 学习JavaScript设计模式之模板方法模式

    一.定义 模板方法是基于继承的设计模式,可以很好的提高系统的扩展性. java中的抽象父类.子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类. 二.示例 Coffee or Tea (1) 把水煮沸 (2) 用沸水浸泡茶叶 (3) 把茶水倒进杯子 (4) 加柠檬 /* 抽象父类:饮料 */ var Beverage = function(){}; // (1) 把水煮沸 Beverage.prototype.boilWater = function() { conso

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

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

    本文实例讲述了JavaScript设计模式之模板方法模式原理与用法.分享给大家供大家参考,具体如下: 一.模板方法模式:一种只需使用继承就可以实现的非常简单的模式. 二.模板方法模式由两部分组成,第一部分是抽象父类,第二部分是具体的实现子类. 三.以设计模式中的Coffee or Tea来说明模板方法模式: 1.模板Brverage,代码如下: var Beverage = function(){}; Beverage.prototype.boilWater = function(){ cons

  • 学习JavaScript设计模式之迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. JavaScript中的Array.prototype.forEach 一.jQuery中的迭代器 $.each([1, 2, 3], function(i, n) { console.log("当前下标为:"+ i + " 当前元素为:"+ n ); }); 二.实现自己的迭代器 var each = function(ary, callback) { for(var i

  • 学习JavaScript设计模式之策略模式

    把不变的部分和变化的部分隔开是每个设计模式的主题. 条条大路通罗马.我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法.也可以使用gzip算法.其灵活多样,我们可以采用策略模式解决. 一.定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 基于策略类模式的程序至少由两部分组成.第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context,Context接收客户的请求,随后把请求委托给某一个策略类. 二.示例 计

  • 学习JavaScript设计模式之代理模式

    明星都有经纪人作为代理.如果请明星办一场商演,只能联系其经纪人,经纪人会把商演的细节和报酬谈好,再把合同交给明星签. 一.定义 代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理分为:保护代理和虚拟代理 保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现. 二.图片预加载(最常见的虚拟代理应用场景) 图片预加载是一种常用技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往

  • 学习JavaScript设计模式之状态模式

    状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变. 当电灯开着,此时按下开关,电灯会切换到关闭状态:再按一次开关,电灯又将被打开.同一个开关在不同的状态下,表现出来的行为是不一样的. 一.有限状态机 状态总数(state)是有限的. 任一时刻,只处在一种状态之中. 某种条件下,会从一种状态转变(transition)到另一种状态. 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 解释: (1)将状态封装成独立的类,并将请求委托给当前的状态对

  • 学习JavaScript设计模式之装饰者模式

    有时我们不希望某个类天生就非常庞大,一次性包含许多职责.那么我们就可以使用装饰着模式. 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象. 装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链. 一.不改动原函数的情况下,给该函数添加些额外的功能 1. 保存原引用 window.onload = function() { console.log(1); }; var _onload = window.onload ||

  • 学习JavaScript设计模式之责任链模式

    一.定义 责任链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 二.示例 假设这么一个场景: 我们负责一个售卖手机的电商网站,经过分别缴纳500元定金和200元定金的两轮预定后,到了正式购买阶段.针对预定用户实行优惠,支付过500元定金的用户会收到100元的商城优惠券,支付过200元定金的用户会收到50元的商城优惠券,没有支付定金的用户归为普通购买,且在库存有限的情况下不一定保证买到. /*

  • PHP设计模式之模板方法模式定义与用法详解

    本文实例讲述了PHP设计模式之模板方法模式定义与用法.分享给大家供大家参考,具体如下: 什么是模板方法模式 模板方法(Template Method)设计模式中使用了一个类方法templateMethod(), 该方法是抽象类中的一个具体方法, 这个方法的作用是对抽象方法序列排序,具体实现留给具体类来完成.关键在于模板方法模式定义了操作中算法的"骨架",而由具体类来实现. 什么时候使用模板方法 如果已经明确算法中的一些步骤, 不过这些步骤可以采用多种不同的方法实现, 就可以使用模板方法

  • JavaScript设计模式之命令模式实例分析

    JavaScript设计模式之命令模式实例分析

    本文实例讲述了JavaScript设计模式之命令模式.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命

随机推荐