精读《设计模式 - Template Method 模版模式》

Template Method（模版模式）

Template Method（模版模式）属于行为型模式。

意图：定义一个操做中的算法的骨架，而将一些步骤延迟到子类中。TemplateMethod 使得子类能够不改变一个算法的结构便可重定义该算法的某些特定步骤。

举例子

若是看不懂上面的意图介绍，没有关系，设计模式须要在平常工做里用起来，结合例子能够加深你的理解，下面我准备了三个例子，让你体会什么场景下会用到这种设计模式。

模版文件

咱们办事打印的文件就是模版文件，只须要写上我的基本信息再签字就能够了，咱们不须要作太多的重复劳动，由于某些场景下大部份内容是能够固化下来的。好比买卖房屋，那大部分甲方乙方的条款是固定的，最大的变化是甲方与乙方的不一样，咱们在模版上签字时，就是利用了模版模式减小了大量写条款的时间。

实例化

实例化也能够认为是模版模式的某种表现形式，由于对于工厂方法，咱们传入不一样的初始值可能给出不一样结果，那么实际上就是用不多的代码撬动了很大一块功能，起到了抽象做用。

Vue 模版

Vue 模版更符合咱们对模版直觉的理解。这个场景中，模版指的是 HTML 模版，咱们只须要在模版中以 {} 形式描述一些变量，就能够生成一块只有局部变量变化的模版 DOM，很是方便。

意图解释

意图：定义一个操做中的算法的骨架，而将一些步骤延迟到子类中。TemplateMethod 使得子类能够不改变一个算法的结构便可重定义该算法的某些特定步骤。

这个设计模式初衷是用于面向对象的，因此考虑的是如何在类中运用模版模式。首先定义一个父类，实现了一些算法，再将须要被子类重载的方法提出来，子类重载这些部分方法后，便可利用父类实现好的算法作一些功能。

好比说父类方法 function a() { b() + c() }，此时子类只须要重定义 b 与 c 方法，便可复用 a 的算法（b 与 c 相加）。固然这个例子比较简单，当算法较为复杂时，模版模式的好处将凸显出来。

结构图

• ConcreteClass: 具体的父类。能够看到父类中实现了 TemplateMethod，其调用了 primitiveOperation1 与 primitiveOperation2, 因此子类只须要重载这两个方法，便可享用 TemplateMethod 提供的算法。

假设 TemplateMethod 是 OpenDocument 打开文档的做用，那么 primitiveOperation1 多是 CanOpen 校验，primitiveOperation2 多是 ReadDocument 读取文档方法。

咱们只要专心实现具体的细节方法，而不须要关心他们之间是如何相互做用的，父级会帮咱们实现它。以后咱们就能够调用子类的 OpenDocument 实现打开文档了。

代码例子

下面例子使用 typescript 编写。

class View {
  doDisplay(){}

  display() {
    this.setFocus()
    this.doDisplay()
    this.resetFocus()
  }
}

class MyView extends View {
  doDisplay(){
    console.log('myDisplay')
  }
}

const myView = new MyView()
myView.display()

这个例子中，doDisplay 表示父类但愿子类重载的方法，通常以 do 约定打头。

弊端

模版模式用在类中，本质上是固定不可变的结构，进一步缩小重写方法的范围，重写的范围越小，代码可复用度就越高，因此必定要在具备通用算法可提取的状况下使用，而不要为了节省代码行数而过分使用。

另外前端开发中，HTML 自己就很契合模版模式，由于 HTML 中有大量标签描述变幻无穷的 UI 结构，可复用的地方实在太多太多，因此很是适合模版模式，因此不要认为模版模式仅能在类中使用，模版模式还能在脚手架使用呢，好比填入一些表单自动生成代码。

学习这个设计模式时，注意不要固化思惟在其定义的类这个框子中，由于设计模式写于 1994 年，其中提到的模式已经被大量迁移运用，可否识别并作适当的知识迁移，是 20 多年后的今天学习设计模式的关键。

总结

模版模式与策略模式有必定类似处，模版模式是改变算法的一部分，而策略模式是将策略彻底提取出来，因此能够改变算法的所有。

讨论地址是： 精读《设计模式 - Template Method 模版模式》· Issue #305 · dt-fe/weekly

若是你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权声明：自由转载-非商用-非衍生-保持署名（ 创意共享 3.0 许可证）