javaScript設計模式之策略模式

javaScript設計模式之策略模式

定義一系列的算法，把他們一個個封裝起來，並且使他們可以互相替換

使用策略模式計算獎金

我們就用計算獎金爲栗子，比如說績效S就是4倍獎金，A績效3倍獎金，B績效2倍獎金，我們來提供一段代碼，來方便計算

最初的代碼實現

var calculateBonus = function( performanceLevel, salary ){
 if ( performanceLevel === 'S' ){
     return salary * 4;
 }
 if ( performanceLevel === 'A' ){
     return salary * 3;
 }
 if ( performanceLevel === 'B' ){
     return salary * 2;
 }
};
calculateBonus( 'B', 20000 ); // 輸出：40000
calculateBonus( 'S', 6000 ); // 輸出：24000

可以發現，這段代碼非常簡單，但是有個缺點，calculateBonus函數比較龐大，包含很多if-else

`calculateBonus函數缺乏彈性，比如需要修改一個績效級別的獎金，就要深入函數內部實現，這樣微分開放-封閉原則

算法複用性差,如果其他地方需要複用，還需要複製粘貼

使用策略模式-傳統面向對象

        var performanceS = function () {};
    performanceS.prototype.calculate = function (salary) {
      return salary * 4;
    };
    var performanceA = function () {};
    performanceA.prototype.calculate = function (salary) {
      return salary * 3;
    };
    var performanceB = function () {};
    performanceB.prototype.calculate = function (salary) {
      return salary * 2;
    };


    var Bonus = function () {
      this.salary = null; // 原始工資
      this.strategy = null; // 績效等級對應的策略對象
    };

    Bonus.prototype.setSalary = function (salary) {
      this.salary = salary; // 設置員工的原始工資
    };
    Bonus.prototype.setStrategy = function (strategy) {
      this.strategy = strategy; // 設置績效等級對應的策略對象
    };
    Bonus.prototype.getBonus = function () { // 取得獎金數額
      return this.strategy.calculate(this.salary); // 把計算獎金的操作委託給對應的策略對象
    };


    var bonus = new Bonus();
    bonus.setSalary(10000);
    bonus.setStrategy(new performanceS()); // 設置策略對象
    console.log(bonus.getBonus()); // 輸出:40000 
    bonus.setStrategy(new performanceA()); // 設置策略對象
    console.log(bonus.getBonus()); // 輸出:30000

使用策略模式-javascript版本

var strategies = {
    "S": function( salary ){
        return salary * 4; 
  },
    "A": function( salary ){ 
    return salary * 3;
    },
  "B": function( salary ){
        return salary * 2; 
  }
}
//同樣，Context 也沒有必要必須用 Bonus 類來表示，我們依然用 calculateBonus 函數 當Context 來接受用戶的請求  。經過改造，代碼的結構變得更加簡單
var calculateBonus = function( level, salary ){ 
  return strategies[ level ]( salary );
};
console.log( calculateBonus( 'S', 20000 ) ); 
console.log( calculateBonus( 'A', 10000 ) );