共计 1870 个字符，预计需要花费 5 分钟才能阅读完成。
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 许可证）
