策略模式定义了算法家族，分别封装起来，让他们之间可以互相替换，此模式让算法的变化独立于使用算饭的客户.
先定义一个简单的输入表单：
<!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align: right; float: left; } .form-item-input{ float: left; } .form-item{ width: % ; height: px; line-height: px; } </style> </head> <body> <div> <div> <div><span>用户名：</span></div> <div><input type="text"></div> </div> <div > <div><span>密码：</span></div> <div><input type="text"></div> </div> <div > <div><span>确认密码：</span></div> <div><input type="text"></div> </div> <div > <div><span>邮箱：</span></div> <div><input type="text" ></div> </div> </div> <br> <button >提交</button> <script type='text/javascript' src="https://www.jb51.net/reference/jquery-...min.js"></script> </body> </html>
一般在页面上编辑信息后的提交动作中，都需要对输入的信息进行验证，会看到把很多负责check的代码写在提交函数中或者写在一个独立的check函数中。
比如像下面这样。
$(document).ready(function(){ $('#submit').bind('click', doSubmit); }); function doSubmit(){ var eleUserName = document.getElementById('userName'); if(eleUserName.value === '') { alert('用户名不能为空'); return; } if(eleUserName.length < 6) { alert('用户名长度不能少于6个字符'); return; } if(eleUserName.length > 6) { alert('用户名长度不能多于20个字符'); return; } }
这样的写法功能上肯定能满足要求，但是，会存在几个问题：
1.如果我要在其他页面上使用，那就要将代码进行复制，所谓的复用就变成了复制，代码会存在大量重复。好一点的会把check代码分类整理封装，单还会存在较多的重复复制。
2.如果我要增加一个输入验证，那么就要直接修改提交函数，该函数会显的臃肿，并且是破坏“开闭”原则的。
3.如果修改了提交函数，就要将函数设计的测试全都覆盖一遍，因为，不知道何时就会发生误改或者未知的情况。
改造步骤：
1.将每个验证逻辑看成是一个验证策略并封装成每个验证策略函数，函数参数保持一致，可以接受dom元素，被验证的值，错误消息，定制参数。
2.定义验证器，可将验证策略函数导入，也可以添加。
3.验证器提供验证方法，用于验证时的调用，其内部调用具体的验证策略函数。
4.验证调用。
步骤1.
把每一个if都看成一种校验的业务规则，把每种业务规则作为一个单独的策略函数，将所有的策略函数封装成一个策略对象。
var validationStrategies = { isNoEmpty: function(element, errMsg, value) { if(value === '') { return this.buildInvalidObj(element, errMsg, value ); } }, minLength: function(element, errMsg, value, length) { if(value.length < length){ return this.buildInvalidObj(element, errMsg, value); } }, maxLength: function(element, errMsg, value, length) { if(value.length > length){ return this.buildInvalidObj(element, errMsg, value); } }, isMail: function(element, errMsg, value, length) { var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; if(!reg.test(value)){ return this.buildInvalidObj(element, errMsg, value); } } };
所有函数的参数的前3个都保持一致，而且是必须的，表示被验证的DOM元素，错误消息，被验证的值，第4个开始由函数自身的验证规则决定定制的参数，可有多个参数。
“buildInvalidObj”方法只是把前3个参数打成一个错误对象进行返回，只要验证不通过就会返回这个错误对象。
根据依赖倒置原则，高层次的模块不应该依赖于低层次的模块，因此不能让验证的调用方直接使用。
通过验证器的方式进行封装和抽象。
步骤2：
定义验证器，可以将所有验证策略导入其内，也可以单独添加验证策略函数。
//输入验证器 function InputValidators(){ this.validators = []; this.strategies = {}; } //从策略对象导入验证策略函数 //参数: // strategies: 包含各种策略函数的对象 InputValidators.prototype.importStrategies = function(strategies) { for(var strategyName in strategies) { this.addValidationStrategy(strategyName, strategies[strategyName]); } }; //添加验证策略函数 //参数: // name: 策略名称 // strategy: 策略函数 InputValidators.prototype.addValidationStrategy = function(name, strategy){ this.strategies[name] = strategy; };
步骤3：
添加验证方法，接受外部调用。
第一个参数rule，设置成验证规则，比如 "minLength:6"，通过下面的代码会生成对具体策略函数的调用，调用会压到缓存中，等待一起调用。
":6"表示策略函数根据自身规则所定制的参数。