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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
javascript回到顶部特效
Jul 30 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
TypeScript中的方法重载详解
Apr 12 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
微信小程序实现多张图片上传功能
Nov 18 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 魔术方法使用说明
2009/10/20 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
DOM 中的事件处理介绍
2012/01/18 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS实现图片切换效果
2018/11/17 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
jQuery表单选择器用法详解
2019/08/22 jQuery
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
python中的闭包用法实例详解
2015/05/05 Python
python实现员工管理系统
2018/01/11 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
老生常谈python中的重载
2018/11/11 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python sublime安装及配置过程详解
2020/06/29 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
文字自荐书范文
2014/02/10 职场文书
给公司的建议书范文
2014/05/13 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
中学生思想品德评语
2014/12/31 职场文书
三峡大坝导游词
2015/01/31 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
婚宴新郎致辞
2015/07/28 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书