js 设计模式之策略模式

策略模式的定义是：定义一系列算法，把他们一个一个封装起来，并且是他们可以相互替代。

 <form action="http:// xxx.com/register" id="registerForm" method="post">
     请输入用户名：<input type="text" name="userName"/ >
     请输入密码：<input type="text" name="password"/ >
     请输入手机号码：<input type="text" name="phoneNumber"/ >
     <button>提交</button>
 </form>
 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;
         }
     }
 }; 
 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;
     }
   }
 }; 


 var registerForm = document.getElementById( 'registerForm' );
 var validataFunc = function(){
   var validator = new Validator();
   validator.add( registerForm.userName, [{
     strategy: 'isNonEmpty',
     errorMsg: '用户名不能为空'
   }, {
     strategy: 'minLength:6',
     errorMsg: '用户名长度不能小于 10 位'
   }]);
     validator.add( registerForm.password, [{
     strategy: 'minLength:6',
     errorMsg: '密码长度不能小于 6 位'
   }]);
   validator.add( registerForm.phoneNumber, [{
     strategy: 'isMobile',
     errorMsg: '手机号码格式不正确'
   }]);
     var errorMsg = validator.start();
     return errorMsg;
   }
   registerForm.onsubmit = function(){
     var errorMsg = validataFunc();
     if ( errorMsg ){
         alert ( errorMsg );
     return false;
  } 

}

策略模式应用案例