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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
js正则表达式的使用详解
Jul 09 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
js实现网页抽奖实例
Aug 05 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
python学习 流程控制语句详解
2016/06/01 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
农行心得体会
2014/09/02 职场文书
心理健康教育主题班会
2015/08/13 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL