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

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

js設(shè)計(jì)模式--單例模式

js設(shè)計(jì)模式--策略模式

js設(shè)計(jì)模式--代理模式

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

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

一個(gè)基于策略模式的程序至少由兩部分組成。第一個(gè)部分是一組策略類(lèi)，策略類(lèi)封裝了具體 的算法，并負(fù)責(zé)具體的計(jì)算過(guò)程。 第二個(gè)部分是環(huán)境類(lèi)Context，Context 接受客戶的請(qǐng)求，隨后 把請(qǐng)求委托給某一個(gè)策略類(lèi)。要做到這點(diǎn)，說(shuō)明 Context中要維持對(duì)某個(gè)策略對(duì)象的引用。

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

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

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

策略模式提供了對(duì)開(kāi)放—封閉原則的完美支持，將算法封裝在獨(dú)立的strategy中，使得它們易于切換，易于理解，易于擴(kuò)展。

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

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

增加許多策略類(lèi)或者策略對(duì)象，但實(shí)際上這比把它們負(fù)責(zé)的 邏輯堆砌在 Context 中要好。

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

但這些缺點(diǎn)并不嚴(yán)重

    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

缺點(diǎn)：

calculateBonus 函數(shù)比較龐大，包含了很多 if-else 語(yǔ)句

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

算法的復(fù)用性差

    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

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

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

    //接下來(lái)定義獎(jiǎng)金類(lèi)Bonus：

    var Bonus = function(){
        this.salary = null; // 原始工資
        this.strategy = null; // 績(jī)效等級(jí)對(duì)應(yīng)的策略對(duì)象
    };
    Bonus.prototype.setSalary = function( salary ){
        this.salary = salary; // 設(shè)置員工的原始工資
    };
    Bonus.prototype.setStrategy = function( strategy ){
        this.strategy = strategy; // 設(shè)置員工績(jī)效等級(jí)對(duì)應(yīng)的策略對(duì)象
    };
    Bonus.prototype.getBonus = function(){ // 取得獎(jiǎng)金數(shù)額
        return this.strategy.calculate( this.salary ); // 把計(jì)算獎(jiǎng)金的操作委托給對(duì)應(yīng)的策略對(duì)象
    };

    var bonus = new Bonus();
    bonus.setSalary( 10000 );

    bonus.setStrategy( new performanceS() ); // 設(shè)置策略對(duì)象
    console.log( bonus.getBonus() ); // 輸出：40000
    bonus.setStrategy( new performanceA() ); // 設(shè)置策略對(duì)象
    console.log( bonus.getBonus() ); // 輸出：30000

但這段代碼是基于傳統(tǒng)面向?qū)ο笳Z(yǔ)言的模仿，下面我們用JavaScript實(shí)現(xiàn)的策略模式。

在 JavaScript 語(yǔ)言中，函數(shù)也是對(duì)象，所以更簡(jiǎn)單和直接的做法是把 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;
};

//接下來(lái)定義獎(jiǎng)金類(lèi)Bonus：
class Bonus {
  constructor() {
    this.salary = null; // 原始工資
  this.strategy = null; // 績(jī)效等級(jí)對(duì)應(yīng)的策略對(duì)象
  }
  setSalary(salary) {
    this.salary = salary; // 設(shè)置員工的原始工資
  }
  setStrategy(strategy) {
    this.strategy = strategy; // 設(shè)置員工績(jī)效等級(jí)對(duì)應(yīng)的策略對(duì)象
  }
  getBonus() { // 取得獎(jiǎng)金數(shù)額
    return this.strategy.calculate(this.salary); // 把計(jì)算獎(jiǎng)金的操作委托給對(duì)應(yīng)的策略對(duì)象
  }
}

var bonus = new Bonus();
bonus.setSalary(10000);

bonus.setStrategy(new performanceS()); // 設(shè)置策略對(duì)象
console.log(bonus.getBonus()); // 輸出：40000
bonus.setStrategy(new performanceA()); // 設(shè)置策略對(duì)象
console.log(bonus.getBonus()); // 輸出：30000

首先緩動(dòng)算法的職責(zé)是實(shí)現(xiàn)小球如何運(yùn)動(dòng)

然后動(dòng)畫(huà)類(lèi)（即context）的職責(zé)是負(fù)責(zé)：

初始化動(dòng)畫(huà)對(duì)象

在運(yùn)動(dòng)開(kāi)始之前，需要提前記錄一些有用的信息，至少包括以下信息:

動(dòng)畫(huà)開(kāi)始時(shí)的準(zhǔn)確時(shí)間點(diǎn);

動(dòng)畫(huà)開(kāi)始時(shí)，小球所在的原始位置;

小球移動(dòng)的目標(biāo)位置;

小球運(yùn)動(dòng)持續(xù)的時(shí)間。

計(jì)算小球某時(shí)刻的位置

更新小球的位置

  
  
  
  



  
我是div

  

    請(qǐng)輸入用戶名：
    請(qǐng)輸入密碼：

    請(qǐng)輸入手機(jī)號(hào)碼：
    提交
  
  

  

    請(qǐng)輸入用戶名：
    請(qǐng)輸入密碼：

    請(qǐng)輸入手機(jī)號(hào)碼：
    提交
  
  

缺點(diǎn)：一 個(gè)文本輸入框只能對(duì)應(yīng)一種校驗(yàn)規(guī)則

  

    請(qǐng)輸入用戶名：
    請(qǐng)輸入密碼：

    請(qǐng)輸入手機(jī)號(hào)碼：
    提交