什么是有限状态机?

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【什么是有限状态机? 】

大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网js任务3，深度思考中的知识点——什么是有限状态机？？

1.背景介绍

什么是有限状态机？

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

有限状态机一般都有以下特点：

（1）可以用状态来描述事物，并且任一时刻，事物总是处于一种状态；

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

（3）通过触发事物的某些行为，可以导致事物从一种状态过渡到另一种状态；

（4）事物状态变化是有规则的，A状态可以变换到B，B可以变换到C，A却不一定能变换到C；

（5）同一种行为，可以将事物从多种状态变成同种状态，但是不能从同种状态变成多种状态。

2.知识剖析

在js中，新建一个对象，用这个对象的属性来模拟元素的状态,用这个对象的方法模拟元素在不同状态的转变,那么这个对象就是一个有限状态机。

是否可用有限状态机来描述，却决于：

当前状态确定，有限个状态，响应事件，在不同状态间有规律的转变。

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;

}

}

};

可以看到，有限状态机的写法，逻辑清晰，表达力强，有利于封装事件。一个对象的状态越多、发生的事件越多，就越适合采用有限状态机的写法。

另外，JavaScript语言是一种异步操作特别多的语言，常用的解决方法是指定回调函数，但这样会造成代码结构混乱、难以测试和除错等问题。有限状态机提供了更好的办法：把异步操作与对象的状态改变挂钩，当异步操作结束的时候，发生相应的状态改变，由此再触发其他操作。这要比回调函数、事件监听、发布/订阅等解决方案，在逻辑上更合理，更易于降低代码的复杂度。

3.常见问题

有限状态机有哪些应用场景？

4.解决方案

满足3点即可用：所需状态确定，有事件触发转变状态，总状态有限且转变有规律。

页面可用有限状态机的元素较多且有规律时可用：例如：开关按钮，下拉菜单，

Javascript Finite State Machine 函数库

javascript-state-machine插件

//交通信号灯的模型描述：

var fsm = StateMachine.create({

initial: ‘green’,

events: [

{ name: ‘warn’,  from: ‘green’,  to: ‘yellow’ },

{ name: ‘stop’, from: ‘yellow’, to: ‘red’ },

{ name: ‘ready’,  from: ‘red’,    to: ‘yellow’ },

{ name: ‘go’, from: ‘yellow’, to: ‘green’ }

]，

callbacks:{

callback1:function(){…},

callback2:function(){…},

…

},

error: function(){…}

});

initial选项用来表示fsm对象的初始状态，events选项用来描述fsm对象所有状态的变化规则，每一种变化规则对应一种行为。create方法为实例的每一种行为都添加了一个方法，调用这个方法就相当于触发对象的某种行为，当对象行为发生时，对象的状态就可以发生变化。如以上例子创建的实例将拥有如下行为方法： fsm.warn() : 调用该方法，实例状态将从’green’变为’yellow’ fsm.stop() : 调用该方法，实例状态将从’yellow’变为’red’ fsm.ready() : 调用该方法，实例状态将从’red’变为’yellow’ fsm.go() : 调用该方法，实例状态将从’yellow’变为’green’

这些方法是StateMachine根据create时配置的events规则自动创建的，方法名跟events规则里面的name属性对应，events规则里面有几个不重复的name，就会添加几个行为方法。同时为了方便使用，它还添加了如下成员来判断和控制实例的状态和行为： fsm.current – 返回实例当前的状态 fsm.is(state) – 如果传入的state是实例当前状态就返回true fsm.can(eventName) – 如果传入的eventName在实例当前状态能够被触发就返回true fsm.cannot(eventName) – 如果传入的eventName在实例当前状态不能被触发就返回true fsm.transitions() – 以数组的形式返回实例当前状态下能够被触发的行为列表

Javascript Finite State Machine允许为每个事件指定两个回调函数，以warn事件为例: onbeforewarn：在warn事件发生之前触发 onafterwarn（可简写成onwarn） ：在warn事件发生之后触发。 同时，它也允许为每个状态指定两个回调函数，以green状态为例： onleavegreen ：在离开green状态时触发 onentergreen（可简写成ongreen） ：在进入green状态时触发。

假定warn事件使得状态从green变为yellow，上面四类回调函数的发生顺序为： onbeforewarn → onleavegreen → onenteryellow → onafterwarn。 还为所有的事件和状态指定通用的回调函数: onbeforeevent ：任一事件发生之前触发 onleavestate ：离开任一状态时触发 onenterstate ：进入任一状态时触发 onafterevent ：任一事件结束后触发

以{ name: ‘warn’, from: ‘green’, to: ‘yellow’ }为例，这八个回调函数顺序为： onbeforewarn onbeforeevent onleavegreen onleavestate onenteryellow onenterstate onafterwarn onafterevent

5.编码实战

demo1

demo2

6.扩展思考

有限状态机通常在什么地方被用到？

大体上编程都是对现实的抽象，有效状态机也不例外，当逻辑里面有大量判断需要转换状态时，有限状态机就有用处了，本质上其是用查表法来把处理逻辑独立到表中，从而可以用通用的代码去处理任意复杂的状态转换。 具体场景有状态超多的词法分析(要识别各种关键字，运算符等等)，工控软件中，有些机器的控制逻辑也可以用到，扩展开来，任何复杂状态逻辑的处理都可以

7.参考文献

百度百科

博客

《javascript高级程序设计》

博客园

github

视频链接     密码: 85w1

ppt链接

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

【更多内容，欢迎加入交流群与大家一起讨论交流】