JS設計模式-策略模式

mylxsw 發布于2019-08-21 16:56 / 1569人閱讀

摘要：策略模式是指對一系列的算法定義，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。

策略模式是指對一系列的算法定義，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。

優點：

策略模式利用組合、委托等技術和思想，可以避免很多if條件語句

策略模式提供了開放-封閉原則，使代碼更容易理解和拓展

簡單取值

很多例子以績效等級和薪資計算獎金為說明

let calculateBouns = (level,salary)=>{
    if(level=="A"){
        return salary * 1.4;
    }else if(level=="B"){
        return salary * 1.3;
    }else if(level=="C"){
        return salary * 1.2;
    }else{
        return salary;
    }
}

console.log(calculateBouns("A", 8000)); //11200
console.log(calculateBouns("C", 8000)); //9600

策略模式重構

//策略對象
class ruleA{
    calculate(salary){
        return salary * 1.4;
    }
} 

class ruleB{
    calculate(salary){
        return salary * 1.3;
    }
} 

class ruleC{
    calculate(salary){
        return salary * 1.2;
    }
} 

//獎金類
class Bouns{
    constructor(){
        this.salary = null;
        this.level = null;
    }

    setLevel(level){
        this.level = level;
    }

    setSalary(salary){
        this.salary = salary;
    }

    getBouns(){
        return this.level.calculate(this.salary);
    }
}

let tom = new Bouns(),jerry = new Bouns();
//設置薪資
tom.setSalary(8000);
jerry.setSalary(10000);
//設置策略對象
tom.setLevel(new ruleA());
jerry.setLevel(new ruleA());
console.log(tom.getBouns()); //11200
console.log(jerry.getBouns()); //14000

jerry.setLevel(new ruleB());
console.log(jerry.getBouns()); //13000

表單

還有一種理解策略模式的例子就是表單驗證，通常會涉及到多個字段有效性判斷

let form = document.getElementById("Form");
form.onsubmit = function(){
    if(form.username.value == ""){
        alert("用戶名不能為空");
        return false;
    }else if(form.username.value.length <= 6){
        alert("用戶名長度不能小于6位");
        return false;
    }else if(form.password.value.length <= 6){
        alert("密碼長度不能小于6位");
        return false;
    }else if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
        alert("手機號碼格式不正確");
        return;
    }else{
        submit();
    }
}

這樣實現的代碼的缺點：

函數體積臃腫，包含了很多if判斷

函數缺乏彈性，違反了開放-封閉原則

函數復用性差，如果增加表單需要類似驗證，只能復制一遍

策略模式實現表單驗證

// 策略對象
let strategys = {
    isEmpty: (value,errorMsg)=> {
        if(value === "") {
            return errorMsg;
        }
    },
    // 限制最小長度
    minLength: (value,length,errorMsg)=> {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手機號碼格式
    illegalPhone: (value,errorMsg)=> {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};

class Validator{
    constructor(){
        this.cache = []; //保存校驗規則
    }

    addRule(dom,rules){
        var self = this;
        for(let i = 0, rule; rule = rules[i++]; ){
            let strategyAry = rule.strategy.split(":");
            let errorMsg = rule.errorMsg;
            self.cache.push(function(){
                let strategy = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);
                return strategys[strategy].apply(dom,strategyAry);
            });
        }
    }

    check(){
        for(let i = 0, fn; fn = this.cache[i++]; ) {
            let msg = fn(); // 開始效驗 并取得效驗后的返回信息
            if(msg) {
                return msg;
            }
        }
    }
}

// 代碼調用
let form = document.getElementById("Form");
let validateFunc = function(){
    let validator = new Validator(); // 實例化Validator
    //添加一些校驗規則
    validator.addRule(form.username,[
        {strategy: "isEmpty",errorMsg:"用戶名不能為空"},
        {strategy: "minLength:6",errorMsg:"用戶名長度不能小于6位"}
    ]);
    validator.addRule(form.password,[
        {strategy: "minLength:6",errorMsg:"密碼長度不能小于6位"},
    ]);
    validator.addRule(form.phone,[
        {strategy: "illegalPhone",errorMsg:"手機號格式不正確"},
    ]);
    return  validator.check();
};

form.onsubmit = function(){
    let errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }else{
        submit();
    }
}

策略模式屬于對象行為模式，主要針對一組算法，將每一個算法封裝到具有共同接口的獨立的類中，使得它們可以相互替換。

云服務器 GPU云服務器策略模式策略者模式 JS設計模式 js繼承模式

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

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

js設計模式--策略模式

摘要：將不變的部分和變化的部分隔開是每個設計模式的主題，策略模式也不例外，策略模式的目的就是將算法的使用與算法的實現分離開來。前言本系列文章主要根據《JavaScript設計模式與開發實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設計模式--單例模式 js設計模式--策略模式 js設計模式--代理模式概念策略模式的定義是:定義一系列的算法，把它們一個...

bigdevil_s 2019-08-23 14:27 評論0 收藏0
JS 設計模式 十四（策略模式）

摘要：策略模式定義一系列的算法把它們一個個封裝起來并且使它們可相互替換。策略模式要素策略接口，用來約束一系列具體的策略算法。策略模式策略購買輛總金額策略購買輛總金額策略模式優點算法可以自由切換。策略模式缺點策略類會增多。所有策略類都需要對外暴露。策略模式定義一系列的算法,把它們一個個封裝起來, 并且使它們可相互替換。本模式使得算法可獨立于使用它的客戶而變化。策略模式是把一個類中經常改變或...

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

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

Amos 2019-08-22 17:57 評論0 收藏0
JS設計模式——策略模式

摘要：版本策略模式在上個例子中雖然初步實現了策略模式，但是是仿照的傳統面向對象語言，而的實現更為簡單，直接把原來的實例定義成函數，原先的類用函數來委托。 1. 介紹策略模式是JS設計模式中一大重要的模式有著廣泛的應用 2. 定義定義一系列的算法，把它們一個個封裝起來，并且使它們可以相互替換 3. 應用根據等級、工資計算獎金等類似情況、使用不同的動畫效果、表單驗證等 4. 思想把算法實...

Jrain 2019-08-22 17:56 評論0 收藏0
JavaScript 設計模式系列 - 策略模式與動態表單驗證

摘要：策略模式又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。的表單具有表單驗證功能，用來校驗用戶輸入的表單內容。實際需求中表單驗證項一般會比較復雜，所以需要給每個表單項增加自定義校驗方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式（Strategy Pattern...

宋華 2019-08-26 14:06 評論0 收藏0