精讀《設計模式 - 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 許可證）