javascript 设计模式(2) —— 策略模式

实现功能：使用Javascript 中的策略模式来实现 根据每一位员工的年底业绩考核，来核算年终奖的需求。

第一种（不推荐）

1.我们先用我们熟悉的js代码来实现这个功能

var calculateBonus = function(salary,perLevel){
    if( perLevel === 'S'){
        return salary * 4 ; 
    }

    if(perLevel === 'A'){
        return salary * 3 ;
    }

    if(perLevel === 'B'){
        return salary * 2;
    }
}
var result = calculateBonus(10000,'S');
console.log(result); // 40000 ;

结果是显而易见的：
1、 当我们的评选等级。越来越多的时候，我们的calculateBonus 函数就会越来越大，而且乱
2、我们的calculateBonus 函数 缺乏弹性，如果我们新增一种或者 10 中评选方案的话，
那么我们必须深入的改变 我们的calculateBonus 函数
3、算法的 复用性差，如果在别的地方需要 这个 奖金的算法的时候，我们只有复制这段代码了。

第二种（推荐）

// 定义执行函数
var methods = {
    S: function(salary){
        return salary * 4 ;
    } ,

    A: function(salary){
        return salary * 3 ;
    },
    
    B: function(salary){
        return salary * 2 ;
    },

    C: function(salary){
        return salary * 1 ;
    }  
}
//直接查找特定等级，执行该函数
var calculateBonus = function( perLevel ,salary){
    return methods[perLevel](salary);
}
var xiao = calculateBonus('S',10000);
console.log(xiao);  //40000

应用：给某个文本输入框添加多种校验规则

// HTML
<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>

/// javascript
//  用户名不能为空。
//  密码长度不能少于 6 位。
//  手机号码必须符合格式。
/***********************策略对象**************************/

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 类**************************/ 
 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; 
	 }
};