JS 狀態模式

xingqiba 發布于2019-08-22 11:22 / 2846人閱讀

摘要：簡介狀態模式允許一個對象在其內部狀態改變的時候改變它的行為，對象看起來似乎修改了它的類。狀態通常為一個或多個枚舉常量的表示。簡而言之，當遇到很多同級或者的時候，可以使用狀態模式來進行簡化。

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. 總結

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

一個對象的行為取決于它的狀態，并且它必須在運行時刻根據狀態改變它的行為。

一個操作中含有大量的分支語句，而且這些分支語句依賴于該對象的狀態。狀態通常為一個或多個枚舉常量的表示。

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

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

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數實現函數緩存(備忘模式)

JS 狀態模式

JS 橋接模式

JS 觀察者模式

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

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

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

云服務器 GPU云服務器狀態模式 java狀態模式代碼 js 獲取視頻狀態 js定時查詢數據狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92265.html

聽飛狐聊JavaScript設計模式系列13

摘要：介一回聊狀態模式，官方描述允許一個對象在其內部狀態改變時改變它的行為。有限狀態機有限狀態機是一個非常有用的模型，可以模擬世界上大部分事物。這個是官方說法，簡單說，她有三個特征，狀態總數是有限的。，任一時刻，只處在一種狀態之中。本回內容介紹上一回聊了聊組合模式（Composite），用組合模式模擬了個圖片庫，聊了遞歸。介一回聊狀態模式（State），官方描述允許一個對象在其內部狀態改...

linkin 2019-08-19 17:17 評論0 收藏0
js策略模式vs狀態模式

摘要：一策略模式定義把一些小的算法封裝起來使他們之間可以相互替換把代碼的實現和使用分離開來利用策略模式實現小方塊緩動代碼代碼動畫已消耗時間原始位置目標位置持續時間小球運動的時間要改變的屬性例如緩動算法記錄開始位置并設置定時器是否有要執行的一.策略模式 1.定義:把一些小的算法,封裝起來,使他們之間可以相互替換(把代碼的實現和使用分離開來)2.利用策略模式實現小方塊緩動 html代碼: ...

aaron 2019-08-26 11:54 評論0 收藏0
js策略模式vs狀態模式

摘要：一策略模式定義把一些小的算法封裝起來使他們之間可以相互替換把代碼的實現和使用分離開來利用策略模式實現小方塊緩動代碼代碼動畫已消耗時間原始位置目標位置持續時間小球運動的時間要改變的屬性例如緩動算法記錄開始位置并設置定時器是否有要執行的一.策略模式 1.定義:把一些小的算法,封裝起來,使他們之間可以相互替換(把代碼的實現和使用分離開來)2.利用策略模式實現小方塊緩動 html代碼: ...

mingde 2019-08-02 10:33 評論0 收藏0
設計模式---狀態模式在web前端中的應用

摘要：以上就是狀態模式在實際開發中得應用，我們結合了綜合應用狀態模式。在vue.js之類的mvvm的框架大行其道的當下，開發中最常見的場景就是通過改變數據來展示頁面或模塊的不同狀態，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數據來修改頁面或者模塊的狀態呢。嗯。說到狀態，就想到了狀態模式狀態模式: 在很多情況下，一個對...

劉東 2019-08-21 10:56 評論0 收藏0
設計模式---狀態模式在web前端中的應用

摘要：以上就是狀態模式在實際開發中得應用，我們結合了綜合應用狀態模式。在vue.js之類的mvvm的框架大行其道的當下，開發中最常見的場景就是通過改變數據來展示頁面或模塊的不同狀態，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數據來修改頁面或者模塊的狀態呢。嗯。說到狀態，就想到了狀態模式狀態模式: 在很多情況下，一個對...

silvertheo 2019-08-01 15:29 評論0 收藏0