JavaScript 戦略パターン

今回は、Javascriptの戦略モードと、JavaScript戦略モードの注意事項について、実際の事例を見てみましょう。

戦略パターンとは、一連のアルゴリズムを定義し、各アルゴリズムをカプセル化し、それらを交換可能にすることを指します。 Strategy パターンを使用すると、アルゴリズムを使用するクライアントとは独立してアルゴリズムを変更できます。

戦略パターンは、多くの 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)); //11200console.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()); //11200console.log(jerry.getBouns()); //14000jerry.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(&#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();
    }
}

を含む

フォーム検証

です。この方法で実装されたコード:

関数が肥大化して if 判定が多く含まれる

関数が柔軟性に欠け、オープンクローズ原則に違反する

関数の再利用性が低い 同様の検証を必要とするフォームを追加すると、コピーできるのは 1 回だけです

ストラテジー パターンはフォーム検証を実装します

// 策略对象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();
    }
}

ストラテジー パターンは、主に一連のアルゴリズムを対象とし、各アルゴリズムを共通のインターフェイスを持つ独立したクラスにカプセル化して、それらを置き換えることができます。お互い。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS継承の詳しい説明

ノードファイルの一括名前変更

以上がJavaScript 戦略パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。