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 xml为数据源的下拉框控件
Jul 07 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
详解jQuery-each()方法
Mar 13 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
谈谈我在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
桌面中心(二)数据库写入
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
js实现时间日期校验
2020/05/26 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python中几种自动微分库解析
2019/08/29 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python