Javascript-Strategiemuster

Dieses Mal werde ich Ihnen den Strategiemodus von Javascript und die Hinweise des Javascript-Strategiemodus vorstellen Schauen Sie mal rein.

Strategiemuster bezieht sich auf die Definition einer Reihe von Algorithmen und die Kapselung jedes Algorithmus, sodass sie durcheinander ersetzt werden können. Das Strategiemuster ermöglicht es dem Algorithmus, sich unabhängig von den Clients zu ändern, die ihn verwenden.

Das Strategiemuster nutzt Technologien und Ideen wie Kombination und Delegation, um viele if-bedingte Anweisungen zu vermeiden

Das Strategiemuster bietet ein Offen-Geschlossen-Prinzip, wodurch der Code leichter verständlich und einfacher wird erweitern

Einfacher Wert

Viele Beispiele mit Leistungsstufe und Gehalt zur Berechnung von Boni als Anleitung

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)); //11200console.log(calculateBouns('C', 8000)); //9600

Rekonstruktion von Strategiemustern

//策略对象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()); //11200console.log(jerry.getBouns()); //14000jerry.setLevel(new ruleB());console.log(jerry.getBouns()); //13000

Formular

Ein weiteres Beispiel für das Verständnis des Strategiemusters ist die Formularvalidierung, die normalerweise mehrere Feldgültigkeitsurteile umfasst

let form = document.getElementById("Form");
form.onsubmit = function(){    if(form.username.value == ''){
        alert('用户名不能为空');        return false;
    }else if(form.username.value.length <= 6){
        alert(&#39;用户名长度不能小于6位&#39;);        return false;
    }else if(form.password.value.length <= 6){
        alert(&#39;密码长度不能小于6位&#39;);        return false;
    }else if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
        alert("手机号码格式不正确");        return;
    }else{
        submit();
    }
}

Code, der wie folgt implementiert wird. Nachteile:

Die Funktion ist aufgebläht und enthält viele Wenn-Urteile.

Die Funktion ist unflexibel und verstößt gegen das Offen-Geschlossen-Prinzip.

Die Funktion ist schlecht wiederverwendbar Ich brauche so etwas. Die Überprüfung kann nur einmal kopiert werden.

Strategiemuster implementiert die Formularüberprüfung.

// 策略对象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: &#39;isEmpty&#39;,errorMsg:&#39;用户名不能为空&#39;},
        {strategy: &#39;minLength:6&#39;,errorMsg:&#39;用户名长度不能小于6位&#39;}
    ]);
    validator.addRule(form.password,[
        {strategy: &#39;minLength:6&#39;,errorMsg:&#39;密码长度不能小于6位&#39;},
    ]);
    validator.addRule(form.phone,[
        {strategy: &#39;illegalPhone&#39;,errorMsg:&#39;手机号格式不正确&#39;},
    ]);    return  validator.check();
};
form.onsubmit = function(){    let errorMsg = validateFunc();    if(errorMsg){
        alert(errorMsg);        return false;
    }else{
        submit();
    }
}

Strategiemuster ist ein Objektverhaltensmuster, das hauptsächlich auf eine Reihe von Algorithmen abzielt und jeden Algorithmus darin kapselt ein unabhängiges Objekt mit einer gemeinsamen Schnittstelle, sodass sie untereinander ersetzt werden können.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erklärung der JS-Vererbung

Batch-Umbenennung von Knotendateien

Das obige ist der detaillierte Inhalt vonJavascript-Strategiemuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!