JS设计模式(8)模板方法模式
什么是模板方法模式?
定义:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。
主要解决:一些方法通用,却在每一个子类都重新写了这一方法。
何时使用:有一些通用的方法。
如何解决:将这些通用算法抽象出来。
应用实例: 1、在造房子的时候,地基、走线、水管都一样,只有在建筑的后期才有加壁橱加栅栏等差异。 2、西游记里面菩萨定好的 81 难,这就是一个顶层的逻辑骨架。
优点: 1、封装不变部分,扩展可变部分。 2、提取公共代码,便于维护。 3、行为由父类控制,子类实现。
缺点:每一个不同的实现都需要一个子类来实现,导致类的个数增加,使得系统更加庞大。
使用场景: 1、有多个子类共有的方法,且逻辑相同。 2、重要的、复杂的方法,可以考虑作为模板方法。
泡茶和泡咖啡
来对比下泡茶和泡咖啡过程中的异同
步骤 | 泡茶 | 泡咖啡 |
---|---|---|
1 | 烧开水 | 烧开水 |
2 | 浸泡茶叶 | 冲泡咖啡 |
3 | 倒入杯子 | 倒入杯子 |
4 | 加柠檬 | 加糖 |
可以清晰地看出仅仅在步骤 2 和 4 上有细微的差别,下面着手实现:
const Drinks = function() {} Drinks.prototype.firstStep = function() {
console.log('烧开水')
} Drinks.prototype.secondStep = function() {} Drinks.prototype.thirdStep = function() {
console.log('倒入杯子')
} Drinks.prototype.fourthStep = function() {} Drinks.prototype.init = function() { // 模板方法模式核心:在父类上定义好执行算法
this.firstStep()
this.secondStep()
this.thirdStep()
this.fourthStep()
} const Tea = function() {} Tea.prototype = new Drinks Tea.prototype.secondStep = function() {
console.log('浸泡茶叶')
} Tea.prototype.fourthStep = function() {
console.log('加柠檬')
} const Coffee = function() {} Coffee.prototype = new Drinks Coffee.prototype.secondStep = function() {
console.log('冲泡咖啡')
} Coffee.prototype.fourthStep = function() {
console.log('加糖')
} const tea = new Tea()
tea.init() // 烧开水
// 浸泡茶叶
// 倒入杯子
// 加柠檬 const coffee = new Coffee()
coffee.init() // 烧开水
// 冲泡咖啡
// 倒入杯子
// 加糖
钩子
假如客人不想加佐料(糖、柠檬)怎么办,这时可以引人钩子来实现之,实现逻辑如下:
// ... Drinks.prototype.ifNeedFlavour = function() { // 加上钩子
return true
} Drinks.prototype.init = function() { // 模板方法模式核心:在父类上定义好执行算法
this.firstStep()
this.secondStep()
this.thirdStep()
if (this.ifNeedFlavour()) { // 默认是 true,也就是要加调料
this.fourthStep()
}
} // ...
const Coffee = function() {} Coffee.prototype = new Drinks()
// ... Coffee.prototype.ifNeedFlavour = function() {
return window.confirm('是否需要佐料吗?') // 弹框选择是否佐料
}
JS设计模式(8)模板方法模式的更多相关文章
- js设计模式——6.模板方法模式与职责链模式
js设计模式——6.模板方法模式与职责链模式 职责链模式
- JS 设计模式七 -- 模板方法模式
概念 模板方法模式是一直昂只需使用继承就可以实现的非常简单的模式. 模板方法模式由两部分结构组成,第一部分是抽象父类,第二部分是具体实现的子类. 实现 模板方法模式一般的实现方式为继承. // 体育运 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- 乐在其中设计模式(C#) - 模板方法模式(Template Method Pattern)
原文:乐在其中设计模式(C#) - 模板方法模式(Template Method Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 模板方法模式(Template Method ...
- 折腾Java设计模式之模板方法模式
博客原文地址:折腾Java设计模式之模板方法模式 模板方法模式 Define the skeleton of an algorithm in an operation, deferring some ...
- js设计模式——7.备忘录模式
js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = conte ...
- js设计模式——5.状态模式
js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...
- js设计模式——4.迭代器模式
js设计模式——4.迭代器模式 代码演示 /*js设计模式——迭代器模式*/ class Iterator { constructor(container) { this.list = contain ...
- js设计模式——2.外观模式
js设计模式——2.外观模式
- js设计模式——1.代理模式
js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...
随机推荐
- js---设置cookie的方法
在客户端进行一些操作的时候,很多时候会要用到设置cookie的方法.具体的做法: <script type="text/javascript"> var documen ...
- tomcat架构分析和源码解读
最近在看<深入分析java web技术内幕>,书中讲解了一部分tomcat的相关知识,我也去查看了一些源码,看了大神们写的代码,我才知道自己就像在做加减乘除一样,这是不行的.还有好多包和类 ...
- 七牛免费SSL证书申请全流程
购买证书 在七牛ssl 首页点击购买 购买限免证书 补全订单信息 免费证书,随意填写,问题不大 购买成功,查看订单详情,获取 TXT 值信息 添加 DNS TXT 验证 根据上一步,查看证书订单详情, ...
- 有关自动化构建gulp的搭建
1,cnpm instal bower -g 2, cnpm install bower 3, bower init 生成bower.json文件 4, type null >.bowerr ...
- switch(值){ 开始case 值: 闭合break; }
switch ($goods['leixing']) { case 1: $data['type'] = 1; $data['orderid'] = 'PT' . rand(000000, 99999 ...
- django form 组件插件
创建类: class RegForms(forms.Form): account = fields.CharField( required = True, #必填字段 max_length=12, m ...
- Java 递归获取一个路径下的所有文件,文件夹名称
package com.readfile; import java.io.File; public class GetAllFiles { public static void main(String ...
- SpringMVC+MyBatis+Druid使用MySQL8.0.11版本
1.使用MySQL8.0.11版本,要使用5.1.45或其他高版本驱动jar包,我本地使用的是最新的8.0.11 2.更换了MySQL驱动后,报Cannot find class [com.aliba ...
- 设计模式之——bridge模式
Bridge模式,又叫桥接模式,是针对同一接口进行扩展与实现操作的一种设计模式. 这种模式,与之前学过的适配器模式具有相似的地方,也有不同的地方,下面就让我们一一解析吧. 首先,我们要了解到,为什么需 ...
- css3之动画属性transform、transition、animation
工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...