1.背景介绍
有限状态机，（英语：Finite-state machine, FSM），又称为有限状态自动机，简称状态机，是一个数学模型。是一个抽象机器，在任何时候都可以处于有限数量的状态之一。响应某些外部输入，FSM可以从一个状态转换到另一个状态;从一种状态到另一种状态的变化称为过渡。状态机的行为可以在现代社会中的许多设备中观察到，这些设备根据它们呈现的事件序列执行预定的一系列行为。例如自动售货机，当存放适当的硬币组合时分配产品，当车辆等待时改变顺序的交通灯等。
有限状态机最初应用在数字系统的涉及，它对数字系统的设计具有十分重要的作用。有限状态机是指输出取决于过去输入部分和当前输入部分的时序逻辑电路。，除了输入部分和输出部分外，有限状态机还含有一组具有“记忆”功能的寄存器，这些寄存器的功能是记忆有限状态机的内部状态，它们常被称为状态寄存器。
在有限状态机中，状态寄存器的的下一个状态不仅与输入信号有关，而且还与该寄存器的当前状态有关，因此有限状态机又可以认为是组合逻辑和寄存器逻辑的一种组合。其中，寄存器逻辑的功能是存储有限状态机的内部状态；而组合逻辑又可以分为次态逻辑和输出逻辑两部分，次态逻辑的功能是确定有限状态机的下一个状态，输出逻辑的功能是确定有限状态机的输出。
在我们前端开发中，我们可以套用有限状态机模型，将业务流程状态化，划分状态和相应的触发事件与动作，利用生 命周期事件进行控制与执行。
一个可以用状态机模拟的简单机制的例子---旋转门。
常见的旋转门是控制通往地铁和游乐园的游乐设施的旋转门。在腰部高度有三个旋转臂，一个在入口处。最初状态，手臂被锁住了，阻止进入，防止顾客通过。将硬币或代币存放在旋转门上的一个槽中，可以打开手臂，让一位顾客穿过。顾客通过后，手臂再次被锁定，直到另一枚硬币被插入。作为一个状态机，旋转门有两种可能的状态：锁定和解锁。有两种可能的输入影响其状态：将硬币放入槽（硬币）并推动手臂（推）。在锁定状态下，推臂不起作用;无论输入推送有多少次，它都处于锁定状态。投入一枚硬币-也就是给机器一个硬币输入-将状态从“锁定”转换为“解锁”。在解锁状态下，放入额外的硬币不起作用;那就是增加硬币输入不会改变状态。但是，一个推着手臂的顾客，将推送这个动作输入，状态就转回到锁定状态。
旋转门状态机也可以用称为状态图（上图）的有向图表示 。每个状态都由一个节点（圆圈）表示。边（箭头）显示从一个状态到另一个状态的转换。每个箭头都标有触发该转换的输入。不会导致状态改变的输入（例如在解锁状态下的硬币输入）由返回到原始状态的圆形箭头表示。从黑点到锁定节点的箭头表示这是初始状态。
2.知识剖析
2.1：有限状态机有什么特点
有限状态机fsm一般有以下特点：
*）可以用状态来描述事物，并且任一时刻，事物总是处于一种状态；
*）事物拥有的状态总数是有限的；
*）通过触发事物的某些行为，可以导致事物从一种状态过渡到另一种状态；
*）同一种行为，可以将事物从多种状态变成同种状态，但是不能从同种状态变成多种状态。
2.2：有限状态机的组成
2.2.1、状态机由一组状态和转换组成例如：
need-to-insert-img
状态:固体 、 液体 、 气体。
转换 ：融化 、汽化 、 冷凝 、 冻结。
2.2.2、有限状态机形式（有限状态机长什么样）
1、需要的函数库：javascript-state-machine插件。
2、生成实例，创建生命周期：
var fsm = new StateMachine({
init: 'solid',
transitions: [
{name: 'Melt', from: 'solid', to: 'liquid'},
{name: 'Vaporize', from: 'liquid', to: 'gas'},
{name: 'Condense', from: 'gas', to: 'liquid'},
{name: 'Freeze', from: 'liquid', to: 'solid'}
],
methods: {
onBeforeMelt: function() { /* ... */ },
onBeforeVaporize: function() { /* ... */ },
onBeforeCondense: function() { /* ... */ },
onBeforeFreeze: function() { /* ... */ },
onLeaveSolid: function() { /* ... */ },
onLeaveLiquid: function() { /* ... */ },
onLeaveGas: function() { /* ... */ },
onEnterLiquid: function() { /* ... */ },
onEnterGas: function() { /* ... */ },
onEnterSolid: function() { /* ... */ },
onAfterMelt: function() { /* ... */ },
onAfterVaporise: function() { /* ... */ },
onAfterCondense: function() { /* ... */ }
onAfterFreeze: function() { /* ... */ }
}
});
//方法调用
//1，自执行方法：
fsm.onMelt();
fsm.onVaporize();
fsm.onCondense();
fsm.onFreeze();
//1、触发调用方式：
fsm.Melt();
fsm.Vaporize();
fsm.Condense();
fsm.Freeze();
HTML代码：
有限状态机包含以下基本内容：
1、初始状态init：init选项用来表示fsm对象的初始状态，
2、转换规则transitions：transitions选项用来描述fsm对象所有状态的变化规则，每一种变化规则对应一种行为。
3、方法methods：methods方法为实例的每一种行为都添加了一个方法，调用这个方法就相当于触发对象的某种行为，当对象行为发生时，对象的状态就可以发生变化。
如以上例子创建的实例将拥有如下行为方法：
fsm.Melt() :调用该方法，实例状态将从'solid'变为'liquid'
fsm.Freeze() :调用该方法，实例状态将从'liquid'变为'solid'
fsm.Vaporize() :调用该方法，实例状态将从'liquid'变为'gas'
fsm.Condense() :调用该方法，实例状态将从'gas'变为'liquid'
2.2.3、有限状态机的方法
Javascript Finite State Machine允许为每个事件指定两个自定义方法，以Melt事件为例:
onbeforeMelt：在warn事件发生之前触发
onafterMelt：在warn事件发生之后触发。
每个状态指定两个自定义方法，以solid状态为例：
onleaveSolid：在离开solid状态时触发
onenterLiquid：在进入liquid状态时触发。
2.2.4、通用的生命周期事件
为了在发生转换时跟踪或执行操作，有以下五个通用的生命周期事件：
// onBeforeTransition -在任何转换之前触发
// onLeaveState -离开任何状态被触发
// onTransition -在任何过渡期间被触发
// onEnterState -进入任何状态被触发
// onAfterTransition -任何转换后触发
2.2.5、特定的转换和状态
除了通用事件之外，还可以使用特定的转换和状态来观察转换：
// onBefore-在特定的转换之前触发
// onBefore-在特定的转换之前触发
// onAfter-在特定的TRANSITION后触发
// onLeave-离开特定的状态触发
// onEnter-进入特定状态触发
// on-简写onAfter
// on-简写onEnter
2.2.6、辅助方法：
// fsm.is(s) -如果状态s是当前状态，则返回true
// fsm.can(t) -如果t从当前状态发生转换，则返回true
// fsm.cannot(t) -如果t从当前状态不能发生转换，则返回true
// fsm.transitions() -返回当前状态允许的转换列表
// fsm.allTransitions() -返回所有可能的转换的列表
// fsm.allStates() -返回所有可能状态的列表
//Cancelling a Transition取消转换
2.2.7、可以通过false在以下任何生命周期事件中显式返回来取消转换
在方法中return false可以取消当前触发的行为：
// onBeforeTransition
// onBefore
// onLeaveState
// onLeave
// onTransition
//所有随后的生命周期事件将被取消，状态将保持不变。
3.常见问题
如何使用有限状态机
4 解决方案
首先创建fsm实例----设置初始初始状态------规定转换规则------定义方法。
var fsm = new StateMachine({ //创建fsm实例
init: 'solid', //设置初始状态
transitions: [ //定义装换规则
{name: 'Melt', from: 'solid', to: 'liquid'},
{name: 'Vaporize', from: 'liquid', to: 'gas'},
{name: 'Condense', from: 'gas', to: 'liquid'},
{name: 'Freeze', from: 'liquid', to: 'solid'}
],
methods: { //定义方法
onBeforeMelt: function() { /* ... */ },
onLeaveSolid: function() { /* ... */ },
onEnterLiquid: function() { /* ... */ },
onAfterMelt: function() { /* ... */ },
}
});
//触发转换
fsm.Melt();
fsm.Vaporize();
fsm.Condense();
fsm.Freeze();
6.扩展思考
Javascript Finite State Machine 的异步转换
有时，我们需要在状态转换期间执行一些异步代码，并确保在代码完成之前不会输入新状态。
举个栗子:
当我们从一个状态转换出来并想逐渐淡入一个UI组件，或者将它从屏幕上滑出来，而且不想在动画完成之后转换到下一个状态。就可以通过 从任何生命周期事件中返回Promise对象来实现此目的。从生命周期事件返回Promise将导致该转换的生命周期暂停。可以继续解决，也可以拒绝承诺。
7.参考文献
一、官方文档https://github.com/jakesgordon/javascript-state-machine/blob/master/docs/states-and-transitions.md
