js状态机设计模式讲解-》demo实例

• 一个对象有状态的变化
• 每次状态都会触发一个逻辑
• 不用if else 控制

实例demo:开关等

var Fsm={
    off:{
      buttonWassPressed:function(){
        console.log('关灯')
        this.button.innerHTML='下一次我是开灯'
        this.currState=Fsm.on  //更改状态
      }，
      on:{
        buttonWassPressed:function(){
            console.log('开灯')
            this.button.innerHTML='下一次我是关灯'
            this.currState=Fsm.off
         }
      }
    }
}
var Light=function(){
    this.currState=Fsm.off;
    this.button=null
 }
Light.prototype.init=function(){
    var button=docuemnt.createElement('button')
    var self=this;
    button.innerHTML='已关灯'
    this.button=document.body.appendChild(button)
    this.button.onclick=function(){
        self.currState.buttonWasPressed.call(self) //将请求委托给Fsm状态机
    }
 }
var light=new Light()
 light.init()

总结

重要的部分在Fsm中，状态机，运行了某个状态之后，就改变currState的状态，当再次触发的时候，currState就是想要触发的事件状态。
代码清楚，修改方便，