前端开发中使用”有限状态机“解决复杂的交互问题
- - 博客园_知识库 前端开发是有逻辑的，这点毋庸置疑. 程序员的思维逻辑赋予了代码各种能力，但是前端开发中经常面对的是用户的操作. 在一个比较复杂的页面中（貌似现在也很少有简单页面了），用户的操作是不可预见的，假如有很多按钮，每个按钮都会做一件自己独一无二的事，如果上帝保佑所有的这些操作，这些事件都彼此没有限制，而且结果互不影响，那没有问题.
前端开发中使用”有限状态机“解决复杂的交互问题
标签：
前端
开发
中使
| 发表时间：2014-06-16 08:18 | 作者：
出处：http://kb.cnblogs.com/
前端开发是有逻辑的，这点毋庸置疑。程序员的思维逻辑赋予了代码各种能力，但是前端开发中经常面对的是用户的操作。在一个比较复杂的页面中（貌似现在也很少有简单页面了），用户的操作是不可预见的，假如有很多按钮，每个按钮都会做一件自己独一无二的事，如果上帝保佑所有的这些操作，这些事件都彼此没有限制，而且结果互不影响，那没有问题。但在开发中好像没有这种好运气，所以经常需要协调和平衡这些函数之间的执行。
如果你使用的是纯JS或者单独仅有jQuery的情况下，遇到这种让人焦头烂额的情形会尤为明显，前端MVC一定程度上隐藏了并处理了这些问题，但是也并不完全。这个时候你可能需要了解一下关于”有限状态机“的概念，前端开发中这应该是一个很有用的东西。
描述一下”有限状态机“：
有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。
状态总数（state）是有限的。
任一时刻，只会处于一种状态中。
在某种条件下，会从一种状态转变到另一种状态中。
在维基百科中称:有限状态机FSM是设计和实现事件驱动程序内复杂行为组织原则的有力工具。
对于前端来说，尤其是Javascript编程时，这个模型的意义就在于可以将其套用在很多对象上。具体个例子，比如一个按钮平时就是正常的按钮，当你点击后变成一个input。当然你可能会说这么简单的功能，我直接用jQuery甚至不用都可以，操作DOM显示和隐藏就好了。如果你还抱有这种天真的想法，我只能说你没遇到过让你痛不欲生的页面。。。当页面复杂到一定程度，单纯操作DOM去处理前端只会加快你疯掉的进程。
这里对于Button套用有限状态机的模型，相当btn对象只有两个状态，显示状态和编辑状态。看看代码吧：
var btn = {
// 当前状态
currentState: 'btn',
// 绑定事件
initialize: function() {
var self = this;
self.on("click", self.transition);
},
// 状态转换
transition: function(event){
switch(this.currentState) {
case "btn":
this.currentState = 'input';
doSomething();
break;
case "input":
this.currentState = 'btn';
doSomething();
break;
default:
console.log('Invalid State!');
break;
}
}
};
// 当前状态
currentState: 'btn',
// 绑定事件
initialize: function() {
var self = this;
self.on("click", self.transition);
},
// 状态转换
transition: function(event){
switch(this.currentState) {
case "btn":
this.currentState = 'input';
doSomething();
break;
case "input":
this.currentState = 'btn';
doSomething();
break;
default:
console.log('Invalid State!');
break;
}
}
};
上面就是有限状态机的写法，逻辑和层次上确实清晰了，对于状态越多的对象，就越适合这种写法。
通过有限状态机的这种模式,我认为最重要的一点就是将用户的操作行为,也就是组件的事件响应(比如点击)与组件的行为表现分离开来.在确切的说,通过建立一个有限状态机的模型,我们完全不关心用户的点击行为具体做了什么,这时组件可能会有几种状态对应不同的表现形式,而用户触发的事件仅仅是切换了模型的状态.至于每个状态的具体表现和行为,我们完全可以单独定义,也就说这时一种行为和响应上的解耦.
Github上有两个比较好的库,都是实现FSM的,有兴趣可以具体看看:
相关 [前端 开发 中使] 推荐：
前端开发大众手册
- Ran - FeedzShare来自: xilo's blog - FeedzShare . 发布时间:2009年03月09日, 已有 3 人推荐. 一直觉得前端开发缺个手册，这是个体力活. 今天闲来无事，把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下. 这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以直接留言，也可以发邮件给我.
前端开发 – 我们的职业
- aoao - 崔凯,前端开发写给“正在纠结”、“准备纠结”的前端开发们，希望对大家求职有所帮助：. 很多人提出薪资要求的时候，会说：“现在房租是多少多少、吃饭要多少多少、泡妞会多少多少”，所以，至少拿多少多少的工资，才满足自己的需求. 如果说这些话的人，已经是公司的老员工，和老板私人关系很不错，那这么讲还凑合. 但如果是职场新人，首次过来应聘，谈这些就很不在点上.
CssGaga：前端开发和部署利器
- Anew - 前端观察涛哥@ytzong 开发的cssgaga用了好久，确实是个好工具，早想把它推荐给大家用了. 今天就做个简介，涛哥网站有详细的介绍，这里不多说. （工作量）一般都能减少20%以上吧，没怎么统计. 一个极端的例子：某人使用了CssGaga后从原来早9点到晚11点下班，午休都在做到现在晚5点半下班，中午还能看一部完整电影 (via twitter).
前端开发流程自动化
- Lee - 《程序员》杂志官网如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多. 精简流程、提高效率，是每一个前端团队都会遇到的问题. 大部分前端团队使用Ant脚本进行这一系列流程的自动操作. Ant主要用于代码构建、打包、部署的自动化操作. 早先主要用于Java开发，但由于它具有接口开放、便于配置、Java跨平台等特性，在前端流程自动化方面同样可以发挥强大的功用.
前端开发中的MCRV模式
- 亚威 - 百度泛用户体验MCRV设计模式 Javascript MVC Web开发标准. 1.Web前端开发面临的问题. 早期的Web页开发(Web前端开发)中，Web页面较为简单，大多数Web页面的功能仅限于用HTML和简单样式展示静态信息，或向服务器发送数据，Web页面与用户的交互较少. 随着Web的发展，DHTML、CSS、javascript等技术出现，Web页不再仅限于展示静态信息，动态、交互成为Web页的主流功能之一.
关于前端开发这份工作
- paaboo - 小麦的自习教室一直想写点关于前端开发职位本身的文字，但写了好几次都没发. 最近又在持续的招聘，对应聘和招聘有些感想，零散的写多少算多少吧. 关于“前端开发工程师”这个职位. 当一个词开始泛滥，就会被人忘记它的本意. 首先，它是“开发工程师”，也就是程序员. 所以，程序员应该具备的素质，比如逻辑能力，写代码的水平等等，算是它最最基础的要求.
前端开发大众手册
- Ease - 膘叔很明显，这段内容是ctrl+c,ctrl+v而来的，做备份和资料查询用，挺好的. 原文来自：http://www.chencheng.org/blog/2008/10/25/f2e-manual/#f2e-manual-s1. 另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询.