js設計模式：什麼是模板方法模式？ js模板方法模式的介紹

本篇文章帶給大家的內容是關於js設計模式：什麼是模板方法模式？ js模板方法模式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是模板方法模式？

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

主要解決：有些方法通用，卻在每一個子類別都重新寫了這個方法。

何時使用：有一些通用的方法。

如何解決：將這些通用演算法抽象化。

js模板方法模式應用實例： 1、在建造房子的時候，地基、走線、水管都一樣，只有在建築的後期才有加壁櫥加柵欄等差異。 2.西遊記裡面菩薩定好的 81 難，這就是一個頂層的邏輯骨架。

js範本方法模式優點： 1、封裝不變部分，擴充可變部分。 2、提取公共代碼，方便維護。 3.行為由父類控制，子類實作。

js模板方法模式缺點：每一個不同的實作都需要子類別來實現，導致類別的數量增加，使得系統更加龐大。

js範本方法模式使用場景： 1、有多個子類別共有的方法，且邏輯相同。 2、重要的、複雜的方法，可以考慮作為模板方法。

泡茶與泡咖啡

來比較下泡茶與泡咖啡過程中的異同

##步驟泡茶泡咖啡1煮水煮水2浸泡茶葉沖泡咖啡34

##倒入杯	倒入杯
加上檸檬

# 

 

 

 

可以清楚看出僅在步驟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設計模式： ​​什麼是組合模式？ js組合模式的介紹############js設計模式：什麼是觀察者模式（發布訂閱模式）？ js觀察者模式的介紹######

以上是js設計模式：什麼是模板方法模式？ js模板方法模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！