1. 簡介

狀態(tài)模式(State)允許一個對象在其內(nèi)部狀態(tài)改變的時候改變它的行為，對象看起來似乎修改了它的類。
其實就是用一個對象或者數(shù)組記錄一組狀態(tài)，每個狀態(tài)對應一個實現(xiàn)，實現(xiàn)的時候根據(jù)狀態(tài)挨個去運行實現(xiàn)。

2. 實現(xiàn)

比如超級瑪麗，就可能同時有好幾個狀態(tài)比如 跳躍，移動，射擊，蹲下 等，如果對這些動作一個個進行處理判斷，需要多個if-else或者switch不僅丑陋不說，而且在遇到有組合動作的時候，實現(xiàn)就會變的更為復雜，這里可以使用狀態(tài)模式來實現(xiàn)。

狀態(tài)模式的思路是：首先創(chuàng)建一個狀態(tài)對象或者數(shù)組，內(nèi)部保存狀態(tài)變量，然后內(nèi)部封裝好每種動作對應的狀態(tài)，然后狀態(tài)對象返回一個接口對象，它可以對內(nèi)部的狀態(tài)修改或者調(diào)用。

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

這里可以使用ES6的class優(yōu)化一下：

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

3. 總結

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

一個對象的行為取決于它的狀態(tài)，并且它必須在運行時刻根據(jù)狀態(tài)改變它的行為。

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

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

---

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

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調(diào)模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數(shù)實現(xiàn)函數(shù)緩存(備忘模式)

JS 狀態(tài)模式

JS 橋接模式

JS 觀察者模式

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

參考：
《Javascript 設計模式》 - 張榮銘
設計模式之狀態(tài)模式

總結

以上是生活随笔為你收集整理的JS 状态模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。