如何使用有限状态机

1.背景介绍

       有限状态机，（英语：Finite-state machine, FSM），又称为有限状态自动机，简称状态机，是一个数学模型。是一个抽象机器，在任什么时候候均可以处于有限数量的状态之一。响应某些外部输入，FSM能够从一个状态转换到另外一个状态;从一种状态到另外一种状态的变化称为过渡。状态机的行为能够在现代社会中的许多设备中观察到，这些设备根据它们呈现的事件序列执行预约的一系列行为。例如自动售货机，当存放适当的硬币组合时分配产品，当车辆等待时改变顺序的交通灯等。

       有限状态机最初应用在数字系统的涉及，它对数字系统的设计具备十分重要的做用。有限状态机是指输出取决于过去输入部分和当前输入部分的时序逻辑电路。，除了输入部分和输出部分外，有限状态机还含有一组具备“记忆”功能的寄存器，这些寄存器的功能是记忆有限状态机的内部状态，它们常被称为状态寄存器。

       在有限状态机中，状态寄存器的的下一个状态不只与输入信号有关，并且还与该寄存器的当前状态有关，所以有限状态机又能够认为是组合逻辑和寄存器逻辑的一种组合。其中，寄存器逻辑的功能是存储有限状态机的内部状态；而组合逻辑又能够分为次态逻辑和输出逻辑两部分，次态逻辑的功能是肯定有限状态机的下一个状态，输出逻辑的功能是肯定有限状态机的输出。

        在咱们前端开发中，咱们能够套用有限状态机模型，将业务流程状态化，划分状态和相应的触发事件与动做，利用生 命周期事件进行控制与执行。

一个能够用状态机模拟的简单机制的例子---旋转门。

          常见的旋转门是控制通往地铁和游乐园的游乐设施的旋转门。在腰部高度有三个旋转臂，一个在入口处。最初状态，手臂被锁住了，阻止进入，防止顾客经过。将硬币或代币存放在旋转门上的一个槽中，能够打开手臂，让一位顾客穿过。顾客经过后，手臂再次被锁定，直到另外一枚硬币被插入。做为一个状态机，旋转门有两种可能的状态：锁定和解锁。有两种可能的输入影响其状态：将硬币放入槽（硬币）并推进手臂（推）。在锁定状态下，推臂不起做用;不管输入推送有多少次，它都处于锁定状态。投入一枚硬币-也就是给机器一个硬币输入-将状态从“锁定”转换为“解锁”。在解锁状态下，放入额外的硬币不起做用;那就是增长硬币输入不会改变状态。可是，一个推着手臂的顾客，将推送这个动做输入，状态就转回到锁定状态。

        旋转门状态机也能够用称为状态图（上图）的有向图表示 。每一个状态都由一个节点（圆圈）表示。边（箭头）显示从一个状态到另外一个状态的转换。每一个箭头都标有触发该转换的输入。不会致使状态改变的输入（例如在解锁状态下的硬币输入）由返回到原始状态的圆形箭头表示。从黑点到锁定节点的箭头表示这是初始状态。

2.知识剖析

2.1：有限状态机有什么特色

有限状态机fsm通常有如下特色：

*）能够用状态来描述事物，而且任一时刻，事物老是处于一种状态；

*）事物拥有的状态总数是有限的；

*）经过触发事物的某些行为，能够致使事物从一种状态过渡到另外一种状态；

*）同一种行为，能够将事物从多种状态变成同种状态，可是不能从同种状态变成多种状态。

2.2：有限状态机的组成

2.2.一、状态机由一组状态和转换组成例如：

need-to-insert-img

状态:固体 、 液体 、 气体。

转换 ：融化 、汽化 、 冷凝 、 冻结。

2.2.二、有限状态机形式（有限状态机长什么样）

一、须要的函数库：javascript-state-machine插件。

二、生成实例，建立生命周期：

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();

//一、触发调用方式：

fsm.Melt();

fsm.Vaporize();

fsm.Condense();

fsm.Freeze();

HTML代码：

有限状态机包含如下基本内容：

一、初始状态init：init选项用来表示fsm对象的初始状态，

二、转换规则transitions：transitions选项用来描述fsm对象全部状态的变化规则，每一种变化规则对应一种行为。

三、方法methods：methods方法为实例的每一种行为都添加了一个方法，调用这个方法就至关于触发对象的某种行为，当对象行为发生时，对象的状态就能够发生变化。

如以上例子建立的实例将拥有以下行为方法：

fsm.Melt() :调用该方法，实例状态将从'solid'变为'liquid'

fsm.Freeze() :调用该方法，实例状态将从'liquid'变为'solid'

fsm.Vaporize() :调用该方法，实例状态将从'liquid'变为'gas'

fsm.Condense() :调用该方法，实例状态将从'gas'变为'liquid'

2.2.三、有限状态机的方法

Javascript Finite State Machine容许为每一个事件指定两个自定义方法，以Melt事件为例:

onbeforeMelt：在warn事件发生以前触发

onafterMelt：在warn事件发生以后触发。

每一个状态指定两个自定义方法，以solid状态为例：

onleaveSolid：在离开solid状态时触发

onenterLiquid：在进入liquid状态时触发。

2.2.四、通用的生命周期事件

为了在发生转换时跟踪或执行操做，有如下五个通用的生命周期事件：

// onBeforeTransition -在任何转换以前触发

// onLeaveState -离开任何状态被触发

// onTransition -在任何过渡期间被触发

// onEnterState -进入任何状态被触发

// onAfterTransition -任何转换后触发

2.2.五、特定的转换和状态

除了通用事件以外，还可使用特定的转换和状态来观察转换：

// onBefore-在特定的转换以前触发

// onBefore-在特定的转换以前触发

// onAfter-在特定的TRANSITION后触发

// onLeave-离开特定的状态触发

// onEnter-进入特定状态触发

// on-简写onAfter

// on-简写onEnter

2.2.六、辅助方法：

// 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.七、能够经过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.参考文献

1、官方文档https://github.com/jakesgordo...