Template Method模版模式怎么實現

這篇文章主要介紹“Template Method模版模式怎么實現”，在日常操作中，相信很多人在Template Method模版模式怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Template Method模版模式怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

舉例子

如果看不懂上面的意圖介紹，沒有關系，設計模式需要在日常工作里用起來，結合例子可以加深你的理解，下面我準備了三個例子，讓你體會什么場景下會用到這種設計模式。

模版文件

我們辦事打印的文件就是模版文件，只需要寫上個人基本信息再簽字就可以了，我們不需要做太多的重復勞動，因為某些場景下大部分內容是可以固化下來的。比如買賣房屋，那大部分甲方乙方的條款是固定的，最大的變化是甲方與乙方的不同，我們在模版上簽字時，就是利用了模版模式減少了大量寫條款的時間。

實例化

實例化也可以認為是模版模式的某種表現形式，因為對于工廠方法，我們傳入不同的初始值可能給出不同結果，那么實際上就是用很少的代碼撬動了很大一塊功能，起到了抽象作用。

Vue 模版

Vue 模版更符合我們對模版直覺的理解。這個場景中，模版指的是 HTML 模版，我們只需要在模版中以 {} 形式描述一些變量，就可以生成一塊只有局部變量變化的模版 DOM，非常方便。

意圖解釋

意圖：定義一個操作中的算法的骨架，而將一些步驟延遲到子類中。TemplateMethod 使得子類可以不改變一個算法的結構即可重定義該算法的某些特定步驟。

這個設計模式初衷是用于面向對象的，所以考慮的是如何在類中運用模版模式。首先定義一個父類，實現了一些算法，再將需要被子類重載的方法提出來，子類重載這些部分方法后，即可利用父類實現好的算法做一些功能。

比如說父類方法 function a() { b() + c() }，此時子類只需要重定義 b 與 c 方法，即可復用 a 的算法（b 與 c 相加）。當然這個例子比較簡單，當算法較為復雜時，模版模式的好處將凸顯出來。

結構圖

ConcreteClass: 具體的父類?？梢钥吹礁割愔袑崿F了 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模版模式怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！