javascript设计模式 ? 模板方法模式原理与用法实例分析


Posted in Javascript onApril 23, 2020

本文实例讲述了javascript设计模式 ? 模板方法模式原理与用法。分享给大家供大家参考,具体如下:

介绍:模板方法模式是结构最简单的行为型设计模式,在其结构中只存在父类与子类之间的继承关系。使用模板方法模式,可以将一些复杂流程的实现步骤封装在一系列基本方法中。

定义:定义一个操作中算法的框架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。模板方法是一种类行为型模式。

场景:我们设计一个游戏机,用来运行不同的游戏,

示例:

var Game = function(){
  this.play = function(){
    this.initialize();
    this.startPlay();
    this.endPlay();
    this.uninstall();
  }
  this.uninstall = function(){
    console.log('uninstall Game')
  }
}
 
var CrossFire = function(){
  this.initialize = function(){
    console.log('CrossFire initialize')
  }
  this.startPlay = function(){
    console.log('CrossFire startPlay')
  }
  this.endPlay = function(){
    console.log('CrossFire endPlay')
  }
}
CrossFire.prototype = new Game();
 
var LeagueofLegends = function(){
  this.initialize = function(){
    console.log('LeagueofLegends initialize')
  }
  this.startPlay = function(){
    console.log('LeagueofLegends startPlay')
  }
  this.endPlay = function(){
    console.log('LeagueofLegends endPlay')
  }
}
LeagueofLegends.prototype = new Game();
 
 
var cf = new CrossFire();
cf.play();
// CrossFire initialize
// CrossFire startPlay
// CrossFire endPlay
// uninstall Game
var lol = new LeagueofLegends();
lol.play();
// LeagueofLegends initialize
// LeagueofLegends startPlay
// LeagueofLegends endPlay
// uninstall Game

在这个例子里,Game称为抽象类,抽象类内部定义了一个模板方法play,play的内部定义了算法的架构,算法的执行顺序,只有子类将步骤补齐后才能执行模板方法。
LeagueofLegends,CrossFire这两个类称为子类,继承自Game,他们的任务是实现模板方法中的步骤。
initialize,startPlay,endPlay,uninstall称为基本方法,用来具体实现每个步骤

模板方法模式总结:

优点:
* 模板方法模式是一种代码复用技术,将公共行为放在父类中,而通过其子类来实现不同的行为,他鼓励恰当使用继承来实现代码复用。
* 模板方法可以实现一种反向控制结构,通过子类覆盖父类的方法来决定某一步骤是否执行。

缺点:
* 需要为每一个基本方法的不同实现提供一个子类,如果父类中可变的基本方法太多,将会导致类的个数增加,系统更加庞大。

适用场景:
* 对一些复杂的算法进行分割,将其中固定不变的布冯设计为模板方法和父类基本方法,改变的细节由子类实现。
* 各子类的公共行为应当被提取出来并集中带一个父类中,利于代码复用。
* 需要子类决定父类的某个步骤是否执行,实现子类对父类的反向控制。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 #Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 #Javascript
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python struct模块解析
2014/06/12 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python如何对实例属性进行类型检查
2018/03/20 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
如何强制垃圾回收
2015/10/06 面试题
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
毕业生物理教师求职信
2013/10/17 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
大学生村官事迹材料
2014/01/21 职场文书
党员公开承诺事项
2014/03/25 职场文书
社会工作专业求职信
2014/07/15 职场文书
奖金申请报告模板
2015/05/15 职场文书
2016年教师节感言
2015/12/09 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python