js設計模式：什麼是狀態模式？ js狀態模式介紹

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

什麼是狀態模式？

定義：將事物內部的每個狀態分別封裝成類，內部狀態改變會產生不同行為。

主要解決：物件的行為依賴它的狀態（屬性），並且可以根據它的狀態改變而改變它的相關行為。

何時使用：程式碼中包含大量與物件狀態相關的條件語句。

如何解決：將各種具體的狀態類別抽象化。

js狀態模式應用範例： 1、打籃球的時候運動員可以有正常狀態、不正常狀態、超常狀態。 2.曾侯乙編鐘中，'鐘是抽象介面','鐘A'等是具體狀態，'曾侯乙編鐘'是具體環境（Context）。

js狀態模式優點： 1、封裝了轉換規則。 2.枚舉可能的狀態，在枚舉狀態前需要確定狀態種類。 3.將所有與某個狀態有關的行為放到一個類別中，並且可以方便地增加新的狀態，只需要改變物件狀態即可改變物件的行為。 4.允許狀態轉換邏輯與狀態物件合成一體，而不是某一個巨大的條件語句塊。 5.可以讓多個環境對象共享一個狀態對象，進而減少系統中對象的數量。

js狀態模式缺點： 1、狀態模式的使用必然會增加系統類別和物件的數量。 2.狀態模式的結構與實作都較為複雜，如果使用不當將導致程式結構與程式碼的混亂。 3.狀態模式對"開閉原則"的支援並不太好，對於可以切換狀態的狀態模式，增加新的狀態類別需要修改那些負責狀態轉換的源代碼，否則無法切換到新增狀態，而且修改某個狀態類別的行為也需修改對應類別的原始碼。

js狀態模式使用場景： 1、行為隨狀態改變而改變的場景。 2、條件、分支語句的代替者。

注意事項：在行為受狀態約束的時候使用狀態模式，且狀態不超過 5 個。

場景 demo

某某牌電燈，按一下按鈕開啟低光，按兩下按鈕開啟強光，按三下按鈕關閉燈光。

// 将状态封装成不同类
const weakLight = function(light) {
  this.light = light
}

weakLight.prototype.press = function() {
  console.log('打开强光')
  this.light.setState(this.light.strongLight)
}

const strongLight = function(light) {
  this.light = light
}

strongLight.prototype.press = function() {
  console.log('关灯')
  this.light.setState(this.light.offLight)
}

const offLight = function(light) {
  this.light = light
}

offLight.prototype.press = function() {
  console.log('打开弱光')
  this.light.setState(this.light.weakLight)
}

const Light = function() {
  this.weakLight = new weakLight(this)
  this.strongLight = new strongLight(this)
  this.offLight = new offLight(this)
  this.currentState = this.offLight          // 初始状态
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
    self.currentState.press()
  })
}

Light.prototype.setState = function(state) { // 改变当前状态
  this.currentState = state
}

const light = new Light()
light.init()

// 打开弱光
// 打开强光
// 关灯

非物件導向實作的狀態模式

借助JavaScript 的委託機制，可以像如下實作狀態模式：

const obj = {
  'weakLight': {
    press: function() {
      console.log('打开强光')
      this.currentState = obj.strongLight
    }
  },
  'strongLight': {
    press: function() {
      console.log('关灯')
      this.currentState = obj.offLight
    }
  },
  'offLight': {
    press: function() {
      console.log('打开弱光')
      this.currentState = obj.weakLight
    }
  },
}

const Light = function() {
  this.currentState = obj.offLight
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
    self.currentState.press.call(self) // 通过 call 完成委托
  })
}

const light = new Light()
light.init()

相關推薦：

js設計模式：什麼是裝飾者模式？ js裝飾者模式的介紹

js設計模式：什麼是中介者模式？ js中介者模式的介紹

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