前端讀者 | Javascript設計模式理論與實戰：狀態模式

本文來自 @狼狼的藍胖子；連接：http://luopq.com/2015/11/25/design-pattern-state/

在軟件開發中，很大部分時候就是操做數據，而不一樣數據下展現的結果咱們將其抽象出來稱爲狀態，咱們平時開發時本質上就是對應用程序的各類狀態進行切換並做出相應處理。狀態模式就是一種適合多種狀態場景下的設計模式。使用狀態模式能夠可讓代碼更加清晰，提升應用程序的維護性和擴展性。

基礎知識

狀態模式定義一個對象，這個對象能夠經過管理其狀態從而使得應用程序做出相應的變化。狀態模式是一個很是經常使用的設計模式，它主要有兩個角色組成：

• 環境類：擁有一個狀態成員，能夠修改其狀態並做出相應反應。
• 狀態類：表示一種狀態，包含其相應的處理方法

狀態模式的實現

基本示例

咱們簡單地經過一個紅綠燈的例子來講明狀態模式，紅綠燈擁有一個狀態：哪種顏色的燈亮了，每一種顏色的燈亮了以後又各自的動做，一共有紅綠黃三種顏色的燈，也就是有三種狀態。

首先，須要一個最基本的紅綠燈對象，咱們定義以下：

var trafficLight = (function () {
    var currentLight = null;
    return {
        change: function (light) {
            currentLight = light;
            currentLight.go();
        }
    }
 })();

上面的代碼中，trafficLight是一個紅綠燈對象，它有一個局部變量currentLight表示當前亮燈的對象，同時返回一個方法，這個方法用來改變紅綠燈的狀態，並觸發相應的處理程序。

接着咱們定義三種不一樣顏色的燈，代碼以下：

//紅燈
function RedLight() { }
RedLight.prototype.go = function () {
    console.log("this is red light");
}
//綠燈
function GreenLight() { }
GreenLight.prototype.go = function () {
    console.log("this is green light");
}
//黃燈
function YellowLight() { }
YellowLight.prototype.go = function () {
    console.log("this is yellow light");
}

這段代碼分別定義了紅綠黃三種顏色的燈對象，每個對象都包含一個go方法做爲亮燈以後的處理程序。

接着，咱們在客戶端進行切換不一樣顏色的燈：

trafficLight.change(new RedLight());
trafficLight.change(new YellowLight());

經過傳入燈對象到change方法中，從而改變紅綠燈的狀態，觸發其相應的處理程序，這就是一個典型的狀態模式的應用。

JS組件開發中的狀態模式

狀態模式在開發JS組件時很是有用，咱們平時開發組件時不少時候要切換組件的狀態，每種狀態有不一樣的處理方式，這個時候就可使用狀態模式進行開發

好比咱們要開發一個菜單組件，菜單擁有最基本的兩種狀態：顯示和隱藏，相應的顯示或隱藏可能會有各自的其餘操做。使用狀態模式的話，咱們首先定義一個環境類，在這裏也就是菜單對象，簡單地定義以下：

function Menu() { }
Menu.prototype.toggle = function (state) {
    state();
}

這個菜單類有一個toggle方法用來切換狀態，而後調用相應的處理方法。

接着咱們定義兩種狀態，定義以下：

var menuStates = {
    "show": function () {
        console.log("the menu is showing");
    },
    "hide": function () {
        console.log("the menu is hiding");
    }
};

在這裏，經過一個對象menuStates來定義menu的狀態，這裏有兩種狀態show和hide，而後擁有相應的處理方法。在使用的時候經過下面的方法進行調用：

var menu = new Menu();
menu.toggle(menuStates.show);
menu.toggle(menuStates.hide);

這段代碼實例化了一個Menu對象，而後分別切換了顯示和隱藏兩種狀態，若是有第三種狀態，咱們只須要menuStates添加相應的狀態和處理程序便可。

總結

狀態模式在開發Web組件時很是有用，能讓咱們的代碼結構更加清晰，可以很方便的增長組件的各類狀態。使用狀態模式的關鍵是要理清組件的各類狀態，搞清楚組件的不一樣狀態和相應的處理函數，對組件後期的維護和擴展有極大的好處。