前端开发中使用”有限状态机“解决复杂的交互问题
2014-06-19 17:28
351 查看
http://my.oschina.net/blogshi/blog/266763
摘要 在维基百科中称:有限状态机FSM是设计和实现事件驱动程序内复杂行为组织原则的有力工具。
前端开发是有逻辑的,这点毋庸置疑。程序员的思维逻辑赋予了代码各种能力,但是前端开发中经常面对的是用户的操作。在一个比较复杂的页面中(貌似现在也很少有简单页面了),用户的操作是不可预见的,假如有很多按钮,每个按钮都会做一件自己独一无二的事,如果上帝保佑所有的这些操作,这些事件都彼此没有限制,而且结果互不影响,那没有问题。但在开发中好像没有这种好运气,所以经常需要协调和平衡这些函数之间的执行。
如果你使用的是纯JS或者单独仅有jQuery的情况下,遇到这种让人焦头烂额的情形会尤为明显,前端MVC一定程度上隐藏了并处理了这些问题,但是也并不完全。这个时候你可能需要了解一下关于”有限状态机“的概念,前端开发中这应该是一个很有用的东西。
描述一下”有限状态机“:
有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。
状态总数(state)是有限的。
任一时刻,只会处于一种状态中。
在某种条件下,会从一种状态转变到另一种状态中。
在维基百科中称:有限状态机FSM是设计和实现事件驱动程序内复杂行为组织原则的有力工具。
对于前端来说,尤其是Javascript编程时,这个模型的意义就在于可以将其套用在很多对象上。具体个例子,比如一个按钮平时就是正常的按钮,当你点击后变成一个input。当然你可能会说这么简单的功能,我直接用jQuery甚至不用都可以,操作DOM显示和隐藏就好了。如果你还抱有这种天真的想法,我只能说你没遇到过让你痛不欲生的页面。。。当页面复杂到一定程度,单纯操作DOM去处理前端只会加快你疯掉的进程。
这里对于Button套用有限状态机的模型,相当btn对象只有两个状态,显示状态和编辑状态。看看代码吧:
上面就是有限状态机的写法,逻辑和层次上确实清晰了,对于状态越多的对象,就越适合这种写法。
通过有限状态机的这种模式,我认为最重要的一点就是将用户的操作行为,也就是组件的事件响应(比如点击)与组件的行为表现分离开来.在确切的说,通过建立一个有限状态机的模型,我们完全不关心用户的点击行为具体做了什么,这时组件可能会有几种状态对应不同的表现形式,而用户触发的事件仅仅是切换了模型的状态.至于每个状态的具体表现和行为,我们完全可以单独定义,也就说这时一种行为和响应上的解耦.
Github上有两个比较好的库,都是实现FSM的,有兴趣可以具体看看:
https://github.com/fschaefer/Stately.js
https://github.com/jakesgordon/javascript-state-machine
摘要 在维基百科中称:有限状态机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 | 4000 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
相关文章推荐
- 前端开发中使用setTimeout解决某些问题
- 当使用Vue开发前端遇到的问题及解决办法汇总
- 使用http-proxy-middleware解决前端开发中跨域的问题
- iOS开发工具-如何使用网络封包分析工具Charles,通过配置proxy对http、https、tcp、udp 等协议的请求响应过程交互信息进行分析、判断、解决我们移动开发中的遇到的各种实际问题。
- JSP数据和JavaScirpt数据交互使用问题的一种解决方法
- Symbian S60开发,在SettingList中使用RadioButton的问题及解决方法。
- 前端使用Jquery的getJSON方法,后台使用PHP,解决IE和火狐Firefox中存在的跨域ajax请求问题。
- 使用OQL+SQLMAP解决ORM多表复杂的查询问题
- [原创]使用RemObjects Hydra 开发 RemObjects SDK Service 过程中的异常问题解决
- J2ME使用WTK模拟器开发时候遇到“OK to use Airtime” 问题的解决方法
- 自己在使用Android Maps API 开发地图应用程序时遇到的问题,以及解决的办法
- 使用SourceSafe管理软件开发可能遇到的问题及解决方法
- JSP数据和JavaScirpt数据交互使用问题的一种解决方法
- 在wpf开发中,使用prism的一些问题解决
- 使用gSOAP开发实例(3) iconv解决中文乱码问题
- 解决workshop开发的服务器端与axis开发的客户端之间的交互通信问题
- 使用WinInet开发Http客户端碰到问题与解决办法
- 解决使用MySQL C-API开发应用时的连接超时问题
- 使用VIM开发软件项目 - (16) vim编译中遇到的问题及解决方法
- 【转载】[解决系统服务运行应用程序的权限问题]使用WTSGetActiveConsoleSessionId()的VISTA服务与桌面交互