JavaScript 戦略パターン

php中世界最好的语言
リリース: 2018-03-13 17:44:11
オリジナル
1611 人が閲覧しました

今回は、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
ログイン後にコピー

フォーム

として説明されています 戦略パターンを理解する別の例は、通常、複数のフィールドの妥当性判断

を含む

フォーム検証

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

関数が肥大化して 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート