设计模式学习之一 — 策略模式

js设计模式一直是该语言的核心之一，流弊的设计模式可以让代码功能更明显，函数原理更清晰，代码更通读易懂。

引言

js设计模式一直是该语言的核心之一，流弊的设计模式可以让代码功能更明显，函数原理更清晰，代码更通读易懂。js设计模式的应用就像一个匠人，在精心打造自己的艺术品。而我们如果想做一个好匠人，就要懂得应用合适的设计模式。自己最近在学习《JavaScript设计模式与开发实践》，博客作为学习笔记记录。本篇记录第一种设计模式——策略模式。

策略模式介绍

当我们在做表单验证的时候，通常手段是获取字段的值，然后一一用if做判断，看是否符合验证规则。
策略模式的思想让我们摒弃if条件句，把判断句封装为策略函数，如：

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;
		}
	}
}

之后我们再把获取的字段值去调用这些策略函数。
所以，一个基于策略模式的程序至少有两部分组成，第一部分是策略类，策略类封装具体的算法。第二部分是调用执行类，即点击提交按钮后，去调用策略。

我们以提交表单为例，看看基于策略模式下，如何验证表单：

<form id="registerForm" method="POST" action="#">
	<input type="text" name="userName">
	<input type="text" name="password">
	<input type="text" name="phoneNumber">
	<button>提交</button>
</form>
<script>
	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, rules; 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;				
		}
	}
</script>

我们通过add方法，为每个字段添加校验规则，并且每个字段可以有多个校验规则，这样便极具扩展性。添加完规则后，我们便用start方法去执行这些规则。

应用了策略模式后，我们想添加规则只要在add方法中添加参数即可，而不用深入函数内部去增加判断句。代码整体增强了可读性和扩展性，便于后期维护。