状态模式案例分析

需求

初始状态下，【暂停按钮】不可点，所有数轴可调:

点击【动态波】后，【暂停按钮】可点，所有数轴可调：

点击【暂停按钮】后，“暂停”变为“播放”，所有数轴不可调：

分析需求

上面的需求很明显可以分为三个状态：初始状态、波动状态、暂停状态。不同的状态下，同一个按钮的表现不一样，比如暂停按钮，在初始状态下不可点，在其它状态下可点。

其实判断是否使用状态模式也是这样考虑：看同一个对象，在整个生命周期中，对同一个事件是否有多种响应。如果有的话，那这个对象就存在多个状态。如果多个对象都有某几个状态（比如都有播放，暂停状态），那就可以考虑使用状态模式了。

使用状态模式的好处是，可以消除分散各处的状态判断的代码。

实现代码

• 不使用状态模式：

class DomEvent{   stop(e){     if(this.state === 'waving'){        //处理波动状态     }else if(this.state === 'stop'){        //处理暂停状态     }else{       //处理初始状态     }   }   /**     * 点击波长数轴     */    clickWave(e){        if(this.state === 'stop'){            return;        }        //...    }}

• 使用状态模式

export default class DomEvent{    //单例    static _inst;    static getInst(){        DomEvent._inst = DomEvent._inst || new DomEvent();        return DomEvent._inst;    }    constructor(){}    init(){        this.stateList = {            "default" : new DefaultState(),            "waving" : new WavingState(),            "stop" : new StopState()        }        this.state = this.stateList["default"];        return this;    }    /**     * 修改状态     */    changeState(stateName){        this.state = this.stateList[stateName];    }    stop(e){        this.state.stop(e);    }    /**     * 点击波长数轴     */    clickWave(e){        this.state.clickWave(e);    }}

具体的状态类可以这样写：

export default class StopState{    constructor(){        this.domEvents = DomEvent.getInst();    }    stop(e){        this.stopBtn.text("播放");        this.domEvents.changeState('waving');    }    /**     * 点击波长数轴     */    clickWave(e){        //...    }}

这样，每个状态下该做什么，一目了然。