再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)
来源:互联网 发布:手机服务器端口怎么查 编辑:程序博客网 时间:2024/04/26 19:24
模板方法模式
由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享
行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模式并加以实现
模板方法模式(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设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。
欢迎转载,转载请注明作者,原文出处。
阅读全文
0 0
- 再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)
- 再起航,我的学习笔记之JavaScript设计模式07(抽象工厂模式)
- 再起航,我的学习笔记之JavaScript设计模式12(适配器模式)
- 再起航,我的学习笔记之JavaScript设计模式15(组合模式)
- 再起航,我的学习笔记之JavaScript设计模式15(组合模式)
- 再起航,我的学习笔记之JavaScript设计模式16(享元模式)
- 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)
- 再起航,我的学习笔记之JavaScript设计模式20(策略模式)
- 再起航,我的学习笔记之JavaScript设计模式25(迭代器模式)
- 再起航,我的学习笔记之JavaScript设计模式26(解释器模式)
- javaScript设计模式之模板方法模式
- 设计模式学习笔记之模板方法模式
- 我的设计模式学习之路7(模板模式)
- 设计模式的学习之路--模板方法设计模式
- 设计模式学习笔记-模板方法模式
- 【学习笔记】慕课网——设计模式之模板方法
- 模板方法设计模式--学习笔记
- 【学习笔记javascript设计模式与开发实践(模板方法模式)----11】
- 注入小结
- JavaSwing实现完整的菜单栏、工具栏和状态栏的GUI窗口
- 虚拟软件VMware
- js实现省市区三级联动
- uva 11987 并查集
- 再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)
- 9-7 DAIRY
- 困扰我一周左右的semver
- 问题 B: 二哈学素数
- Codeforces 853A Round#433 Div2C & Div1A Planning:优先队列或堆或排序
- 最小生成树prim n^2
- hqu.edu.cn域名测试
- 论文中图片加方框并且放大显示 matlab代码
- 一个java面试题:一个农夫养了一头牛,三年后,这头牛每年会生出一头牛,生出来的牛三年后又可以每年生出一头牛,不考虑牛的性别和生死,问农夫10年后有多少头牛?