javascript与有限状态机详解


Posted in Javascript onMay 08, 2014

简单说,它有三个特征:

* 状态总数(state)是有限的。
* 任一时刻,只处在一种状态之中。
* 某种条件下,会从一种状态转变(transition)到另一种状态。

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

下面介绍一个有限状态机的函数库Javascript Finite State Machine。这个库非常好懂,可以帮助我们加深理解,而且功能一点都不弱。

该库提供一个全局对象StateMachine,使用该对象的create方法,可以生成有限状态机的实例。

var fsm = StateMachine.create();

生成的时候,需要提供一个参数对象,用来描述实例的性质。比如,交通信号灯(红绿灯)可以这样描述:

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' }
]
});

交通信号灯的初始状态(initial)为green,events属性是触发状态改变的各种事件,比如warn事件使得green状态变成yellow状态,stop事件使得yellow状态变成red状态等等。

生成实例以后,就可以随时查询当前状态。

* fsm.current :返回当前状态。
* fsm.is(s) :返回一个布尔值,表示状态s是否为当前状态。
* fsm.can(e) :返回一个布尔值,表示事件e是否能在当前状态触发。
* fsm.cannot(e) :返回一个布尔值,表示事件e是否不能在当前状态触发。

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 :任一事件结束后触发。

如果事件的回调函数里面有异步操作(比如与服务器进行Ajax通信),这时我们可能希望等到异步操作结束,再发生状态改变。这就要用到transition方法。

fsm.onwarn = function(){
light.fadeOut('slow', function() {
fsm.transition();
});
return StateMachine.ASYNC;
};

上面代码的回调函数里面,有一个异步操作(light.fadeOut)。如果不希望状态立即改变,就要让回调函数返回一个StateMachine.ASYNC对象,表示状态暂时不改变;等到异步操作结束,再调用transition方法,使得状态发生改变。

Javascript Finite State Machine还允许指定错误处理函数,当发生了当前状态不可能发生的事件时自动触发。

var fsm = StateMachine.create({
// ...
error: function(eventName, from, to, args, errorCode, errorMessage) {
return 'event ' + eventName + ': ' + errorMessage;
},
// ... 
});

比如,当前状态是green,理论上这时只可能发生warn事件。要是这时发生了stop事件,就会触发上面的错误处理函数。

Javascript 相关文章推荐
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
小程序实现留言板
Nov 02 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 #Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 #Javascript
js动态删除div元素基本思路及实现代码
May 08 #Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 #Javascript
jquery查找tr td 示例模拟
May 08 #Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 #Javascript
JavaScript二维数组实现的省市联动菜单
May 08 #Javascript
You might like
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python函数嵌套实例
2014/09/23 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
小学生家长评语集锦
2014/01/30 职场文书
家长写给孩子的评语
2014/04/18 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
优秀教师推荐材料
2014/12/16 职场文书
国庆庆典邀请函
2015/02/02 职场文书
催款函范本大全
2015/06/24 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
优质护理心得体会
2016/01/22 职场文书
总结几个非常实用的Python库
2021/06/26 Python
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS