什么是狀態(tài)模式？

定義：將事物內(nèi)部的每個狀態(tài)分別封裝成類，內(nèi)部狀態(tài)改變會產(chǎn)生不同行為。

主要解決：對象的行為依賴于它的狀態(tài)（屬性），并且可以根據(jù)它的狀態(tài)改變而改變它的相關(guān)行為。

何時使用：代碼中包含大量與對象狀態(tài)有關(guān)的條件語句。

如何解決：將各種具體的狀態(tài)類抽象出來。

應(yīng)用實例：?1、打籃球的時候運動員可以有正常狀態(tài)、不正常狀態(tài)和超常狀態(tài)。 2、曾侯乙編鐘中，'鐘是抽象接口','鐘A'等是具體狀態(tài)，'曾侯乙編鐘'是具體環(huán)境（Context）。

優(yōu)點：?1、封裝了轉(zhuǎn)換規(guī)則。 2、枚舉可能的狀態(tài)，在枚舉狀態(tài)之前需要確定狀態(tài)種類。 3、將所有與某個狀態(tài)有關(guān)的行為放到一個類中，并且可以方便地增加新的狀態(tài)，只需要改變對象狀態(tài)即可改變對象的行為。 4、允許狀態(tài)轉(zhuǎn)換邏輯與狀態(tài)對象合成一體，而不是某一個巨大的條件語句塊。 5、可以讓多個環(huán)境對象共享一個狀態(tài)對象，從而減少系統(tǒng)中對象的個數(shù)。

缺點：?1、狀態(tài)模式的使用必然會增加系統(tǒng)類和對象的個數(shù)。 2、狀態(tài)模式的結(jié)構(gòu)與實現(xiàn)都較為復(fù)雜，如果使用不當(dāng)將導(dǎo)致程序結(jié)構(gòu)和代碼的混亂。 3、狀態(tài)模式對"開閉原則"的支持并不太好，對于可以切換狀態(tài)的狀態(tài)模式，增加新的狀態(tài)類需要修改那些負(fù)責(zé)狀態(tài)轉(zhuǎn)換的源代碼，否則無法切換到新增狀態(tài)，而且修改某個狀態(tài)類的行為也需修改對應(yīng)類的源代碼。

使用場景：?1、行為隨狀態(tài)改變而改變的場景。 2、條件、分支語句的代替者。

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

?

場景 demo

某某牌電燈，按一下按鈕打開弱光，按兩下按鈕打開強光，按三下按鈕關(guān)閉燈光。

// 將狀態(tài)封裝成不同類
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('關(guān)燈')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          // 初始狀態(tài)
}Light.prototype.init = function() {const btn = document.createElement('button')btn.innerHTML = '按鈕'document.body.append(btn)const self = thisbtn.addEventListener('click', function() {self.currentState.press()})
}Light.prototype.setState = function(state) { // 改變當(dāng)前狀態(tài)this.currentState = state
}const light = new Light()
light.init()// 打開弱光
// 打開強光
// 關(guān)燈

?

非面向?qū)ο髮崿F(xiàn)的狀態(tài)模式

借助于 JavaScript 的委托機制，可以像如下實現(xiàn)狀態(tài)模式：

const obj = {'weakLight': {press: function() {console.log('打開強光')this.currentState = obj.strongLight}},'strongLight': {press: function() {console.log('關(guān)燈')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 = thisbtn.addEventListener('click', function() {self.currentState.press.call(self) // 通過 call 完成委托
  })
}const light = new Light()
light.init()

?

轉(zhuǎn)載于:https://www.cnblogs.com/wuguanglin/p/StatePattern.html

總結(jié)

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

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