1.背景介绍

有限状态机是什么？

有限状态机，（英语：Finite-state machine, FSM），又称有限状态自动机，简称状态机， 是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

其作用主要是描述对象在它的生命周期内所经历的状态序列，以及如何响应来自外界的各种事件。在计算机科学中， 有限状态机被广泛用于建模应用行为、硬件电路系统设计、软件工程，编译器、网络协议、和计算与语言的研究。

TCP协议状态机

2.知识剖析

我们来看一下阮一峰对有限状态机的描述

它有三个特征：

• 状态总数（state）是有限的。
• 任一时刻，只处在一种状态之中。
• 某种条件下，会从一种状态转变（transition）到另一种状态。

它对JavaScript的意义在于，很多对象可以写成有限状态机。 举例来说，网页上有一个菜单元素。鼠标悬停的时候，菜单显示；鼠标移开的时候，菜单隐藏。 如果使用有限状态机描述，就是这个菜单只有两种状态（显示和隐藏），鼠标会引发状态转变。

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

但实际上我们只是需要转换一个状态而已，鼠标移上去显示菜单，否则隐藏， 上面的代码就比较低效和笨拙，把简单问题复杂化了。

所以，问题规模小的时候，if-else 就可以工作的很好了，但当问题规模一大， 无论是大量的 if-else还是问题解决方案的本身将会复杂庞大难以维护，这时候引入状态机的概念就非常行之有效了。

并且当我们把状态机的实现交给javascript-state-machine这种库上时，我们其实只用关心解决方案的本身，而不用自己去实现状态机。 当我们只用关心解决方案本身的时候，解决问题的难度毫无疑问是变简单了的。

关于javascript-state-machine

4.解决方案

引入JS文件state-machine

7.参考文献

参考一:javascript-state-machine

参考二:阮一峰的网络日志