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 动态改变图片大小
Jun 11 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
谈谈我在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/01 无线电
PHP 基本语法格式
2009/12/15 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
javascript第一课
2007/02/27 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python队列Queue的详解
2019/05/10 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
印度网上药店:1mg
2017/10/13 全球购物
厨师个人自我鉴定范文
2014/04/19 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS