JS 狀態模式

1. 簡介

狀態模式(State)容許一個對象在其內部狀態改變的時候改變它的行爲，對象看起來彷佛修改了它的類。
其實就是用一個對象或者數組記錄一組狀態，每一個狀態對應一個實現，實現的時候根據狀態挨個去運行實現。

2. 實現

好比超級瑪麗，就可能同時有好幾個狀態好比 跳躍，移動，射擊，蹲下 等，若是對這些動做一個個進行處理判斷，須要多個if-else或者switch不只醜陋不說，並且在遇到有組合動做的時候，實現就會變的更爲複雜，這裏可使用狀態模式來實現。

狀態模式的思路是：首先建立一個狀態對象或者數組，內部保存狀態變量，而後內部封裝好每種動做對應的狀態，而後狀態對象返回一個接口對象，它能夠對內部的狀態修改或者調用。

const SuperMarry = (function() {    
  let _currentState = [],        // 狀態數組
      states = {
        jump() {console.log('跳躍!')},
        move() {console.log('移動!')},
        shoot() {console.log('射擊!')},
        squat() {console.log('蹲下!')}
      }
  
  const Action = {
    changeState(arr) {  // 更改當前動做
      _currentState = arr
      return this
    },
    goes() {
      console.log('觸發動做')
      _currentState.forEach(T => states[T] && states[T]())
      return this
    }
  }
  
  return {
    change: Action.changeState,
    go: Action.goes
  }
})()

SuperMarry
    .change(['jump', 'shoot'])
    .go()                    // 觸發動做  跳躍!  射擊!
    .go()                    // 觸發動做  跳躍!  射擊!
    .change(['squat'])
    .go()                    // 觸發動做  蹲下!

這裏可使用ES6的class優化一下：

class SuperMarry {
  constructor() {
    this._currentState = []
    this.states = {
      jump() {console.log('跳躍!')},
      move() {console.log('移動!')},
      shoot() {console.log('射擊!')},
      squat() {console.log('蹲下!')}
    }
  }
  
  change(arr) {  // 更改當前動做
    this._currentState = arr
    return this
  }
  
  go() {
    console.log('觸發動做')
    this._currentState.forEach(T => this.states[T] && this.states[T]())
    return this
  }
}

new SuperMarry()
    .change(['jump', 'shoot'])
    .go()                    // 觸發動做  跳躍!  射擊!
    .go()                    // 觸發動做  跳躍!  射擊!
    .change(['squat'])
    .go()                    // 觸發動做  蹲下!

3. 總結

狀態模式的使用場景也特別明確，有以下兩點：

1. 一個對象的行爲取決於它的狀態，而且它必須在運行時刻根據狀態改變它的行爲。
2. 一個操做中含有大量的分支語句，並且這些分支語句依賴於該對象的狀態。狀態一般爲一個或多個枚舉常量的表示。

簡而言之，當遇到不少同級if-else或者switch的時候，可使用狀態模式來進行簡化。

---

本文是系列文章，能夠相互參考印證，共同進步~

1. JS 抽象工廠模式
2. JS 工廠模式
3. JS 建造者模式
4. JS 原型模式
5. JS 單例模式
6. JS 回調模式
7. JS 外觀模式
8. JS 適配器模式
9. JS 利用高階函數實現函數緩存(備忘模式)
10. JS 狀態模式
11. JS 橋接模式
12. JS 觀察者模式

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：
《Javascript 設計模式》 - 張榮銘
設計模式之狀態模式

PS：歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～