基于有限状态机与交互组件设计与实现

最新推荐文章于 2024-07-27 08:02:49 发布

俺足

最新推荐文章于 2024-07-27 08:02:49 发布

阅读量336

点赞数

分类专栏：前端编程方法-数据结构算法文章标签： javascript c/c++ 人工智能 ViewUI

本文链接：https://blog.csdn.net/shi_tianzhu/article/details/84541914

版权

前端同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

编程方法-数据结构算法

9 篇文章 0 订阅

订阅专栏

有限状态机（Finite-state machine）是一个非常有用的模型，可以模拟世界上大部分事物。

简单说，它有三个特征：

　　* 状态总数（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.onleavegreen = 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 Finite State Machine的基本用法就是上面这些，更详细的介绍可以参见它的主页。

有限状态机的实现

有限状态机（Finite State Machine或者Finite State Automata)是软件领域中一种重要的工具，很多东西的模型实际上就是有限状态机。

最近看了一些游戏编程AI的材料，感觉游戏中的AI，第一要说的就是有限状态机来实现精灵的AI，然后才是A*寻路，其他学术界讨论比较多的神经网络、模糊控制等问题还不是很热。

FSM的实现方式：
1） switch/case或者if/else
这无意是最直观的方式，使用一堆条件判断，会编程的人都可以做到，对简单小巧的状态机来说最合适，但是毫无疑问，这样的方式比较原始，对庞大的状态机难以维护。

2）状态表
维护一个二维状态表，横坐标表示当前状态，纵坐标表示输入，表中一个元素存储下一个状态和对应的操作。这一招易于维护，但是运行时间和存储空间的代价较大。

3）使用State Pattern
使用State Pattern使得代码的维护比switch/case方式稍好，性能上也不会有很多的影响，但是也不是100％完美。不过Robert C. Martin做了两个自动产生FSM代码的工具，for java和for C++各一个，在http://www.objectmentor.com/resources/index上有免费下载，这个工具的输入是纯文本的状态机描述，自动产生符合State Pattern的代码，这样developer的工作只需要维护状态机的文本描述，每必要冒引入bug的风险去维护code。

4）使用宏定义描述状态机
一般来说，C++编程中应该避免使用#define，但是这主要是因为如果用宏来定义函数的话，很容易产生这样那样的问题，但是巧妙的使用,还是能够产生奇妙的效果。MFC就是使用宏定义来实现大的架构的。
在实现FSM的时候，可以把一些繁琐无比的if/else还有花括号的组合放在宏中，这样，在代码中可以3）中状态机描述文本一样写，通过编译器的预编译处理产生1）一样的效果，我见过产生C代码的宏，如果要产生C++代码，己软MFC可以，那么理论上也是可行的。

基于有限状态机的交互组件设计与实现

有限状态机（FSM）（维基百科）是设计和实现事件驱动程序内复杂行为组织原则的有力工具。

早在2007年，IBM的工程师就提出在JavaScript中使用有限状态机来实现组件的方法，原文地址如下：《JavaScript 中的有限状态机》

现在结合KISSY等现代JS库和框架提供的强大的自定义事件的功能，我们可以利用有限状态机设计出代码层次清晰，结构优雅的前端交互组件。

今天，我们会通过设计并实现一个下拉选择（模拟select）组件来一步步说明如何利用FSM和KISSY来设计和实现一个有复杂行为的交互组件。

我们的工作会分成三个步骤来进行：

第一步：设计组件状态，用户行为和组件行为
第二步：通过代码来描述设计出来的内容
第三步：实现一个有限状态机让组件工作起来

第一步：设计阶段

首先，我们需要确定组件的状态和状态间的转换关系。通过对组件可能会发生的行为进行研究，我们为组件设计了以下三个状态：

1. 收起状态（fold）

组件的初始状态，用户可能会进行以下操作：

展开下拉框（unfoldmenu）转移到展开状态（unfold）

2. 展开状态（unfold）

用户展开下拉框的状态，用户可能会进行以下操作：

收起下拉框（foldmenu）转移到收起状态（fold）
鼠标经过选项（overitem）转移到高亮状态（highlight）

3. 高亮状态（highlight）

鼠标经过选项时，高亮经过的选项，用户可能会进行以下操作：

收起下拉框（foldmenu）转移到收起状态（fold）
点击选项（clickitem）转移到收起状态（fold）
鼠标经过选项（overitem）转移到高亮状态（highlight）

以上就是这个小组件可能会有的三种状态，用一个状态转换图来表示如下：

在状态描述中包含了触发状态发生转移的动作（事件）
可以很明显的看出这些事件并不是浏览器中原生的事件。
这里，我们使用自定义事件来描述用户的行为，这样我们可以使得用户行为和组件行为的逻辑完全分离，代码将会更容易理解和维护。

定义用户行为：

在这个组件里，我们有以下四种用户行为：

展开下拉框（unfoldmenu）：鼠标点击橙色区域时触发
收起下拉框（foldmenu）：鼠标离开组件区域达到2秒，点击橙色区域，点击组件外部区域
点击选项（clickitem）：点击下拉框中的某个选项
鼠标经过选项（overitem）：鼠标经过下拉框中的某个选项

定义组件行为：

在状态转移的过程中，组件本身会有很多动作，如显示下拉框等，我们接下来在上面的状态图中加入转移过程中组件的动作。

fold()：收起下拉框
unfold()：展开下拉框
highlightItem()：高亮某个选项
selectItem()：选中某个选项，并把值填充到橘黄色区域

第二步：实现阶段（基于KISSY实现）

全局变量：S=KISSY, D=S.DOM, E=S.Event

1. 描述状态

跟设计过程一样，我们需要用一个结构来描述状态的转移以及转移过程中的动作。我们在这里使用对象来描述：

     Javascript代码  
   
"fold":{  
    unfoldmenu:function(event){  
        _this.unfold();  
        return "unfold";  
    }  
}  

如上面这段代码就描述了在fold状态下，可以触发unfoldmenu这个用户行为来转移到unfold状态，我们通过函数返回值的形式来通知FSM下一步的状态。这样，我们就可以通过这种形式描述所有的状态，结构如下：

     Javascript代码  
   
states:{  
    //收起（初始状态）  
    "fold":{  
        unfoldmenu:function(event){  
            _this.unfold();  
            return "unfold";  
        }  
    },  
    //展开状态  
    "unfold":{  
        foldmenu:function(event){  
            _this.fold();  
            return "fold";  
        },  
        overitem:function(event){  
            _this.highlightItem(event.currentItem);  
            return "highlight";  
        }  
    },  
    //高亮状态  
    "highlight":{  
        foldmenu:function(event){  
            _this.fold();  
            return "fold";  
        },  
        //选中条目  
        clickitem:function(event){  
            _this.selectItem(event.currentItem);  
            return "fold";  
        },  
        overitem:function(event){  
            _this.highlightItem(event.currentItem);  
            return "highlight";  
        }  
    }  
}  

在定义好状态后，我们还需要设定一个初始状态：

     Javascript代码  
   
initState:"fold"  

2. 描述用户行为

我们使用一个方法来描述用户行为，即驱动FSM发生状态转移的事件：

     Javascript代码  
   
"foldmenu":function(fn){  
    var timeout;  
    E.on(_this.container,"mouseleave",function(e){  
        if(timeout)clearTimeout(timeout);  
        timeout = setTimeout(function(){  
            fn();  
        },1000);  
    });  
    E.on([_this.container,_this.slideBox],"mouseenter",  
    function(e){  
        if(timeout)clearTimeout(timeout);  
    });  
    E.on("body","click",function(e){  
        var target = e.target;  
        if(!D.get(target,_this.container)){  
            if(timeout)clearTimeout(timeout);  
            fn();  
        }  
    });  
}  

如上面这个代码就定义了foldmenu这个用户行为，同时，FSM会自动将它定义为一个自定义事件，我们通过传入的回调函数fn来通知FSM触发这个事件的时机。

通过上边的例子可以看出，我们可以将一个很复杂的动作定义为一个用户行为，也可以将几个不同的动作定义为一个用户行为，将用户行为和组件的动作彻底分开。

与状态相同，我们也将所有的用户行为放在一个对象中。

     Javascript代码  
   
events:{  
    "unfoldmenu":function(fn){  
    },  
    "foldmenu":function(fn){  
    },  
    "overitem":function(fn){  
    },  
    "clickitem":function(fn){  
    }  
}  

3. 描述组件行为

由于组件行为一般都包含对组件本身的一些直接操作，可以作为API开放给用户使用，因此我们把描述组件行为的方法放在组件的prototype上，这部分代码如下：

     Javascript代码  
   
S.augment(SlideMenu,S.EventTarget,{  
  
    setText:function(){  
        var _this = this,  
        select = _this.select;  
        D.html(select,_this.text);  
    },  
  
    unfold:function(){  
        var _this = this,  
        slideBox = _this.slideBox;  
        if(!_this.isFold)return;  
        _this.isFold = false;  
        D.show(slideBox);  
    },  
  
    fold:function(){  
        var _this = this,  
        options = _this.options,  
        slideBox = _this.slideBox;  
        if(_this.isFold)return;  
        D.removeClass(options,"hover");  
        _this.isFold = true;  
        D.hide(slideBox);  
    },  
  
    highlightItem:function(curItem){  
        var _this = this,  
        options = _this.options;  
        D.removeClass(options,"hover");  
        D.addClass(curItem,"hover");  
    },  
  
    selectItem:function(curItem){  
        var _this = this,  
        value = D.attr(curItem,"data-value"),  
        text = D.attr(curItem,"data-text");  
        _this.value = value;  
        _this.text = text;  
        _this.setText()  
        _this.fold();  
        _this.fire("select",{  
            value:value,  
            text:text  
        });  
    }  
});  

第三步：实现有限状态机（基于KISSY实现）

前面我们定义了组件的状态，用户行为，以及组件本身的动作，接下来我们来实现一个有限状态机（FSM），让整个组件工作起来。

通过上面实现的代码，我们可以看出FSM的输入有以下三个：

初始状态
状态描述对象
用户行为描述对象

代码结构如下：

     Javascript代码  
   
initState:"fold",  
states:{  
    //收起（初始状态）  
    "fold":{  
    },  
    //展开状态  
    "unfold":{  
    },  
    //高亮状态  
    "highlight":{  
    }  
},  
  
events:{  
    "unfoldmenu":function(fn){  
    },  
    "foldmenu":function(fn){  
    },  
    "overitem":function(fn){  
    },  
    "clickitem":function(fn){  
    }  
}  

FSM需要2个功能：

将用户行为与自定义事件相关联（defineEvents）
在用户行为发生时（即触发自定义事件时），根据状态描述对象来转移状态（handleEvents）

代码如下：

     Javascript代码  
   
functionFSM(config){  
    this.config = config;  
    this.currentState = this.config.initState;  
    this.nextState = null;  
    this.states = this.config.states;  
    this.events = this.config.events;  
    this.defineEvents();  
}  
  
var proto = {  
    //事件驱动状态转换(表现层)  
    handleEvents:function(event){  
        if(!this.currentState)return;  
  
    var actionTransitionFunction =  
    this.states[this.currentState][event.type];  
  
        if(!actionTransitionFunction)return;  
          
  
    var nextState = actionTransitionFunction  
    .call(this,event);  
  
        this.currentState = nextState;  
    },  
  
    //定义事件 (行为层)  
    defineEvents:function(){  
        var _this = this,  
        events = this.events;  
        for(k in events){  
            (function(k){  
                var fn = events[k];  
                fn.call(_this,function(event){  
                    _this.fire(k,event);  
                });  
                _this.on(k,_this.handleEvents);  
            })(k)  
        }  
    }  
}  
S.augment(FSM, S.EventTarget, proto);  

然后，只需要实例化一个FSM即可

     Javascript代码  
   
new FSM({  
     initState:"fold",  
     states:{...},  
     events:{...}  
});  

总结

使用FSM模式设计和实现交互组件，可以获得以下特性：

交互逻辑清晰
用户行为和组件行为完全分离，代码具有良好的分层结构
对设计具有良好的纠错特性，当设计上对状态和状态的转移有遗漏时，在实现阶段很容易流程出现走不通的情况，可以促进交互设计对细节的补充。

源码：https://github.com/yhanwen/fsm

俺足

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录