javascript设计模式实践之策略模式--输入验证
2015-11-27 13:35
316 查看
策略模式中的策略就是一种算法或者业务规则，将这些策略作为函数进行封装，并向外提供统一的调用执行。
先定义一个简单的输入表单：
一般在页面上编辑信息后的提交动作中，都需要对输入的信息进行验证，会看到把很多负责check的代码写在提交函数中或者写在一个独立的check函数中。
比如像下面这样。
这样的写法功能上肯定能满足要求，但是，会存在几个问题：
1.如果我要在其他页面上使用，那就要将代码进行复制，所谓的复用就变成了复制，代码会存在大量重复。好一点的会把check代码分类整理封装，单还会存在较多的重复复制。
2.如果我要增加一个输入验证，那么就要直接修改提交函数，该函数会显的臃肿，并且是破坏“开闭”原则的。
3.如果修改了提交函数，就要将函数设计的测试全都覆盖一遍，因为，不知道何时就会发生误改或者未知的情况。
改造步骤：
1.将每个验证逻辑看成是一个验证策略并封装成每个验证策略函数，函数参数保持一致，可以接受dom元素，被验证的值，错误消息，定制参数。
2.定义验证器，可将验证策略函数导入，也可以添加。
3.验证器提供验证方法，用于验证时的调用，其内部调用具体的验证策略函数。
4.验证调用。
步骤1.
把每一个if都看成一种校验的业务规则，把每种业务规则作为一个单独的策略函数，将所有的策略函数封装成一个策略对象。
所有函数的参数的前3个都保持一致，而且是必须的，表示被验证的DOM元素，错误消息，被验证的值，第4个开始由函数自身的验证规则决定定制的参数，可有多个参数。
“buildInvalidObj”方法只是把前3个参数打成一个错误对象进行返回，只要验证不通过就会返回这个错误对象。
根据依赖倒置原则，高层次的模块不应该依赖于低层次的模块，因此不能让验证的调用方直接使用。
通过验证器的方式进行封装和抽象。
步骤2：
定义验证器，可以将所有验证策略导入其内，也可以单独添加验证策略函数。
步骤3：
添加验证方法，接受外部调用。
第一个参数rule，设置成验证规则，比如 "minLength:6"，通过下面的代码会生成对具体策略函数的调用，调用会压到缓存中，等待一起调用。
":6"表示策略函数根据自身规则所定制的参数。
通过一个check函数来调用所有的验证。并将错误的结果进行返回。
步骤4：
在需要验证的地方，先new一个验证器对象。
将包含验证策略函数的对象导入，或者单独添加验证策略函数。
可以看出，不同的验证策略我们可以预先封装进策略对象中，也可以根据实际情况即时添加。
然后通过添加验证方法将需要验证的策略，被验证的dom元素，错误消息，被验证的值添加进验证器中，这样避免了直接调用策略对象，降低了耦合性。
调用验证器的check执行所有的验证。
check返回的是错误对象，我们可以在check后通过该对象统一地对DOM元素进行提示性操作，比如设置焦点，选中内容，或者为输入框外部包上一层红色的样式。
至此，可以看出通过策略模式的改造，输入验证时，我们只需要关心用哪个验证规则，采用什么样的提示性信息即可，不再暴露实现细节，方便调用，方便后续的扩展和组件化。
全部代码：
先定义一个简单的输入表单：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.form{
width: 400px;
height: 200px;
#margin: 0px auto;
}
.form-item-label{
width:100px;
text-align: right;
float: left;
}
.form-item-input{
float: left;
}
.form-item{
width: 100% ;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class='form'>
<div class="form-item">
<div class='form-item-label'><span>用户名：</span></div>
<div class='form-item-input'><input id='userName' name='用户名' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>密码：</span></div>
<div class='form-item-input'><input id='password' name='密码' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>确认密码：</span></div>
<div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>邮箱：</span></div>
<div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>
</div>
</div>
<br>
<button id='submit' >提交</button>
<script type='text/javascript' src="../reference/jquery-1.11.3.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"表示策略函数根据自身规则所定制的参数。
//添加验证方法
//参数:
// rule: 验证策略字符串
// element: 被验证的dom元素
// errMsg: 验证失败时显示的提示信息
// value: 被验证的值
InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {
var that = this;
var ruleElements = rule.split(":");
this.validators.push(function() {
var strategy = ruleElements.shift();
var params = ruleElements;
params.unshift(value);
params.unshift(errMsg);
params.unshift(element);
return that.strategies[strategy].apply(that, params);
});
};通过一个check函数来调用所有的验证。并将错误的结果进行返回。
//开始验证
InputValidators.prototype.check = function() {
for(var i = 0, validator; validator = this.validators[i++];){
var result = validator();
if(result) {
return result;
}
}
};步骤4：
在需要验证的地方，先new一个验证器对象。
var validators = new InputValidators();
将包含验证策略函数的对象导入，或者单独添加验证策略函数。
validators.importStrategies(validationStrategies);
validators.addValidationStrategy('isEqual', function(element, errMsg, value1, value2) {
if(value1 !== value2) {
return this.buildInvalidObj(element, errMsg, value1 );
}
});可以看出，不同的验证策略我们可以预先封装进策略对象中，也可以根据实际情况即时添加。
然后通过添加验证方法将需要验证的策略，被验证的dom元素，错误消息，被验证的值添加进验证器中，这样避免了直接调用策略对象，降低了耦合性。
var eleUserName = document.getElementById('userName');
validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value);
validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
var elePassword = document.getElementById('password');
validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value);
validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
var eleRepassword = document.getElementById('repassword');
validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value);
validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value);
var eleMail = document.getElementById('mail');
validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value);
validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);调用验证器的check执行所有的验证。
var result = validators.check();
if(result){
alert(result.errMsg);
result.element.focus();
result.element.select();
return false;
}check返回的是错误对象，我们可以在check后通过该对象统一地对DOM元素进行提示性操作，比如设置焦点，选中内容，或者为输入框外部包上一层红色的样式。
至此，可以看出通过策略模式的改造，输入验证时，我们只需要关心用哪个验证规则，采用什么样的提示性信息即可，不再暴露实现细节，方便调用，方便后续的扩展和组件化。
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.form{
width: 400px;
height: 200px;
#margin: 0px auto;
}
.form-item-label{
width:100px;
text-align: right;
float: left;
}
.form-item-input{
float: left;
}
.form-item{
width: 100% ;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class='form'>
<div class="form-item">
<div class='form-item-label'><span>用户名：</span></div>
<div class='form-item-input'><input id='userName' name='用户名' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>密码：</span></div>
<div class='form-item-input'><input id='password' name='密码' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>确认密码：</span></div>
<div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>邮箱：</span></div>
<div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>
</div>
</div>
<br>
<button id='submit' >提交</button>
<script type='text/javascript' src="../reference/jquery-1.11.3.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#submit').bind('click', doSubmit);
});
function doSubmit(){
var validators = new InputValidators();
validators.importStrategies(validationStrategies);
validators.addValidationStrategy('isEqual', function(element, errMsg, value1, value2) {
if(value1 !== value2) {
return this.buildInvalidObj(element, errMsg, value1 );
}
});
var eleUserName = document.getElementById('userName'); validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value); validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value); validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value); var elePassword = document.getElementById('password'); validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value); validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value); validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value); var eleRepassword = document.getElementById('repassword'); validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value); validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value); validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value); validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value); var eleMail = document.getElementById('mail'); validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value); validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);
var result = validators.check();
if(result){
alert(result.errMsg);
result.element.focus();
result.element.select();
return false;
}
alert('验证通过');
}
//输入验证器
function InputValidators(){
this.validators = [];
this.strategies = {};
//this.from(validationStrategies);
}
//添加验证方法
//参数:
// rule: 验证策略字符串
// element: 被验证的dom元素
// errMsg: 验证失败时显示的提示信息
// value: 被验证的值
InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {
var that = this;
var ruleElements = rule.split(":");
this.validators.push(function() {
var strategy = ruleElements.shift();
var params = ruleElements;
params.unshift(value);
params.unshift(errMsg);
params.unshift(element);
return that.strategies[strategy].apply(that, params);
});
};
//添加验证策略函数
//参数:
// name: 策略名称
// strategy: 策略函数
InputValidators.prototype.addValidationStrategy = function(name, strategy){
this.strategies[name] = strategy;
};
//从策略对象导入验证策略函数
//参数:
// strategies: 包含各种策略函数的对象
InputValidators.prototype.importStrategies = function(strategies) {
for(var strategyName in strategies) {
this.addValidationStrategy(strategyName, strategies[strategyName]);
}
};
//验证失败时，将相关的错误信息打包返回
//参数:
// element: dom元素
// errMsg: 验证失败时的提示消息
// value: 被验证的值
InputValidators.prototype.buildInvalidObj = function(element, errMsg, value){
return {
'value': value,
'element': element,
'errMsg': errMsg
};
};
//开始验证
InputValidators.prototype.check = function() {
for(var i = 0, validator; validator = this.validators[i++];){
var result = validator();
if(result) {
return result;
}
}
};
//验证策略对象，包含默认的验证策略函数
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);
}
}
};
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Json字符串和Json对象的简单总结
- div滚动条沉底
- Java,JavaScript中斜杠和反斜杠的替换
- JavaScript location.replace() 方法：加载一个新文档（页面）替换当前文档
- KnockoutJS Documentation-加载和保存json数据
- [Javascript] variable, scope, scope chain, execution context
- js弹出框、对话框、提示框、弹窗总结
- JavaScript 本地对象、内置对象、宿主对象
- 看JavaScript设计模式这本书之后的收获（1）
- dcloud Native.js 调用第三方软件（UC打开网页）
- JavaScript 实现base64数据加密
- 精通 JS正则表达式（转）
- javascript:window.history.go(-1)
- JavaScript 函数参数设置默认值
- JavaScript SetInterval与setTimeout的区别
- Js 禁止手机页面拖拽
- 介绍一款js模版引擎handlebars
- jstl标签: c:Foreach详解
- js 方法重载
- js快速打印一个五分制（五颗星）的评分情况