前端开发中使用”有限状态机“解决复杂的交互问题

    前端开发是有逻辑的，这点毋庸置疑。程序员的思惟逻辑赋予了代码各类能力，可是前端开发中常常面对的是用户的操做。在一个比较复杂的页面中（貌似如今也不多有简单页面了），用户的操做是不可预见的，假若有不少按钮，每一个按钮都会作一件本身独一无二的事，若是上帝保佑全部的这些操做，这些事件都彼此没有限制，并且结果互不影响，那没有问题。但在开发中好像没有这种好运气，因此常常须要协调和平衡这些函数之间的执行。

    若是你使用的是纯JS或者单独仅有jQuery的状况下，遇到这种让人焦头烂额的情形会尤其明显，前端MVC必定程度上隐藏了并处理了这些问题，可是也并不彻底。这个时候你可能须要了解一下关于”有限状态机“的概念，前端开发中这应该是一个颇有用的东西。

    描述一下”有限状态机“：

有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动做等行为的数学模型。

状态总数（state）是有限的。

任一时刻，只会处于一种状态中。

在某种条件下，会从一种状态转变到另外一种状态中。

    在维基百科中称:有限状态机FSM是设计和实现事件驱动程序内复杂行为组织原则的有力工具。

    对于前端来讲，尤为是Javascript编程时，这个模型的意义就在于能够将其套用在不少对象上。具体个例子，好比一个按钮平时就是正常的按钮，当你点击后变成一个input。固然你可能会说这么简单的功能，我直接用jQuery甚至不用均可以，操做DOM显示和隐藏就行了。若是你还抱有这种天真的想法，我只能说你没遇到过让你痛不欲生的页面。。。当页面复杂到必定程度，单纯操做DOM去处理前端只会加快你疯掉的进程。

    这里对于Button套用有限状态机的模型，至关btn对象只有两个状态，显示状态和编辑状态。看看代码吧：

var btn = {
  // 当前状态
  currentState: 'btn',
　　
  // 绑定事件
  initialize: function() {
    var self = this;
    self.on("click", self.transition);
  },
　　
  // 状态转换
  transition: function(event){
    switch(this.currentState) {
      case "btn":
        this.currentState = 'input';
        doSomething();
        break;
      case "input":
        this.currentState = 'btn';
        doSomething();
        break;
      default:
        console.log('Invalid State!');
        break;
    }
  }　
};

    上面就是有限状态机的写法，逻辑和层次上确实清晰了，对于状态越多的对象，就越适合这种写法。

    经过有限状态机的这种模式,我认为最重要的一点就是将用户的操做行为,也就是组件的事件响应(好比点击)与组件的行为表现分离开来.在确切的说,经过创建一个有限状态机的模型,咱们彻底不关心用户的点击行为具体作了什么,这时组件可能会有几种状态对应不一样的表现形式,而用户触发的事件仅仅是切换了模型的状态.至于每一个状态的具体表现和行为,咱们彻底能够单独定义,也就说这时一种行为和响应上的解耦.

    Github上有两个比较好的库,都是实现FSM的,有兴趣能够具体看看:

    https://github.com/fschaefer/Stately.js

    https://github.com/jakesgordon/javascript-state-machine