Modèle de stratégie Javascript-js tutoriel-php.cn

Modèle de stratégie Javascript

php中世界最好的语言

Libérer： 2018-03-13 17:44:11

original

1551 Les gens l'ont consulté

Cette fois, je vais vous présenter le Mode stratégie de Javascript et quelles sont les Notes du mode stratégie Javascript. Ce qui suit est un cas pratique. jetez un oeil.

Le modèle de stratégie fait référence à la définition d'une série d'algorithmes, encapsulant chaque algorithme et en les rendant interchangeables. Le modèle de stratégie permet à l'algorithme de changer indépendamment des clients qui l'utilisent.

Le modèle de stratégie utilise des technologies et des idées telles que la combinaison et la délégation pour éviter de nombreuses instructions conditionnelles

Le modèle de stratégie fournit un principe ouvert-fermé, rendant le code plus facile à comprendre et développer

Valeur simple

De nombreux exemples utilisant l'indice de performance et le salaire pour calculer les primes à titre d'illustrations

let calculateBouns = (level,salary)=>{    if(level==&#39;A&#39;){        return salary * 1.4;
    }else if(level==&#39;B&#39;){        return salary * 1.3;
    }else if(level==&#39;C&#39;){        return salary * 1.2;
    }else{        return salary;
    }
}console.log(calculateBouns(&#39;A&#39;, 8000)); //11200console.log(calculateBouns(&#39;C&#39;, 8000)); //9600

Copier après la connexion

Reconstruction du modèle de stratégie

//策略对象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

Copier après la connexion

Formulaire

Un autre exemple de compréhension du modèle de stratégie est la validation de formulaire, qui implique généralement plusieurs jugements de validité de champ

let form = document.getElementById("Form");
form.onsubmit = function(){    if(form.username.value == &#39;&#39;){
        alert(&#39;用户名不能为空&#39;);        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();
    }
}

Copier après la connexion

code implémenté comme celui-ci Inconvénients :

La fonction est gonflée et contient beaucoup de jugements if

La fonction est inflexible et viole le principe ouvert-fermé

La fonction a une mauvaise réutilisabilité. besoin de quelque chose comme ça La vérification ne peut être copiée qu'une seule fois

Le modèle de stratégie implémente la vérification du formulaire

// 策略对象let strategys = {    isEmpty: (value,errorMsg)=> {        if(value === &#39;&#39;) {            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();
    }
}

Copier après la connexion

Le modèle de stratégie est un modèle de comportement d'objet, qui cible principalement un ensemble d'algorithmes et encapsule chaque algorithme dans un objet indépendant avec une interface commune afin qu'ils puissent être remplacés les uns par les autres.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'héritage JS

Renommage par lots des fichiers de nœuds

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!