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跑步算法的实现代码
Dec 04 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
详解JavaScript树结构
Jan 09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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 类商品秒杀计时实现代码
2010/05/05 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
numpy中索引和切片详解
2017/12/15 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
学校四群教育实施方案
2014/06/12 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
教师演讲稿开场白
2014/08/25 职场文书
首次购房证明
2015/06/19 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Java中try catch处理异常示例
2021/12/06 Java/Android