故事起源于最近朋友实现一个播放/暂停按钮时一些想法的碰撞，所以整理了这篇文章，讲解了如何使用有限状态机让代码更简洁可靠。我们要实现上面的按钮交互，先来看一下原实现：$('#botton').on('click',function(){if($(this).text()==='OFF'){//改变按钮的文字$(this).text('ON');//开始播放$('#player').start();}else{$(this).text('OFF');$('#player').stop();}});这是一种基本的实现方式，也是最简单的实现方式。但是，这样做有几个不优雅的地方：如果点击按钮，需要做的操作增加，会使if/else中的代码越来越臃肿。如果按钮的变化不仅仅是开/关，我们可能需要一堆elseif或使用switch/case来解决上述情况。我建议尝试使用有限状态机解决问题，先看代码：varfsm=(function(){//初始状态varstatus=1;//状态对应的操作varmapping={'1':{text:'ON',action:$('#player').start},'-1':{text:'OFF',action:$('#player').stop},};returnfunction(btn){//Realizestatusfrom*-11/-1togglestatus*=-1;btn.text(mapping[status].text);varfn=mapping[status].action;fn();}})();$('#botton').click(函数(){fsm(this);});阅读上面的代码，我们可以发现，botton的点击事件处理只需要调用fsm函数，内部的变化和操作不需要暴露在.fsm里面，通过映射来定义和限制行为。唯一可以改变的是状态。这样做的好处是可以避免编码过程中的人为错误，因为事件响应部分只能有限地操作状态机的状态，不能直接参与botton的行为和表现。同时，功能的扩展和状态的增减只需要在映射中定义，非常方便扩展和维护。
