jsポリシーモード

紹介する

ポリシーモードの定義は、一連のアルゴリズムを定義し、それらを1つずつカプセル化し、互いに置き換えることができるようにすることである.

プログラム設計では、ある機能を実現するには多くの選択肢があります.

不変の部分と変化の部分を分離することは各設計モードのテーマであり、ポリシーモードも例外ではなく、ポリシーモードの目的はアルゴリズムの使用とアルゴリズムの実現を分離することである.

本文
1.ポリシー・モードを使用したボーナスの計算

元はifで判断され、(1)calculateBonus関数は比較的膨大であり、if-else文が多く含まれているという欠点がある.(2)関数は弾力性に欠けており,新しいパフォーマンスレベルCを追加したり,パフォーマンスSのボーナス係数を5に変更したりするには,オープンクローズの原則に違反するcalculateBonus関数の内部実装に深く入り込まなければならない.(3)アルゴリズムの多重性が悪いが,プログラムの他の場所でボーナスを計算するアルゴリズムを再利用する必要があるとしたら?私たちの選択はコピーと貼り付けだけです.そのため、このコードを再構築する必要があります.

var calculateBonus = function( performanceLevel, salary ){
      if ( performanceLevel === 'S' ){
          return salary * 4;
      }
      if ( performanceLevel === 'A' ){
          return salary * 3;
      }
      if ( performanceLevel === 'B' ){
          return salary * 2;
      }
  };

  calculateBonus( 'B', 20000 ); //   ：40000
  calculateBonus( 'S', 6000 ); //   ：24000

実際にJavaScript言語では、関数もオブジェクトなので、strategyを直接関数として定義するのがもっと簡単で直接的な方法です.同様に、ContextもBonusクラスで表す必要はありません.私たちは依然としてcalculateBonus関数をContextとして使用者の要求を受け入れるために使用しています.改造により、コードの構造がより簡潔になりました:

var strategies = {
      "S": function( salary ){
          return salary * 4;
      },
      "A": function( salary ){
          return salary * 3;
      },
      "B": function( salary ){
          return salary * 2;

      }
  };
  var calculateBonus = function( level, salary ){
      return strategies[ level ]( salary );
  };

  console.log( calculateBonus( 'S', 20000 ) ); //   ：80000
  console.log( calculateBonus( 'A', 10000 ) ); //   ：30000

2.ポリシー・モードによるフォーム検証

フォームチェックの最初のバージョンで、欠点は上記と同じ

です.

    

              ：
             ：

               ：
          
    
    
        var registerForm = document.getElementById( 'registerForm' );
        registerForm.onsubmit = function(){
            if ( registerForm.userName.value === '' ){
                alert ( '       ' );
                return false;
            }
            if ( registerForm.password.value.length < 6 ){
                alert ( '        6  ' );
                return false;
            }
            if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){
                alert ( '         ' );
                return false;
            }
        }
    

ポリシーモードでフォーム検証を再構築します.次に、ポリシーモードでフォーム検証のコードを再構築します.これらの検証ロジックをポリシーオブジェクトにカプセル化するのは明らかです.

var strategies = {
            isNonEmpty: function( value, errorMsg ){
                if ( value === '' ){
                    return errorMsg;
                }
            },
            minLength: function( value, length, errorMsg ){
                if ( value.length < length ){
                    return errorMsg;
                }
            },
            isMobile: function( value, errorMsg ){
                if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                    return errorMsg;
                }
            }
        };

次にValidatorクラスを実装する準備をします.ValidatorクラスはここでContextとして,ユーザの要求を受信しstrategyオブジェクトに委任する.Validatorクラスのコードを与える前に、ユーザーがValidatorクラスにリクエストを送信する方法を事前に理解する必要があります.これは、Validatorクラスのコードを記述する方法を知るのに役立ちます.コードは次のとおりです.

/***********************Validator  **************************/
var Validator = function(){
            this.cache = [];
        };
        Validator.prototype.add = function( dom, rules ){
            var self = this;
            for ( var i = 0, rule; rule = rules[ i++ ]; ){
                (function( rule ){
                    var strategyAry = rule.strategy.split( ':' );
                    var errorMsg = rule.errorMsg;
                    self.cache.push(function(){
                        var strategy = strategyAry.shift();
                        strategyAry.unshift( dom.value );
                        strategyAry.push( errorMsg );
                        return strategies[ strategy ].apply( dom, strategyAry );
                    });
                })( rule )
            }
        };
        Validator.prototype.start = function(){
            for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
                var errorMsg = validatorFunc();
                if ( errorMsg ){
                    return errorMsg;
                }
            }
        };