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

　　如果你使用的是纯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;      }    }　  };  

it知识库：前端开发中使用”有限状态机“解决复杂的交互问题，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。