前端開發(fā)是有邏輯的，這點毋庸置疑。程序員的思維邏輯賦予了代碼各種能力，但是前端開發(fā)中經(jīng)常面對的是用戶的操作。在一個比較復(fù)雜的頁面中（貌似現(xiàn)在也很少有簡單頁面了），用戶的操作是不可預(yù)見的，假如有很多按鈕，每個按鈕都會做一件自己獨一無二的事，如果上帝保佑所有的這些操作，這些事件都彼此沒有限制，而且結(jié)果互不影響，那沒有問題。但在開發(fā)中好像沒有這種好運氣，所以經(jīng)常需要協(xié)調(diào)和平衡這些函數(shù)之間的執(zhí)行。

　　如果你使用的是純JS或者單獨僅有jQuery的情況下，遇到這種讓人焦頭爛額的情形會尤為明顯，前端MVC一定程度上隱藏了并處理了這些問題，但是也并不完全。這個時候你可能需要了解一下關(guān)于”有限狀態(tài)機“的概念，前端開發(fā)中這應(yīng)該是一個很有用的東西。

　　描述一下”有限狀態(tài)機“：

有限狀態(tài)自動機，簡稱狀態(tài)機，是表示有限個狀態(tài)以及在這些狀態(tài)之間的轉(zhuǎn)移和動作等行為的數(shù)學(xué)模型。

狀態(tài)總數(shù)（state）是有限的。

任一時刻，只會處于一種狀態(tài)中。

在某種條件下，會從一種狀態(tài)轉(zhuǎn)變到另一種狀態(tài)中。

在維基百科中稱:有限狀態(tài)機FSM是設(shè)計和實現(xiàn)事件驅(qū)動程序內(nèi)復(fù)雜行為組織原則的有力工具。

　　對于前端來說，尤其是Javascript編程時，這個模型的意義就在于可以將其套用在很多對象上。具體個例子，比如一個按鈕平時就是正常的按鈕，當(dāng)你點擊后變成一個input。當(dāng)然你可能會說這么簡單的功能，我直接用jQuery甚至不用都可以，操作DOM顯示和隱藏就好了。如果你還抱有這種天真的想法，我只能說你沒遇到過讓你痛不欲生的頁面。。。當(dāng)頁面復(fù)雜到一定程度，單純操作DOM去處理前端只會加快你瘋掉的進程。

　　這里對于Button套用有限狀態(tài)機的模型，相當(dāng)btn對象只有兩個狀態(tài)，顯示狀態(tài)和編輯狀態(tài)。看看代碼吧：

var btn = {    // 當(dāng)前狀態(tài)    currentState: 'btn',    // 綁定事件    initialize: function() {      var self = this;      self.on("click", self.transition);    },    // 狀態(tài)轉(zhuǎn)換    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;      }    }　  };  

it知識庫：前端開發(fā)中使用”有限狀態(tài)機“解決復(fù)雜的交互問題，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。