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

　　HTML、CSS、Javascript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

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

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

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

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

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

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

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

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

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

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

　　varbtn={

　　//当前状态

　　currentState:'btn',

　　//绑定事件

　　initialize:function(){

　　varself=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('InvalidState!');

　　break;

　　}

　　}

　　};

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

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

　　前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。