模板方法模式

由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享

行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模式并加以实现

模板方法模式(Template Method): 父类中定义一组操作算法骨架,而将一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

总的来说模板方法模式就是将多个模型抽象化归一,从中抽象提取出来一个最基本的模板,然后其他模块只需要继承这个模板方法,也可以拓展某些方法。

下面我们用一个提示框例子来开始本次的分享吧:

创建模板

模板类

var Alert = function(data) {
//如果没有数据则返回,防止后面程序执行
if(!data) return;
//设置内容
this.content = data.content;
//创建提示框面板
this.panel = document.createElement('div');
//创建提示内容组件
this.contentNode = document.createElement('p');
//创建确定按钮组件
this.confirmBtn = document.createElement('span');
//创建关闭按钮组件
this.closeBtn = document.createElement('b');
//为提示框面板添加类
this.panel.className = 'alert';
//为关闭按钮添加类
this.closeBtn.className = 'a-close';
//为确定按钮添加类
this.confirmBtn.className = 'a-confirm button blue';
//为确认按钮添加显示名称
this.confirmBtn.innerHTML = data.confirm || '确定';
//为提示内容添加文本
this.contentNode.innerHTML = this.content;
//为点击确定方法绑定执行方法
this.success = data.success || function() {};
//点击关闭按钮执行方法
this.fail = data.fail || function() {};
}

添加原型

Alert.prototype = {
//初始化方法
init: function() {
//生成提示框
this.panel.appendChild(this.closeBtn);
this.panel.appendChild(this.contentNode);
this.panel.appendChild(this.confirmBtn);
//插入页面
document.body.appendChild(this.panel);
//绑定事件
this.bindEvent();
//显示提示框
this.show();
},
bindEvent: function() {
var me=this;
//关闭按钮事件
this.closeBtn.onclick = function() {
//执行关闭取消方法
me.fail();
//隐藏弹层
me.hide();
}
//确定按钮事件
this.confirmBtn.onclick = function() {
//执行关闭确认方法
me.success();
//隐藏弹层
me.hide();
}
},
hide:function(){
this.panel.style.display='none';
},
show:function(){
this.panel.style.display='block';
}
}

拓展

至此我们的提示框基类就创建完毕了,拓展起来也很简单,我们试着拓展一个标题提示框

var TitleAlert=function(data){
//继承基本提示框
Alert.call(this,data);
//设置标题内容
this.title=data.title;
//创建标题组件
this.titleNode=document.createElement('h3');
//标题组件中写入标题内容
this.titleNode.innerHTML=this.title;
}
//继承基本提示框方法
TitleAlert.prototype=new Alert();
//对基本提示框创建方法拓展
TitleAlert.prototype.init=function(){
//插入标题
this.panel.insertBefore(this.titleNode,this.panel.firstChild);
//继承基本提示框init方法
Alert.prototype.init.call(this);
}

我们来试着调用一下

new TitleAlert({
title:'提示标题',
content:'提示内容',
success:function(){
alert('您点击了确定');
}
}).init()

总结

模板方法的核心在于对方法的重用,它将核心方法封装在基类中,让子类继承基类的方法,实现基类方法的共享,达到方法公用。当然这种设计模式也将导致基类控制子类必须准守某些法则。这是一种行为的约束。当然为了让行为的约束更可靠,基类中封装的方法通常是不变的算法,或者有稳定的调用方式。子类继承的方法也是可以拓展的,这就要求对基类继承的方法进行重写。当然为了更好地实践,我们通常需要控制这种拓展,这样才能让基类对子类有更稳健的束缚力。然而子类对自身私有行为的拓展还是很有必要的。

也谢谢大家看到这里:)如果你觉得我的分享还可以请点击推荐,分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。

欢迎转载,转载请注明作者,原文出处。

再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  2. 再起航,我的学习笔记之JavaScript设计模式09(原型模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...

  3. 再起航,我的学习笔记之JavaScript设计模式11(外观模式)

    经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...

  4. 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

  5. 再起航,我的学习笔记之JavaScript设计模式20(策略模式)

    策略模式 策略模式(Strategy):将定义的一组算法封装起来,使其相互之间可以替换.封装的算法具有一定的独立性,不会随客户端变化而变化. 其实策略模式在我们生活中可应用的地方还是比较多的,比如在商 ...

  6. 再起航,我的学习笔记之JavaScript设计模式22(访问者模式)

    访问者模式 概念介绍 访问者模式(Visitor): 针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法 解决低版本IE兼容性 我们来看下面这段代码,这段代码,我们封装了一个绑定 ...

  7. 再起航,我的学习笔记之JavaScript设计模式24(备忘录模式)

    备忘录模式 概念介绍 备忘录模式(Memento): 在不破坏对象的封装性的前提下,在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态. 简易分页 在一般情况下我们需要做 ...

  8. 再起航,我的学习笔记之JavaScript设计模式25(迭代器模式)

    迭代器模式 概念介绍 迭代器模式(Iterator): 在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素. 迭代器 程序中的循环是一种利器,循环语句也使我们程序开发更简洁高效,但是有时一遍 ...

  9. 再起航,我的学习笔记之JavaScript设计模式26(解释器模式)

    解释器模式 概念介绍 解释器模式(Interpreter):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 获取元素在页面中的路径 我们都知道获取一个 ...

随机推荐

  1. android 手风琴

    引用:http://note.youdao.com/share/?id=994df799c2dcc8d83a8909173e42f80d&type=note 先看效果,过瘾一番. 源码下载:h ...

  2. Android控件系列之RadioButton&RadioGroup(转)

    学习目的: 1.掌握在Android中如何建立RadioGroup和RadioButton 2.掌握RadioGroup的常用属性 3.理解RadioButton和CheckBox的区别 4.掌握Ra ...

  3. frame动画

    <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android=&q ...

  4. js 数组对象,数组的使用

    var a =new Array(1,2,3,4,'a','b','c',{x:1,y:2}); alert(a[7].x); //数组之中可以定义数组. var b=['a','b','c']; c ...

  5. xmlBean学习一

    在文档中看到了xmlBean的出现,因为项目使用JMS,模块之间通过xml文件传递数据,就学一下xmlBean,java中还提供了DOM,SAX来解析xm,但也是比较麻烦的:而xmlbean则将xml ...

  6. linux动态库加载RPATH, RUNPATH

    摘自http://gotowqj.iteye.com/blog/1926771 linux动态库加载RPATH, RUNPATH 链接动态库 如何程序在连接时使用了共享库,就必须在运行的时候能够找到共 ...

  7. [置顶] 编程模仿boost::function和boost::bind

    boost::function和boost::bind结合使用是非常强大的,他可以将成员函数和非成员函数绑定对一个对象上,实现了类似C#的委托机制.委托在许多时候可以替代C++里面的继承,实现对象解耦 ...

  8. Codechef CHSIGN Change the Signs(May Challenge 2018) 动态规划

    原文链接http://www.cnblogs.com/zhouzhendong/p/9004583.html 题目传送门 - Codechef CHSIGN 题意 第一行,一个数$T$,表示数据组数. ...

  9. 04-jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  10. Request获取客户端IP

    获取客户端的IP地址的方法是:request.getRemoteAddr() ,这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实IP地址了. ...