1.背景介绍
有限状态机，（英语：Finite-state machine, FSM），又称为有限状态自动机，简称状态机，
是一个数学模型，表示有限个状态以及在这些状态之间的转换和动作等行为。
1、状态存储关于过去的信息，它反映从系统开始到现在时刻的输入变化。
2、转移指示状态变更，并且用必须满足来确使转移发生的条件来描述它。
3、动作是在给定时刻要进行的活动的描述。
2.知识剖析
2.1：有限状态机有什么特点
有限状态机fsm一般有以下特点：
*）可以用状态来描述事物，并且任一时刻，事物总是处于一种状态；
*）事物拥有的状态总数是有限的；
*）通过触发事物的某些行为，可以导致事物从一种状态过渡到另一种状态；
*）同一种行为，可以将事物从多种状态变成同种状态，但是不能从同种状态变成多种状态。
2.2：有限状态机的组成
2.2.1、状态机由一组状态和转换组成例如：
need-to-insert-img
状态:固体 、 液体 、 气体。
转换 ：融化 、汽化 、 冷凝 、 冻结。
2.2.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();
有限状态机包含以下基本内容：
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
网友评论