有限狀態機(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的基本用法就是上面這些,更詳細的介紹可以參見它的主頁。
(完)