javascript设计模式 – 模板方法模式原理与用法实例分析

 更新时间:2020年04月23日 08:31:03   作者:李小强  
这篇文章主要介绍了javascript设计模式 – 模板方法模式原理,结合实例形式分析了javascript模板方法模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript输入框字数实时统计更新

    JavaScript输入框字数实时统计更新

    这篇文章主要介绍了JavaScript输入框字数实时统计更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript实现移动端带transition动画的轮播效果

    JavaScript实现移动端带transition动画的轮播效果

    这篇文章主要介绍了JavaScript原生实现带transition动画的自动+手动轮播效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 网站页面自动跳转实现方法PHP、JSP(上)

    网站页面自动跳转实现方法PHP、JSP(上)

    自动转向,也叫自动重定向。自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页,也可以是其它网站。
    2010-08-08
  • 比较详细的javascript DOM 学习笔记

    比较详细的javascript DOM 学习笔记

    看了很多的js dom学习资料,发现这个比较详细,特转载给大家学习一下
    2008-06-06
  • 从父页面读取和操作iframe中内容方法

    从父页面读取和操作iframe中内容方法

    在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别,无非是需要在父页面中事先获取需要处理的iframe对象,在获取iframe对象后,其操作基本没什么特别之处。
    2009-07-07
  • js+canvas实现网站背景鼠标吸附线条动画

    js+canvas实现网站背景鼠标吸附线条动画

    这篇文章主要为大家详细介绍了js+canvas实现网站背景鼠标吸附线条动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 详解小程序如何改变onLoad的执行时机

    详解小程序如何改变onLoad的执行时机

    这篇文章主要介绍了详解小程序如何改变onLoad的执行时机,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • document.documentElement的一些使用技巧

    document.documentElement的一些使用技巧

    documentElement 属性可返回文档的根节点,接下来为大家详细介绍下document.documentElement的一些使用技巧,感兴趣的朋友可以参考下哈
    2013-04-04
  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    这篇文章主要为大家介绍了JavaScript稀疏数组与孔hole示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JavaScript中两个字符串的匹配

    JavaScript中两个字符串的匹配

    本文分享JavaScript中两个字符串的匹配的一个实例代码,希望能给大家做一个参考。
    2016-06-06

最新评论