前端開發中使用」有限狀態機「解決複雜的交互問題

    前端開發是有邏輯的，這點毋庸置疑。程序員的思惟邏輯賦予了代碼各類能力，可是前端開發中常常面對的是用戶的操做。在一個比較複雜的頁面中（貌似如今也不多有簡單頁面了），用戶的操做是不可預見的，假若有不少按鈕，每一個按鈕都會作一件本身獨一無二的事，若是上帝保佑全部的這些操做，這些事件都彼此沒有限制，並且結果互不影響，那沒有問題。但在開發中好像沒有這種好運氣，因此常常須要協調和平衡這些函數之間的執行。

    若是你使用的是純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;
    }
  }　
};

    上面就是有限狀態機的寫法，邏輯和層次上確實清晰了，對於狀態越多的對象，就越適合這種寫法。

    經過有限狀態機的這種模式,我認爲最重要的一點就是將用戶的操做行爲,也就是組件的事件響應(好比點擊)與組件的行爲表現分離開來.在確切的說,經過創建一個有限狀態機的模型,咱們徹底不關心用戶的點擊行爲具體作了什麼,這時組件可能會有幾種狀態對應不一樣的表現形式,而用戶觸發的事件僅僅是切換了模型的狀態.至於每一個狀態的具體表現和行爲,咱們徹底能夠單獨定義,也就說這時一種行爲和響應上的解耦.

    Github上有兩個比較好的庫,都是實現FSM的,有興趣能夠具體看看:

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

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