前端开发中使用”有限状态机“解决复杂的交互问题

http://my.oschina.net/blogshi/blog/266763
摘要 在维基百科中称:有限状态机FSM是设计和实现事件驱动程序内复杂行为组织原则的有力工具。

    前端开发是有逻辑的，这点毋庸置疑。程序员的思维逻辑赋予了代码各种能力，但是前端开发中经常面对的是用户的操作。在一个比较复杂的页面中（貌似现在也很少有简单页面了），用户的操作是不可预见的，假如有很多按钮，每个按钮都会做一件自己独一无二的事，如果上帝保佑所有的这些操作，这些事件都彼此没有限制，而且结果互不影响，那没有问题。但在开发中好像没有这种好运气，所以经常需要协调和平衡这些函数之间的执行。

    如果你使用的是纯JS或者单独仅有jQuery的情况下，遇到这种让人焦头烂额的情形会尤为明显，前端MVC一定程度上隐藏了并处理了这些问题，但是也并不完全。这个时候你可能需要了解一下关于”有限状态机“的概念，前端开发中这应该是一个很有用的东西。

    描述一下”有限状态机“：

有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

状态总数（state）是有限的。

任一时刻，只会处于一种状态中。

在某种条件下，会从一种状态转变到另一种状态中。

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

    对于前端来说，尤其是Javascript编程时，这个模型的意义就在于可以将其套用在很多对象上。具体个例子，比如一个按钮平时就是正常的按钮，当你点击后变成一个input。当然你可能会说这么简单的功能，我直接用jQuery甚至不用都可以，操作DOM显示和隐藏就好了。如果你还抱有这种天真的想法，我只能说你没遇到过让你痛不欲生的页面。。。当页面复杂到一定程度，单纯操作DOM去处理前端只会加快你疯掉的进程。

    这里对于Button套用有限状态机的模型，相当btn对象只有两个状态，显示状态和编辑状态。看看代码吧：

01	var btn = {

02

// 当前状态

03	currentState: 'btn',

04

05

// 绑定事件

06	initialize: function() {

07	var self = this;

08	self.on("click", self.transition);

09

},

10

11

// 状态转换

12	transition: function(event){

13	switch(this.currentState) {

14	case "btn":

15	this.currentState = 'input';

16	doSomething();

17

break;

18	case "input":

19	this.currentState = 'btn';

20	doSomething();

21

break;

22

default:

23	console.log('Invalid State!');

24

break;

25

}

26

}

27

};

    上面就是有限状态机的写法，逻辑和层次上确实清晰了，对于状态越多的对象，就越适合这种写法。

    通过有限状态机的这种模式,我认为最重要的一点就是将用户的操作行为,也就是组件的事件响应(比如点击)与组件的行为表现分离开来.在确切的说,通过建立一个有限状态机的模型,我们完全不关心用户的点击行为具体做了什么,这时组件可能会有几种状态对应不同的表现形式,而用户触发的事件仅仅是切换了模型的状态.至于每个状态的具体表现和行为,我们完全可以单独定义,也就说这时一种行为和响应上的解耦.

    Github上有两个比较好的库,都是实现FSM的,有兴趣可以具体看看:

    https://github.com/fschaefer/Stately.js

     https://github.com/jakesgordon/javascript-state-machine