快捷導(dǎo)航

JS設(shè)計模式之狀態(tài)模式的用法使用方法

更新時間：2023年08月27日 10:00:01 作者：慕仲卿

JavaScript狀態(tài)模式是一種行為型設(shè)計模式,核心是對象在其內(nèi)部狀態(tài)改變時改變其行為,狀態(tài)模式將對象的行為封裝到不同的狀態(tài)類中,使得對象在不同狀態(tài)下可以選擇不同的行為,本文給大家詳細(xì)的介紹一下狀態(tài)設(shè)計模式在Js中的使用,需要的朋友可以參考下

狀態(tài)模式（State Pattern）

一種行為型設(shè)計模式，核心是對象在其內(nèi)部狀態(tài)改變時改變其行為。

狀態(tài)模式將對象的行為封裝到不同的狀態(tài)類中，使得對象在不同狀態(tài)下可以選擇不同的行為。

組成

環(huán)境類：環(huán)境類是擁有狀態(tài)的對象，它在運行時將自身的操作委托給當(dāng)前的狀態(tài)對象來處理。①環(huán)境類維護一個對抽象狀態(tài)類的引用，②并通過該引用來調(diào)用具體狀態(tài)類的方法。
抽象狀態(tài)類：抽象狀態(tài)類定義了一個接口③，用于封裝與環(huán)境類的特定狀態(tài)相關(guān)的行為。
具體狀態(tài)類：具體狀態(tài)類實現(xiàn)了抽象狀態(tài)類定義的接口，它具體描述了在某個狀態(tài)下對象的行為④。

工作流程

環(huán)境類通過持有一個抽象狀態(tài)類的引用來表示當(dāng)前的狀態(tài)。
客戶端通過調(diào)用環(huán)境類的方法來觸發(fā)某個操作。
環(huán)境類在運行時將操作委托給當(dāng)前狀態(tài)對象進行處理。
當(dāng)對象的狀態(tài)發(fā)生改變時，環(huán)境類會更新當(dāng)前狀態(tài)對象的引用，從而改變對象的行為。

趣例

下面的這個例子展示了一位西安老鐵觀看國足比賽的時候的心理狀態(tài)變化過程：

abstract class State {
? constructor(public context: Context | null = null) {}
? // 這里體現(xiàn)出③：用于封裝與環(huán)境類的特定狀態(tài)相關(guān)的行為
? handle() {
? ? if (!this.context) {
? ? ? console.log("找不到老鐵了！");
? ? } else {
? ? ? this.exec();
? ? }
? }
? next<T extends State>(NextState: new (context: Context) => T) {
? ? if (!this.context) {
? ? ? console.log("找不到老鐵了！");
? ? } else {
? ? ? this.context.to(new NextState(this.context));
? ? }
? }
? abstract exec(): any;
}
// 具體狀態(tài)類
class StateA extends State {
? // 這里體現(xiàn)出④：用于封裝與環(huán)境類的特定狀態(tài)相關(guān)的行為
? exec() {
? ? console.log("買票");
? ? this.next(StateB);
? }
}
class StateB extends State {
? exec() {
? ? console.log("坐車");
? ? this.next(StateC);
? }
}
class StateC extends State {
? exec() {
? ? console.log("看球");
? ? this.next(StateO);
? }
}
class StateO extends State {
? exec() {
? ? throw new Error('已經(jīng)結(jié)束了');
? }
}
// 環(huán)境類
class Context {
? // 這里體現(xiàn)出①：環(huán)境類維護一個對抽象狀態(tài)類的引用，即cts
? constructor(public cts: State | null = null) {}
? to(state: State) {
? ? console.log(`Transitioning to ${state.constructor.name}`);
? ? this.cts = state;
? }
? do() {
? ? // 這里體現(xiàn)出②：通過該引用來調(diào)用具體狀態(tài)類的方法
? ? this.cts?.handle();
? }
}
// 使用示例
const context = new Context();
const stateA = new StateA(context);
context.to(stateA);
while(1){
? try {
? ? context.do();
? } catch {
? ? console.log('肯定輸了！');
? ? break;
? }
}

對照例子理解

狀態(tài)模式：一種行為型設(shè)計模式，核心是①【對象】在其②【內(nèi)部狀態(tài)】③【改變】時④【改變其行為】。

①對象：指的是環(huán)境類對象，也就是上述代碼中的context對象。
②內(nèi)部狀態(tài)，指的是context引用的狀態(tài)類實例，也就是stateA以及NextState的匿名實例。
③改變：指的是context.to的調(diào)用。
④行為：指的是context.do函數(shù)的執(zhí)行結(jié)果。
改變其行為：指的是context.cts引用不同的狀態(tài)類實例的時候context.do的執(zhí)行結(jié)果不同。

狀態(tài)模式將對象的行為封裝到不同的狀態(tài)類中，使得對象在不同狀態(tài)下可以選擇不同的行為。

這句話理解成：
- 本來應(yīng)該在context.do中通過if else實現(xiàn)的功能，被封裝到了不同的狀態(tài)類中（StateA StateB）;
- 當(dāng)context的狀態(tài)改變的時候（即：context.cts引用不同的狀態(tài)類實例的時候）context.do也能實現(xiàn)封裝前相同的功能（即表現(xiàn)出不同的行為）。

見下面代碼：

不使用狀態(tài)設(shè)計模式實現(xiàn)上述代碼功能：

class Context {
? state = 'A';
? to(state: string) {
? ? console.log(`Transitioning to state ${state}`);
? ? this.state = state;
? }
? do() {
? ? if(this.state === 'A'){
? ? ? console.log("買票");
? ? ? this.to('B');
? ? } else if (this.state === 'B') {
? ? ? console.log("坐車");
? ? ? this.to('C');
? ? } else if (this.state === 'C') {
? ? ? console.log("看球");
? ? ? this.to('D');
? ? } else if (this.state === 'D') {
? ? ? throw new Error('已經(jīng)結(jié)束了');
? ? }
? }
}
const context = new Context();
while(1){
? try {
? ? context.do();
? } catch {
? ? console.log('肯定輸了！');
? ? break;
? }
}

【對比】雖然這樣看起來代碼量好像少了一些，但是如果老鐵想要在下車后去趟衛(wèi)生間，使用了狀態(tài)設(shè)計模式的代碼只需要修改StateB的實現(xiàn)就可以了，而后者則必須修改Context中的do方法！