javascript实现有限状态机

1、状态机描述

简单说，有限状态机是一种模型，模型都用来模拟事物，能够被有限状态机这种模型模拟的事物，一般都有以下特点：

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

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

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

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

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

2、思考实现

参照已有的实现功能 https://github.com/jakesgordon/javascript-state-machine/

实现思路

1、单个页面会有多个UI，每个UI可拥有独立的一个状态机，因此用工厂模式的思路实现

2、状态切换间应该有多个时机传回调函数：onbefore->onleave->on[Event]->on[state]->onenter[State]->onafter[event]

3、留个外部调用的一些方法接口is(判断当前状态是不是此state);can(判断状态十分能转换)；cannot;transitions(能转换的状态)；

代码如下

 var sm = (function () {
     function _StateMachine(config) {
         this.state = config.initial||'unknow';
         this.events = config.events;
         this.callbacks = config.callbacks||{};
         this.error = config.error || function(name, from, to, args, error, msg, e) { throw e || msg; };
         this._hashEvent = {}
         this.init();
     }
     var __PREFIX = ['onbefore','onleave','onenter','onafter'];
     _StateMachine.prototype.SYNC = 'sync';
     _StateMachine.prototype.init = function () {
         this._initHashEvent();
         this._buildEvent();
     }
     _StateMachine.prototype._initHashEvent = function () {
         for (var i = this.events.length - 1; i >= 0; i--) {
             var e = this.events[i];
             if (!this._hashEvent[e.name]) {
                 this._hashEvent[e.name] = []
             }
             this._hashEvent[e.name].push({
                 from:e.from,
                 to:e.to,
                 name:e.name
             })
         }
     }
     _StateMachine.prototype._buildEvent = function () {
         var self = this;
         for(var i in this._hashEvent){
             this[i] = (function (i) {
                 return function (arg) {
                     var event = this._getEvent(this._hashEvent[i]);
                     if (JSON.stringify(event) == '{}') {
                         return false;
                     }
                     this.cacheEvent = event; //用于异步调用
                     var fn = event.name;

                     this.callbacks['onbefore'+fn]&&this.callbacks['onbefore'+fn](this,event.name,this.state,event.state,arg);

                     if(this.callbacks['onbefore'+fn]){
                         var beforeValue = this.callbacks['onbefore'+fn](this,event.name,this.state,event.state,arg);
                     }
                     if(beforeValue == false){
                         return false;
                     }
                     if(this.callbacks['onleave'+this.state]){
                         var leaveValue = this.callbacks['onleave'+this.state](this,event.name,this.state,event.state,arg);
                     }
                     if(leaveValue == false){
                         console.log('not transform')
                         return false;
                     }

                     if(leaveValue == this.SYNC){
                         return false;
                     }

                     this._transition(arg);
                 }

             })(i);
         }
     }
     _StateMachine.prototype._getEvent = function(hash){
         var event={};
         for (var i = hash.length - 1; i >= 0; i--) {
             var formType = Object.prototype.toString.call(hash[i].from);
             if(formType == '[object Array]'){
                 if(hash[i].from.indexOf(this.state)>=0){
                     event = hash[i];
                     break;
                 }
             }else{
                 if(hash[i].from == this.state){
                     event = hash[i];
                     break;
                 }
             }
         }
         return event;
     }
     _StateMachine.prototype._transition = function (args) {
         var event = this.cacheEvent;
         var fn = event.name;
         this.prevState = this.state;
         this.state = event.to;
         this.callbacks['on'+event.name]&&this.callbacks['on'+event.name](this,this.prevState,this.state,args);
         this.callbacks['on'+this.state]&&this.callbacks['on'+this.state](this,this.prevState,this.state,args);
         this.callbacks['onenter'+this.state]&&this.callbacks['onenter'+this.state](this,event.name,this.prevState,event.state,args);
         this.callbacks['onafter'+fn]&&this.callbacks['onafter'+fn](this,event.name,this.prevState,event.state,args);
         console.log('sm state transform '+ this.prevState+ ' to '+ this.state);

     }
     _StateMachine.prototype.is = function (state) {
         return this.state == state;
     }
     _StateMachine.prototype.can = function (eventName) {
         var event =  this._getEvent(this._hashEvent[eventName]);
         return JSON.stringify(event) != '{}';
     }
     _StateMachine.prototype.cannot = function (eventName) {
         var event =  this._getEvent(this._hashEvent[eventName]);
         return JSON.stringify(event) == '{}';
     }
     //以数组的形式返回实例当前状态下能够被触发的行为列表
     _StateMachine.prototype.transitions = function () {
         var events = [];
         for (var e in this._hashEvent) {
             if(this.can(e)){
                 events.push(e);
             }
         }
         return events;
     }
     return {
         create:function (config) {
             return new _StateMachine(config)
         }
     }
 })();

调用

 var fsm2 = sm.create({
   initial: 'hungry',
   events: [
     { name: 'eat',  from: 'hungry', to: 'satisfied' },
     { name: 'eat',  from: 'satisfied',to: 'full'      },
     { name: 'eat',  from: 'full',to: 'sick'      },
     { name: 'rest', from: ['hungry', 'satisfied', 'full', 'sick'], to: 'hungry'    },
 ]
 });

 var fsm = sm.create({
   initial: 'green',
   events: [
     { name: 'warn',  from: 'green',  to: 'yellow' },
     { name: 'panic', from: 'yellow', to: 'red'    },
     { name: 'calm',  from: 'red',    to: 'yellow' },
     { name: 'clear', from: 'yellow', to: 'green'  }
   ],
   callbacks: {
     onpanic:  function(event, from, to, msg) { alert('panic! ' + msg);               },
     onwarn:  function(event, from, to, msg) { alert('warn! ' + msg);               },
     onclear:  function(event, from, to, msg) { alert('thanks to ' + msg);            },
     ongreen:  function(event, from, to)      { document.body.className = 'green';    },
     onyellow: function(event, from, to)      { document.body.className = 'yellow';   },
     onred:    function(event, from, to)      { document.body.className = 'red';      },
   }
 });