大家好，我是IT修真院郑州分院王姣妍，一枚正直、纯洁、善良的web程序员。
今天给大家分享一下，修真院官网 任务中可能会使用到的知识点：
什么是有限状态机？
一、背景介绍
什么是有限状态机？
有限状态机（Finite-state machine）是一个非常有用的模型，可以模拟世界上大部分事物。它是一个数学模型。是一个抽象机器，在任何时候都可以处于有限数量的状态之一。响应某些外部输入，FSM可以从一个状态转换到另一个状态;从一种状态到另一种状态的变化称为过渡。
状态机的行为可以在现代社会中的许多设备中观察到，这些设备根据它们呈现的事件序列执行预定的一系列行为。例如自动售货机，当存放适当的硬币组合时分配产品，当车辆等待时改变顺序的交通灯等。
在我们前端开发中，我们可以套用有限状态机模型，将业务流程状态化，划分状态和相应的触发事件与动作，利用生命周期事件进行控制与执行
二、知识剖析
有限状态机一般都有以下特点：
（1）可以用状态来描述事物，并且任一时刻，事物总是处于一种状态；
（2）事物拥有的状态总数是有限的；
（3）通过触发事物的某些行为，可以导致事物从一种状态过渡到另一种状态；
（4）事物状态变化是有规则的，A状态可以变换到B，B可以变换到C，A却不一定能变换到C；
（5）同一种行为，可以将事物从多种状态变成同种状态，但是不能从同种状态变成多种状态。
状态机由一组状态和转换组成：
状态:固体 、 液体 、 气体。
转换 ：融化 、汽化 、 冷凝 、 冻结。
以上的形式可以状态机来写一下
首先需要引入有限状态机库状态机库
var fsm = new StateMachine({
init: 'solid',
transitions: [
{ name: 'melt', from: 'solid', to: 'liquid' },
{ name: 'freeze', from: 'liquid', to: 'solid' },
{ name: 'vaporize', from: 'liquid', to: 'gas' },
{ name: 'condense', from: 'gas', to: 'liquid' }
],
methods: {
onMelt: function() { console.log('I melted') },
onFreeze: function() { console.log('I froze') },
onVaporize: function() { console.log('I vaporized') },
onCondense: function() { console.log('I condensed') }
}
});
//方法调用
//1，自执行方法：
fsm.onMelt();
fsm.onFreeze();
fsm.onVaporize();
fsm.onCondense();
//1、触发调用方式：
fsm.Melt();
fsm.Freeze();
fsm.Vaporize();
fsm.Condense();
init选项用来表示fsm对象的初始状态，
transitions选项用来描述fsm对象所有状态的变化规则，每一种变化规则对应一种行为。
methods方法为实例的每一种行为都添加了一个方法，调用这个方法就相当于触发对象的某种行为，当对象行为发生时，对象的状态就可以发生变化。如以上例子创建的实例将拥有如下行为方法：
fsm.Melt() :调用该方法，实例状态将从'solid'变为'liquid'
fsm.Freeze() :调用该方法，实例状态将从'liquid'变为'solid'
fsm.Vaporize() :调用该方法，实例状态将从'liquid'变为'gas'
fsm.Condense() :调用该方法，实例状态将从'gas'变为'liquid'
在老的版本中创建一个状态机用StateMachine.create
初始值用initial
变化规则用events
方法用的是callbacks
这里需要注意引入库的版本
Javascript Finite State Machine允许为每个事件指定两个自定义方法，以Melt事件为例:
onbeforeMelt：在Melt事件发生之前触发
onafterMelt：在Melt事件发生之后触发。
每个状态指定两个自定义方法，以solid状态为例：
onleaveSolid：在离开solid状态时触发
onenterLiquid：在进入liquid状态时触发。
为了在发生转换时跟踪或执行操作，有以下五个通用的生命周期事件：
// onBeforeTransition -在任何转换之前触发
// onLeaveState -离开任何状态被触发
// onTransition -在任何过渡期间被触发
// onEnterState -进入任何状态被触发==>onState
// onAfterTransition -任何转换后触发==>onTransition
辅助方法：
// fsm.is(s) -如果状态s是当前状态，则返回true
// fsm.can(t) -如果t从当前状态发生转换，则返回true
// fsm.cannot(t) -如果t从当前状态不能发生转换，则返回true
// fsm.transitions() -返回当前状态允许的转换列表
// fsm.allTransitions() -返回所有可能的转换的列表
// fsm.allStates() -返回所有可能状态的列表
//Cancelling a Transition取消转换
三、常见问题
有限状态机有哪些应用场景？
四、解决方案
满足3点即可用：所需状态确定，有事件触发转变状态，总状态有限且转变有规律。
页面可用有限状态机的元素较多且有规律时可用：例如：开关按钮，下拉菜单，
还有任务中杀人游戏的玩家死活状态、白天黑夜状态等
五、编码实战
六、扩展思考
有限状态机有哪些优点？
有限状态机的写法，逻辑清晰，表达力强，有利于封装事件。一个对象的状态越多、发生的事件越多，就越适合采用有限状态机的写法。
另外，JavaScript语言是一种异步操作特别多的语言，常用的解决方法是指定回调函数，
但这样会造成代码结构混乱、难以测试和除错等问题。有限状态机提供了更好的办法：
把异步操作与对象的状态改变挂钩，当异步操作结束的时候，发生相应的状态改变，由此再触发其他操作。
这要比回调函数、事件监听、发布/订阅等解决方案，在逻辑上更合理，更易于降低代码的复杂度。
七、参考文献
参考一：有限状态机库
参考二：JavaScript与有限状态机
八、更多讨论
1、有限状态机能重多个状态返回到一个状态吗？
答：可以，这里面是官方文档里的一个例子，可以去研究一下实例
2、有限状态机有哪些优点？
答：参考上面的拓展思考，它就是一个解决问题的一个方式，用严谨的逻辑去把每一个状态封装起来，然后用的时候给一个条件触发，或者直接调用那个方法
3、在什么情况下会使用有限状态机？ 几种状态？
答：遇到一些需要大量业务逻辑的页面是最适合用有限状态机了，根据业务需要，设定状态
八、
PPT链接：PPT
视频链接：v.qq.com/x/page/m0522hrmiqt.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论