JavaScript設計模式學習—策略模式

什麼是策略模式

策略模式，就是將不一樣的算法各自封裝起來，而後根據程序的不一樣狀況，採用不一樣的算法，有點像工廠模式。好比在不少種狀況下，都要寫ifXXX dosometing（） else if XXX，這是最基本的程序邏輯寫法，但隨着狀況愈來愈複雜，那麼代碼將很是難讀，混亂不堪。

策略模式實現

以前寫過的一個頁面就很是痛苦，是一個訂單頁加一些新功能，我是中途接手的，這個頁面大概的描述是根據不一樣的角色（用戶，商家，管理員）和不一樣的訂單狀態對頁面進行相應的DOM操做和提供不一樣的接口功能。以前狀況很少，代碼也就是最簡單的if else，雖然醜陋了點，但也沒到不可讀的地步，但隨着訂單不一樣的status增長到十幾種，和夾雜一些訂單不一樣狀態轉換前的判斷，代碼就看起來不可控了。
我嘗試用策略模式重構代碼，先簡化一下，看看一種狀態下不一樣角色操做實現：

if(role == 1){
          $('.order_btn').text('查看訂單');
          checkOrder();
}else if(role == 2){
          $('.order_btn').text('發貨');
          deilverGoods();
}else if(role == 3){
          $('.order_btn').text('取消訂單');
          cancelOrder();
}

1表明用戶，2表明商家，3表明管理員，隨着角色不一樣，相應頁面按鈕進行不一樣處理，也相應調用不一樣的實現算法。
先嚐試將角色與操做對應封裝：

var performanceByRole={
    user:function(){
      $('.order_btn').text('查看訂單');
      checkOrder();
    },
    seller:function(){
      $('.order_btn').text('發貨');
      deilverGoods();
    },
    manage:function(){
     $('.order_btn').text('取消訂單');
      cancelOrder();
    }
};
function shiftRole(role){
    if(role == 1){
      return 'user';
    }else if(role == 2){
      return 'seller'
    }else if(role == 3){
      return 'manage'
    };
}
function toDiffStrategy(role){
    var funcname = shiftRole(role);
    performanceByRole[funcname]();
}

var role = fromServer();
toDiffStrategy(role);

首先把要採起的不一樣策略封裝在一個鍵值對裏，shiftRole這個函數是「多餘的」，轉換一下後臺傳給前端的數據，這裏即便用了if else也是可控的，由於角色就那麼幾個，以後toDiffStrategy將根據傳入的不一樣角色，採起不一樣的策略算法。在其餘語言中，實現這樣的思路也比較費勁，而js得函數很是靈活，原本能夠當值傳遞，因此實現策略模式很是輕鬆，也很靈活。