状态模式

工作中，常常使用到状态机，如何才能把一个流程确定的状态机代码编写好，恰恰是状态模式要解决的问题。
假设目前有一个场景，一个按钮有A B C三种状态，状态切换的流程为 A -> B -> C -> A...
按钮在不同的状态下面，按钮执行不同的点击动作，如何去编写者一块代码？
一般的编写思路为


// html <button id="button">click</button>
var state = {A: 1, B: 2, C: 3};
var currentState = state.A; //default
var button = document.getElementById("button");
button.onclick = function() {
  if (currentState === state.A) {
      console.log('operating in state A');
      currentState = state.B;
  } else if (currentState === state.B) {
      console.log('operating in state B');
      currentState = state.C;
  } else if (currentState === state.C) {
      console.log('operating in state C');
      currentState = state.A;
  } else {
      throw new Error("can not find the state");
  }
}

上面的写法有什么问题吗？当然是有的，多个状态全部用if else判断，如果新增状态的话，是不是要修改这个onclick函数，而且如果在不同的状态下，做的逻辑比较复杂的话，是不是onclick函数会显得臃肿许多。
有没有更好的办法呢？

使用状态模式，状态模式要解决的问题是，在当前的状态下面，就直接做这个动作，而不是判断是否处于这个状态下面，去做这个动作，类似于多态，不管你当前是啥，反正我直接调用你这个动作执行的方法就行了，
在状态模式使用的过程中，我们一般使用委托，把当前需要做的动作，直接委托到当前这个状态的对象的动作中来，无需判断当前是处于哪个状态，所以状态对象提供的动作接口必须是一致的

状态模式改进版

// 为了向上提供一致的接口，每个状态执行的动作函数名称必须一致
var FSM = {
    A: {
        //我只是关心A状态下面 会做什么
        handler: function() {
            console.log('operating in state A');
            currentState = FSM.B;
        }
    },
    B: {
        handler: function() {
            console.log('operating in state B');
            currentState = FSM.C;
        }
    },
    C: {
        handler: function() {
            console.log('operating in state C');
            currentState = FSM.A;
        }
    }
}

var currentState = FSM.A; //default
var button = document.getElementById("button");
button.onclick = function() {
    currentState.handler.call(this); 
    //把当前的onclick委托给 现在状态的handler
    //这里我不关心当前这个状态是什么，我只是关心当前这个状态会发生什么，所以去除了if else
}

完整代码:

<!DOCTYPE html>
<html>
  <head></head>
<body>
<button id="button">click</button>
<script type="text/javascript">

// 为了向上提供一致的接口，每个状态执行的动作函数名称必须一致
var FSM = {
    A: {
        //我只是关心A状态下面 会做什么
        handler: function() {
            console.log('operating in state A');
            currentState = FSM.B;
        }
    },
    B: {
        handler: function() {
            console.log('operating in state B');
            currentState = FSM.C;
        }
    },
    C: {
        handler: function() {
            console.log('operating in state C');
            currentState = FSM.A;
        }
    }
}

var currentState = FSM.A; //default
var button = document.getElementById("button");
button.onclick = function() {
    currentState.handler.call(this);  
    //用call的目的是 如果状态里面想要当前对象的话，可以把当前对象 this传递过去
    //把当前的onclick委托给 现在状态的handler
    //这里我不关心当前这个状态是什么，我只是关心当前这个状态会发生什么，所以去除了if else
}
    </script>
  </body>

</html>