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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
两个Javascript小tip资料
Nov 23 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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
PHP实现网上点歌(二)
2006/10/09 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php自动加载方式集合
2016/04/04 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
Js sort排序使用方法
2011/10/17 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
Python greenlet实现原理和使用示例
2014/09/24 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
养成教育主题班会
2015/08/13 职场文书
反四风问题学习心得体会
2016/01/22 职场文书