Javascriptで戦略パターンを実装する方法

概要

戦略パターンは、JavaScript デザインパターンにおける動作デザインパターンです。

意味：

一連のアルゴリズムを定義し、これらの各アルゴリズムを戦略クラス（メソッド）にカプセル化し、変更されない部分と可変部分を分離すると、これらのアルゴリズムを互いに置き換えることができます。

俗語による説明:

実際、いわゆる戦略モードは、異なる戦略に従って異なるメソッドを実行することを指し、if-else 分岐判断と非常によく似ていますが、戦略モードは複数の条件判断ステートメントを解決するために使用されます。

コードの実装

必要：

年末が近づいてきたため、ある企業は年末ボーナスを前倒しで支給することを決めました。しかし、年末ボーナスの計算には一定のルールがあり、年末ボーナスの額は業績評価と密接に関係しています。そのため、ある企業の年末ボーナス計画は次のようになります。

業績評価がSの従業員の場合、年末ボーナスは月給の4倍になります。

業績評価がAの従業員の場合、年末ボーナスは月給の3倍になります。

業績評価がBの従業員の場合、年末ボーナスは月給の2倍になります。

これを見て、プログラムを書き始めることができます。一般的に、ほとんどのコードは次のようになります。

関数 calculateBonus(レベル, 給与){
    if(レベル === 'S'){
        給与の返還*4
    }
    
    if(レベル === 'A'){
        給与返還*3
    }

    if(レベル === 'B'){
        給与返還*2
    }
}

console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000

上記のコードを使用して現在のニーズを解決することに問題はありませんが、プログラム設計の観点から、上記のコードはまだ最適化できます。この方法は比較的大きく、分岐判断が多く、柔軟性に欠けるため、年末ボーナスプランが変更された場合、Cプランを追加する必要がありますか？メソッドに分岐判断を追加する必要がありますか?これはオープン・クローズ原則に違反します。

最適化：

var 戦略 = {
    "S": 関数（給与）{
        給与返還*4
    },
    "A": 関数（給与）{
        給与の返還*3
    },
    "B": 関数（給与）{
        給与返還*2
    }
}

var calculateBonus =function(level,salary){
    リターン戦略[レベル](給与);
} 
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000

上記のコードを最適化した後、戦略パターンを使用してコードを変換します。戦略オブジェクトを定義し、calculateBonus がユーザーが渡したレベルと給与に応じて年末ボーナスの金額を計算できることがわかります。変換後、コードの構造はより簡潔になります。

Web 開発では、ログインページの登録機能とログイン機能はすべてフォームの送信を必要としますが、送信プロセス中に検証とスクリーニングを実行する必要があり、検証ルールを満たさないものは直接送信されません。デザインパターンを学習する前は、検証も上記と同じで、複数の if ブランチを使用していましたが、現在は戦略パターンを使用してフォーム検証を実装しています。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
</head>
<本文>
        <フォームアクション="http://xxx.com/register" id="registerForm" メソッド="post">
            ユーザー名を入力してください: <input type="text" name="userName"/ >
            パスワードを入力してください: <input type="text" name="password"/ >
            電話番号を入力してください: <input type="text" name="phoneNumber"/ >
            <button>送信</button>
        </フォーム>
</本文>
<スクリプト>
        // 戦略クラスのアルゴリズム検証ルールを定義する var strategies = {
        isNonEmpty: 関数(値、エラーメッセージ){
            if ( 値 === '' ) {
                errorMsg を返します。
            }
        },
        minLength: 関数(値、長さ、エラーメッセージ){
            （値の長さ<長さ）の場合{
                errorMsg を返します。
            }
        },
        isMobile: 関数(値、エラーメッセージ){
            if ( !/(^1[3|5|8][0-9]{9}$)/.test( 値 ) ){
                errorMsg を返します。
            }
        }
    };
    //バリデータクラス var Validator = function(){
        // 検証ルールを保存します this.cache = [];
    };
    //検証ルールを追加するメソッド Validator.prototype.add = function( dom, rules ){
        var self = this;
        for ( var i = 0, ルール; ルール = ルール[ i++ ]; ){
            (関数(ルール){
                //検証ルールオブジェクト内の戦略属性の値を分割します。var strategyAry = rule.strategy.split( ':' );
                var errorMsg = ルール.errorMsg;
                self.cache.push(関数(){
                    //検証ルール オブジェクトの strategy 属性の最初の値を返して、それを strategy に格納します。var strategy = strategyAry.shift();
                    // 構成パラメータ strategyAry.unshift( dom.value );
                    //アセンブリパラメータ strategyAry.push( errorMsg );
                    //戦略オブジェクトの実行メソッドを見つけて、それをキャッシュ変数に格納します。 return strategies[ strategy ].apply( dom, strategyAry );
                });
                console.log(戦略Ary);
            }）（ ルール ）
        }
    };
    //検証メソッドを開始する Validator.prototype.start = function(){
        ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
             //ループキャッシュ実行メソッドの検証 var errorMsg = validatorFunc();
            //実行戦略オブジェクトメソッドで errorMsg が返された場合、メソッドがエラーを報告した (検証ルールに合格できなかった) ことを意味します。
            if (エラーメッセージ){
                errorMsg を返します。
            }
        }
    };

    // 検証を呼び出す var registerForm = document.getElementById( 'registerForm' );
    //検証ルールをカスタマイズするメソッドを定義する var validataFunc = function(){
        //オブジェクトをインスタンス化します var validator = new Validator();
        //検証ルールをカスタマイズvalidator.add(registerForm.userName, [{
            戦略: 'isNonEmpty'、
            errorMsg: 'ユーザー名は空にできません'
        }, {
            戦略: 'minLength:6',
            errorMsg: 'ユーザー名は 10 文字未満にすることはできません'
        }]);
        バリデーター.add( registerForm.password, [{
            戦略: 'minLength:6',
            errorMsg: 'パスワードの長さは 6 文字未満にできません'
        }]);
        //ループ内で検証を実行するメソッドを呼び出します var errorMsg = validator.start();
        errorMsg を返します。
    }
    //送信ボタンをクリックする（送信イベント）
    registerForm.onsubmit = 関数(){
        //上記のカスタム検証メソッドを実行します var errorMsg = validataFunc();
        //errorMsgが存在する場合、検証が失敗したことを意味します if (errorMsg){
            アラート ( errorMsg );
            false を返します。
        }

    };
</スクリプト>
</html>

戦略パターンを使用すると、フォーム検証における大規模な繰り返し if-else 判断などの問題を解決できます。上記のコードには詳細なコメントを付けました。デザインパターンを学ぶには、コードを注意深く味わい、アイデアを学ぶ必要があります。とにかく、戦略パターンの主なアイデアの 1 つは、一連のアルゴリズムを定義し、パラメーターを渡し、異なるパラメーターに応じて異なるアルゴリズムルールを実行することです。