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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
用 JSON 处理缓存
Apr 27 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
使用js和canvas实现时钟效果
Sep 08 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 分页分组类
2009/12/10 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
javascript实时显示当天日期的方法
2015/05/20 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
简单解决Python文件中文编码问题
2015/11/22 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
详解Python 中的容器 collections
2020/08/17 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
TCP/IP的分层模型
2013/10/27 面试题
工程采购员岗位职责
2014/03/09 职场文书
出纳工作检讨书
2014/10/18 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
汉字听写大会观后感
2015/06/12 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Django使用redis配置缓存的方法
2021/06/01 Redis