摘要：將不變的部分和變化的部分隔開是每個設計模式的主題，策略模式也不例外，策略模式的目的就是將算法的使用與算法的實現(xiàn)分離開來。

本系列文章主要根據(jù)《JavaScript設計模式與開發(fā)實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。

js設計模式--單例模式

js設計模式--策略模式

js設計模式--代理模式

策略模式的定義是:定義一系列的算法，把它們一個個封裝起來，并且使它們可以相互替換。

策略模式指的是定義一系列的算法，把它們一個個封裝起來。將不變的部分和變化的部分隔開是每個設計模式的主題，策略模式也不例外，策略模式的目的就是將算法的使用與算法的實現(xiàn)分離開來。

一個基于策略模式的程序至少由兩部分組成。第一個部分是一組策略類，策略類封裝了具體 的算法，并負責具體的計算過程。 第二個部分是環(huán)境類Context，Context 接受客戶的請求，隨后 把請求委托給某一個策略類。要做到這點，說明 Context中要維持對某個策略對象的引用。

策略模式的實現(xiàn)并不復雜，關鍵是如何從策略模式的實現(xiàn)背后，找到封裝變化、委托和多態(tài)性這些思想的價值。

從定義上看，策略模式就是用來封裝算法的。但如果把策略模式僅僅用來封裝算法，未免有一點大材小用。在實際開發(fā)中，我們通常會把算法的含義擴散開來，使策略模式也可以用來封裝 一系列的“業(yè)務規(guī)則”。只要這些業(yè)務規(guī)則指向的目標一致，并且可以被替換使用，我們就可以 用策略模式來封裝它們。

策略模式利用組合、委托和多態(tài)等技術和思想，可以有效地避免多重條件選擇語句。

策略模式提供了對開放—封閉原則的完美支持，將算法封裝在獨立的strategy中，使得它們易于切換，易于理解，易于擴展。

策略模式中的算法也可以復用在系統(tǒng)的其他地方，從而避免許多重復的復制粘貼工作。

在策略模式中利用組合和委托來讓 Context 擁有執(zhí)行算法的能力，這也是繼承的一種更輕便的替代方案。

增加許多策略類或者策略對象，但實際上這比把它們負責的 邏輯堆砌在 Context 中要好。

要使用策略模式，必須了解所有的 strategy，必須了解各個 strategy 之間的不同點， 這樣才能選擇一個合適的 strategy。

但這些缺點并不嚴重

    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 函數(shù)比較龐大，包含了很多 if-else 語句

calculateBonus 函數(shù)缺乏彈性，如果增加了一種新的績效等級 C，或者想把績效 S 的獎金 系數(shù)改為 5，那我們必須深入 calculateBonus 函數(shù)的內部實現(xiàn)，這是違反開放?封閉原則的。

算法的復用性差

    var performanceS = function( salary ){
        return salary * 4;
    };
    var performanceA = function( salary ){
        return salary * 3;
    };
    var performanceB = function( salary ){
        return salary * 2;
    };
    var calculateBonus = function( performanceLevel, salary ){
        if ( performanceLevel === "S" ){
            return performanceS( salary );
        }
        if ( performanceLevel === "A" ){
            return performanceA( salary );
        }
        if ( performanceLevel === "B" ){
            return performanceB( salary );
        }
    };
    calculateBonus( "A" , 10000 ); // 輸出：30000

問題依然存在：calculateBonus 函數(shù)有可能越來越龐大，而且在系統(tǒng)變化的時候缺乏彈性

    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;
    };

    //接下來定義獎金類Bonus：

    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(){ // 取得獎金數(shù)額
        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

但這段代碼是基于傳統(tǒng)面向對象語言的模仿，下面我們用JavaScript實現(xiàn)的策略模式。

在 JavaScript 語言中，函數(shù)也是對象，所以更簡單和直接的做法是把 strategy 直接定義為函數(shù)

    var strategies = {
        "S": function( salary ){
            return salary * 4;
        },
        "A": function( salary ){
            return salary * 3;
        },
        "B": function( salary ){
            return salary * 2;

        }
    };
    var calculateBonus = function( level, salary ){
        return strategies[ level ]( salary );
    };

    console.log( calculateBonus( "S", 20000 ) ); // 輸出：80000
    console.log( calculateBonus( "A", 10000 ) ); // 輸出：30000

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;
};

//接下來定義獎金類Bonus：
class Bonus {
  constructor() {
    this.salary = null; // 原始工資
  this.strategy = null; // 績效等級對應的策略對象
  }
  setSalary(salary) {
    this.salary = salary; // 設置員工的原始工資
  }
  setStrategy(strategy) {
    this.strategy = strategy; // 設置員工績效等級對應的策略對象
  }
  getBonus() { // 取得獎金數(shù)額
    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

首先緩動算法的職責是實現(xiàn)小球如何運動

然后動畫類（即context）的職責是負責：

初始化動畫對象

在運動開始之前，需要提前記錄一些有用的信息，至少包括以下信息:

動畫開始時的準確時間點;

動畫開始時，小球所在的原始位置;

小球移動的目標位置;

小球運動持續(xù)的時間。

計算小球某時刻的位置

更新小球的位置

  
  
  
  



  
我是div

  

    請輸入用戶名：
    請輸入密碼：

    請輸入手機號碼：
    提交
  
  

  

    請輸入用戶名：
    請輸入密碼：

    請輸入手機號碼：
    提交
  
  

缺點：一 個文本輸入框只能對應一種校驗規(guī)則

  

    請輸入用戶名：
    請輸入密碼：

    請輸入手機號碼：
    提交