/*StateMachine*/
var StateMachine = (function(){ function StateMachine(opts){
this.current = opts.initial||'none'
this.events = opts.events||[] for(var i=0,length=this.events.length;i<length;i++){
var self = this
var evt = self.events[i] self[evt.name] = function (self,evt){
return function(){ if(typeof self.onchanging === 'function'){
self.onchanging(evt)
console.log('trace->onchanging')
} if(self.is(evt.from)){
self.current = evt.to if(typeof self.onchanged === 'function'){
self.onchanged()
console.log('trace->onchanged')
} console.log(evt.name+'->transition from '+evt.from+' to '+evt.to)
}
}
}(self,evt)
}
} StateMachine.prototype = {
is: function (s){
return this.current===s
},
can: function (e){
var _events = this.events
var _event for(var i=0,length=_events.length;i<length;i++){
_event = _events[i] if(_event.from===this.current&&_event.name===e){
return true
}
} return false
}
} return {
create: function (opts){
var fsm = new StateMachine(opts)
return fsm
}
}
})()

参考

http://www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html
http://www.cnblogs.com/wadeyu/archive/2012/11/23/2784894.html
http://developer.51cto.com/art/201405/440102.htm
http://segmentfault.com/q/1010000000673177
https://github.com/jakesgordon/javascript-state-machine/

[整理]JS中的状态机的更多相关文章

  1. js中控制小数点的显示位数的技术整理

    js中自带方法控制小数点的显示位数(四舍五入) alert((12.9299).toFixed(2)); //12.93 alert((12.9243).toFixed(2)); //12.92 小数 ...

  2. JS中常用的几种时间格式处理-【笔记整理】

    //此处整理点平时常用到的时间格式处理方法 ------------------------------------------- //时间格式化函数 Date.prototype.format = ...

  3. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  4. js中const,var,let区别

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. co ...

  5. JS中URL编码参数(UrlEncode)

    JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...

  6. js中State模式的解析及运用

     状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...

  7. JS中的内存泄漏

    明天下午面试微店的前端开发职位,有点紧张~~ 刚刚正好看到js中的内存泄露,所以来整理一番. 给DOM对象添加的属性是对一个js对象的引用. var MyObject = {}; document.g ...

  8. js中不同的height, top的对比

    每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...

  9. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

随机推荐

  1. Qt QpushButton 实现长按下功能

    做项目需要一个按钮具备长时间按下的功能,才发现Qt原始的按钮是没有这个功能,不过Qt的原生按钮是存在按下和释放信号的,有了这两个信号,再来实现按钮长时间被按下,这就简单了,看下动画演示. 录成GIF效 ...

  2. RabbitMQ基础教程之基本使用篇

    RabbitMQ基础教程之基本使用篇 最近因为工作原因使用到RabbitMQ,之前也接触过其他的mq消息中间件,从实际使用感觉来看,却不太一样,正好趁着周末,可以好好看一下RabbitMQ的相关知识点 ...

  3. 面向 Photoshop 的英特尔® Texture Works 插件

    英特尔对 Photoshop* 进行了扩展,以通过插件充分利用最新的图像压缩方法 (BCn/DXT).该插件旨在为图形工作者提供一款获取卓越压缩结果的工具,并提高 Photoshop* 中的压缩速度. ...

  4. Vue.js 相关知识(动画)

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  5. PAT甲题题解-1077. Kuchiguse (20)-找相同后缀

    #include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...

  6. dubbo底层之Netty

    背景 Java线程:由开始的单线程,到通过new Thread()创建的多线程,再到现如今的线程池,Java多线程编程的效率和性能有了很大的提升 Reactor模型:基于事件驱动,适合处理海量I/O事 ...

  7. ajax异步导致js方法顺序执行不了

    js两个方法调用的顺序,有时候是这样的 f1(); f2(); 本来是先执行f1的,但是如果f1里面进行ajax异步    async:true,那么可能会先执行f2,如果想要顺序执行,那么就把异步设 ...

  8. 美团 OCTO 分布式服务治理系统

    OCTO 是美团千亿调用量的分布式服务通信框架及服务治理的系统,可实现服务注册.服务自动发现.服务管理.容错处理.数据可视化.服务监控报警.服务分组等.本文总结了 OCTO 架构原理.Java 应用的 ...

  9. maven测试时中文乱码问题解决方法

    pom.xml增加-Dfile.encoding=UTF-8配置,如下: <plugin> <!--升级到新版本解决控制台乱码问题--> <groupId>org. ...

  10. 一本通1639Biorhythms

    1639:Biorhythms 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 原题来自:POJ 1006 人生来就有三个生理周期,分别为体力.感情和智力周期 ...