javascript 策略設計模式

willin 發布于2019-08-22 13:51 / 2266人閱讀

摘要：策略就是根據形勢的發展而制定的行動方針。策略模式實現重構首先，我們需要創建一個策略類組，然后在創建一個獎金類。策略模式添加一個類這種實現方式，研究源碼的同學經常遇到，在，等庫和前端框架中比較常見。設計模式相關文章

什么是策略。

策略就是根據形勢的發展而制定的行動方針。

比如說春節快要到了，我們要回家，回家我們就要選擇交通工具。怎么回家我們就需要制定方案。比如說我吧，我們家在河南一個農村，不管是汽車，火車，飛機都沒有直達的。我可以選擇從北京到鄭州乘火車，然后從北京到長葛做長途汽車，然后從長葛到家做短途汽車。當然也可以選擇其他方式，這就要根據自己的實際需要，時間不緊花費又低我一般就選擇這個方案。

開發中的策略模式使用

策略模式定義：定義一系列的算法，然后把它們一個個的封裝起來，這些封裝起來的算法可以相互替換。

舉一個年終獎金計算的例子，分為A，B，C，D四類，其中A類總經理，B類部門經理，C類項目負責人，D類開發人員。

一般情況，代碼實現如下：

var calBonus = function (level, salary) {
    if( level === "A") {
        return salary*2;
    }
    if( level === "B") {
        return salary*1.5;
    }
    if( level === "C") {
        return salary*1.0;
    }
    if( level === "D") {
        return salary*0.75;
    }
}

這種代碼的實現方式很常見，但是效果不是那么好，在這個函數體內一個條件就是一個算法策略，在實際開發中它們往往實現比較復雜，代碼量比較大，一個兩個沒什么，如果再增加幾個或者十幾個呢，或者我們在增加100個呢？明顯這種實現方式的彈性很差，復用性也比較差。

如果，代碼體積較小，分支較少使用條件判斷未嘗不可，但是如果，條件分支較多且代碼體積較大比建議。

組合函數實現重構

開發中我們往往會用的一種組合函數重構的方式來實現，代碼修改如下：

function levelA (salary) {
    return salary*2;
}

function levelB (salary) {
    return salary*1.5;
}

function levelC (salary) {
    return salary*1.0;
}

function levelD (salary) {
    return salary*0.75;
}

var calBonus = function(leveType, salary) {
    if(levelType === "A") {
        return leveA(salary);
    }
    
    if(levelType === "B") {
        return leveB(salary);
    }

    if(levelType === "C") {
        return leveC(salary);
    }

    if(levelType === "D") {
        return leveD(salary);
    }
}

這樣修改后的代碼確實使用起來，比剛開始好了許多，但是這樣的實現方式，還是彈性不足，如果擴展的話回事calBonus函數的體積越來越大。這時我們往往會考慮設計模式。

策略模式實現重構

首先，我們需要創建一個策略類組，然后在創建一個獎金類。具體代碼實現如下：

// A類
function LevelA() {}

LevelA.prototype.cal = function(salary) {
    return salary*2;
}

// B類
function LevelB() {}

LevelB.prototype.cal = function(salary) {
    return salary*1.5;
}

// C類
function LevelC() {}

LevelC.prototype.cal = function(salary) {
    return salary*1;
}

// D類
function LevelD() {}

LevelD.prototype.cal = function(salary) {
    return salary*0.75;
}

// 定義一個獎金類
function Bonus () {
    this.strategy = null;
    this.salary = null;
}
// 獎金strategy
Bonus.prototype.setStrategy = function(strategy) {
    this.strategy = strategy;
}
// 設置salary
Bonus.prototype.setSalary = function(salary) {
    this.salary = salary;
}
// 獲取獎金
Bonus.prototype.getBonus = function() {
    return this.strategy.cals(this.salary)
}

// A
var bonus = new Bonus();
bonus.setSalary(10000);
bonus(new LevelA());
bonus.getBonus()

// B
var bonus = new Bonus();
bonus.setSalary(8000);
bonus(new LevelB());
bonus.getBonus()

在javascript中，我們都知道，函數也是對象，所以更簡單的方法就是將每一種策略定義成函數，而非上面的實現方式。

JavaScript策略模式

function levelA (salary) {
    return salary*2;
}

function levelB (salary) {
    return salary*1.5;
}

function levelC (salary) {
    return salary*1.0;
}

function levelD (salary) {
    return salary*0.75;
}

var Bonus = {
    levelA : levelA,
    levelB : levelB,
    levelC : levelC,
    levelD : levelD,
};

var calBonus = function(level, salary) {
    return Bonus[level](salary);
}

calBonus("levelA", 30000); // 60000

// 添加一個E類
var levelE = function (salary) {
    return salary*0.5;
}

Bonus.levelE = levelE;

calBonus("levelE", 5000); // 2500

這種實現方式，研究源碼的同學經常遇到，在jQuery，validator等庫和前端框架中比較常見。

設計模式相關文章

GPU云服務器云服務器策略模式策略者模式 javascript設計模式 javascript命令模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92529.html

JavaScript設計模式----策略模式

摘要：實際上在這種將函數作為一等對象的語言里，策略模式已經融入到了語言本身當中，我們經常使用高階函數來封裝不同的行為，并且把它傳遞到另一個函數中。聲明：這個系列為閱讀《JavaScript設計模式與開發實踐》 ----曾探@著一書的讀書筆記 1.策略模式的定義將不變的部分和變化的部分隔開是每個設計模式的主題。定義一系列的算法，把它們一個個封裝起來，并且使它們可以相互替換。 2.策略模式...

forrest23 2019-08-21 10:56 評論0 收藏0
JavaScript 設計模式（二）：策略模式

摘要：策略模式實現的也是類似的場景。第二個部分是環境類不變，接收客戶的請求，隨后把請求委托給某一個策略類。參考文章設計模式設計模式與開發實踐設計模式系統講解與應用本文首發，期待作者以樂之名本文原創，有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVbugi7?w=800&h=600); 策略模式：定義一系列的算法，把它們一個個封裝起來，并且...

荊兆峰 2019-08-23 18:17 評論0 收藏0
JS策略模式《JavaScript設計模式與開發實踐》閱讀筆記

摘要：策略模式可以避免代碼中的多重判斷條件。策略模式在程序中或多或少的增加了策略類。此文僅記錄本人閱讀設計模式與開發實踐這個本時的感受，感謝作者曾探寫出這么好的一本書。設計模式中很重要的一點就是將不變和變分離出來。參考設計模式與開發實踐曾探策略模式的定義是：定義一系列的算法，把它們一個個封裝起來，并且是它們可以相互替換。策略模式可以避免代碼中的多重判斷條件。策略模式很好的體現了開放-...

Amos 2019-08-22 17:57 評論0 收藏0
JavaScript設計模式與開發實踐系列之策略模式

摘要：本系列為設計模式與開發實踐作者曾探學習總結，如想深入了解，請支持作者原版策略模式策略模式的定義定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。本系列為《JavaScript設計模式與開發實踐》（作者：曾探）學習總結，如想深入了解，請支持作者原版策略模式策略模式的定義：定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。舉個形象的例子，使用策略模式計算...

spademan 2019-08-19 17:48 評論0 收藏0
javascript設計模式－－策略模式

摘要：策略模式總結什么是策略模式策略模式的定義是定義一系列的算法，把他們獨立封裝起來，并且可以相互替換。策略模式的使用如果策略模式僅僅是用來封裝算法，可能有點小才大用了。原文鏈接設計模式策略模式上一篇設計模式單例模式 javascript策略模式總結 1.什么是策略模式？策略模式的定義是：定義一系列的算法，把他們獨立封裝起來，并且可以相互替換。例如我們需要寫一段代碼來計算員工的獎金。當績...

ztyzz 2019-08-21 11:47 評論0 收藏0
javascript設計模式－－策略模式

摘要：策略模式總結什么是策略模式策略模式的定義是定義一系列的算法，把他們獨立封裝起來，并且可以相互替換。策略模式的使用如果策略模式僅僅是用來封裝算法，可能有點小才大用了。原文鏈接設計模式策略模式上一篇設計模式單例模式 javascript策略模式總結 1.什么是策略模式？策略模式的定義是：定義一系列的算法，把他們獨立封裝起來，并且可以相互替換。例如我們需要寫一段代碼來計算員工的獎金。當績...

李文鵬 2019-08-01 17:08 評論0 收藏0