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 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
vue实现下拉菜单树
Oct 22 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实现paypal整合方法
2010/11/28 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
升旗仪式主持词
2014/03/19 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2015年外联部工作总结
2015/04/03 职场文书
校长新学期致辞
2015/07/30 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
Python绘制分类图的方法
2021/04/20 Python
Golang二维数组的使用方式
2021/05/28 Golang