js--狀態模式

一.前言

在咱們程序的編寫過程當中，常常會有各類條件的判斷，有的時候，咱們會寫不少個If-else 去進行業務邏輯的處理，不單單形成代碼的易讀性差，並且當需求變動的時候，增長查詢條件的時候，可能添加一個地方須要把不少的if-else 進行更改，就有可能形成「全面癱瘓」。爲了不過多的if-else ,能夠用狀態模式進行替換。什麼是狀態模式呢？詳情看下面：

二.概念

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

（1）環境類：擁有一個狀態成員，能夠修改其狀態並做出相應的反應。

（2）狀態類：表示一種狀態，包含其相應的處理方法。

三.例子

//咱們首先定義一個環境類，在這裏也就是菜單對象，擁有一個狀態成員，能夠修改其狀態並做出相應反應
function Menu() { }

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

//咱們首先定義狀態類,表示一種狀態，包含其相應的處理方法
var menuStates = {
  "show": function () {
      console.log("the menu is showing");
  },
  "hide": function () {
      console.log("the menu is hiding");
  }
};

//這段代碼實例化了一個Menu對象，而後分別切換了顯示和隱藏兩種狀態，若是有第三種狀態，咱們只須要
//menuStates添加相應的狀態和處理程序便可
var menu = new Menu();
menu.toggle(menuStates.show);
menu.toggle(menuStates.hide);

四.總結

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