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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 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中让人头疼的浮点数运算分析
2016/10/10 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python线程池如何使用
2020/05/28 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
C语言编程练习
2012/04/02 面试题
毕业生找工作推荐信
2013/11/21 职场文书
个人求职信范文分享
2014/01/31 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
干部选拔任用方案
2014/05/26 职场文书
运动会入场口号
2014/06/07 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2015年材料员工作总结
2015/04/30 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
nginx配置指令之server_name的具体使用
2022/08/14 Servers