什么是有限状态机?

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

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

1.背景介绍

什么是有限状态机?

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


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

(1)可以用状态来描述事物,并且任一时刻,事物总是处于一种状态;

(2)事物拥有的状态总数是有限的;

(3)通过触发事物的某些行为,可以导致事物从一种状态过渡到另一种状态;

(4)事物状态变化是有规则的,A状态可以变换到B,B可以变换到C,A却不一定能变换到C;

(5)同一种行为,可以将事物从多种状态变成同种状态,但是不能从同种状态变成多种状态。

2.知识剖析

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

是否可用有限状态机来描述,却决于:

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

它对JavaScript的意义在于,很多对象可以写成有限状态机。
举例来说,网页上有一个菜单元素。鼠标悬停的时候,菜单显示;鼠标移开的时候,菜单隐藏。如果使用有限状态机描述,就是这个菜单只有两种状态(显示和隐藏),鼠标会引发状态转变。

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链接

感谢大家观看

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

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容