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.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP合并静态文件详解
2014/11/14 PHP
php自动加载方式集合
2016/04/04 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Django app配置多个数据库代码实例
2019/12/17 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
工程承包协议书范本
2014/09/29 职场文书
劳资员岗位职责
2015/02/13 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技