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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
Nest.js散列与加密实例详解
Feb 24 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
国内咖啡文化
2021/03/03 咖啡文化
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
写一个Vue Popup组件
2019/02/25 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
初中音乐教学反思
2014/01/12 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
公司辞职信模板
2015/05/13 职场文书
反邪教学习心得体会
2016/01/15 职场文书
导游词之南京中山陵
2019/11/27 职场文书
linux目录管理方法介绍
2022/06/01 Servers