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

mylxsw 發(fā)布于2019-08-21 16:56 / 1586人閱讀

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

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

優(yōu)點(diǎn)：

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

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

簡(jiǎn)單取值

很多例子以績(jī)效等級(jí)和薪資計(jì)算獎(jiǎng)金為說明

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

策略模式重構(gòu)

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

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

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

//獎(jiǎng)金類
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();
//設(shè)置薪資
tom.setSalary(8000);
jerry.setSalary(10000);
//設(shè)置策略對(duì)象
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

表單

還有一種理解策略模式的例子就是表單驗(yàn)證，通常會(huì)涉及到多個(gè)字段有效性判斷

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

這樣實(shí)現(xiàn)的代碼的缺點(diǎn)：

函數(shù)體積臃腫，包含了很多if判斷

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

函數(shù)復(fù)用性差，如果增加表單需要類似驗(yàn)證，只能復(fù)制一遍

策略模式實(shí)現(xiàn)表單驗(yàn)證

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

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

    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(); // 開始效驗(yàn) 并取得效驗(yàn)后的返回信息
            if(msg) {
                return msg;
            }
        }
    }
}

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

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

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

云服務(wù)器 GPU云服務(wù)器策略模式策略者模式 JS設(shè)計(jì)模式 js繼承模式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88923.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mylxsw

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RAKsmart：爆款產(chǎn)品 $ 30秒殺，香港新增DDOS最高100G， VPS全場(chǎng)5折

閱讀 1442·2021-09-02 09:53
Sharktech：$129/月/2*E5-2678v3/64GB內(nèi)存/1TB NVMe硬盤/不限流

閱讀 2695·2021-07-29 13:50
iconfont在react中完整使用教程

閱讀 1741·2019-08-30 11:07
2019年5月所遇知識(shí)點(diǎn)整理

閱讀 1601·2019-08-30 11:00
flex布局的一些好帖子,你值得擁有

閱讀 1478·2019-08-29 14:00
你可能不知道的前端知識(shí)點(diǎn)

閱讀 1873·2019-08-29 12:52
CSS屬性中經(jīng)常出現(xiàn)的百分比

閱讀 2592·2019-08-29 11:11
Taro開發(fā)小程序填坑筆記（一）

閱讀 3453·2019-08-26 12:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章