如何使用策略模式与装饰模式扩展JavaScript表单验证功能-创新互联
这篇文章主要介绍了如何使用策略模式与装饰模式扩展JavaScript表单验证功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
在舟山等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站制作 网站设计制作定制网站制作,公司网站建设,企业网站建设,品牌网站设计,网络营销推广,成都外贸网站制作,舟山网站建设费用合理。简单的表单验证
html结构
Validata
首先先简单地实现以下这个功能
之后再用设计模式丰满
// validata.js var form = document.getElementById('form'), warn = document.getElementById('warn'); var validata = function(){ if(form.username.value === ''){ return warn.textContent = '账号不能为空'; } if(form.password.value === ''){ return warn.textContent = '密码不能为空'; } if(form.phonenum.value === ''){ return warn.textContent = '手机号不能为空'; } var msg = { username: form.username.value, password: form.password.value, phonenum: form.phonenum.value } //ajax('...', msg); ajax提交数据略 return warn.textContent = '用户信息已成功提交至服务器'; } form.submit.onclick = function(){ validata(); }
然后分析以下代码
validata这个函数毫无复用性可言,除此之外存在两个问题
函数同时承担了验证和提交两个职责,违背单一职责原则
验证功能扩展性差,要想添加验证规则就必须深入函数内部,违反开放-封闭原则
所以我们需要对此进行改进
装饰模式重构
先来用装饰模式解决一下函数多职责问题
方法也很简单
改进一下AOP前置装饰函数(Function.prototype.before)
当扩展函数(beforeFn)返回false则不执行当前函数
然后令表单验证函数成为表单提交函数的前置装饰
这样提交前就会进行验证,若验证失败,就不会提交数据
var form = document.getElementById('form'), warn = document.getElementById('warn'); Function.prototype.before = function(beforeFn){ var self = this; return function(){ if(beforeFn.apply(this, arguments) === false) return; return self.apply(this, arguments); } }//改进的AOP前置装饰函数 var validata = function(){ if(form.username.value === ''){ warn.textContent = '账号不能为空'; return false; } if(form.password.value === ''){ warn.textContent = '密码不能为空'; return false; } if(form.phonenum.value === ''){ warn.textContent = '手机号不能为空'; return false; } } var submitMsg = function(){ //将提交的功能从validata函数中提取出来 var msg = { username: form.username.value, password: form.password.value, phonenum: form.phonenum.value } //ajax('...', msg); return warn.textContent = '用户信息已成功提交至服务器'; } submitMsg = submitMsg.before(validata); //让表单验证函数成为表单提交函数的装饰者 form.submit.onclick = function(){ submitMsg(); };
策略模式重构
下面就该解决函数缺乏弹性的问题
使用策略模式就需要有策略对象/类和环境对象/类
毫无疑问策略对象中就应该装着校验规则
又考虑到页面可能不止有一个验证表单
最好写成工厂-类的形式
完整代码如下
var form = document.getElementById('form'), warn = document.getElementById('warn'); Function.prototype.before = function(beforeFn){ var self = this; return function(){ if(beforeFn.apply(this, arguments) === false) return; return self.apply(this, arguments); } } var vldStrategy = { //策略对象-验证规则 isNonEmpty: function(value, warnMsg){ //输入不为空 if(value === '') return warnMsg; }, isLongEnough: function(value, length, warnMsg){ //输入足够长 if(value.length < length) return warnMsg; }, isShortEnough: function(value, length, warnMsg){ //输入足够短 if(value.length > length) return warnMsg; }, isMobile: function(value, warnMsg){ //手机号验证 var reg = /^1[3|5|8][0-9]{9}$/; if(!reg.test(value)) return warnMsg; } } var Validator = function(){ //环境类 this.rules = []; //数组用于存放负责验证的函数 }; Validator.prototype.add = function(domNode, ruleArr){ //添加验证规则 var self = this; for(var i = 0, rule; rule = ruleArr[i++];){ (function(rule){ var strategyArr = rule.strategy.split(':'), warnMsg = rule.warnMsg; self.rules.push(function(){ var tempArr = strategyArr.concat(); var ruleName = tempArr.shift(); tempArr.unshift(domNode.value); tempArr.push(warnMsg); return vldStrategy[ruleName].apply(domNode, tempArr); }); })(rule); } return this; }; Validator.prototype.start = function(){ //开始验证表单 for(var i = 0, vldFn; vldFn = this.rules[i++];){ var warnMsg = vldFn(); if(warnMsg){ warn.textContent = warnMsg; return false; } } } var vld = new Validator(); vld.add(form.username, [ { strategy: 'isNonEmpty', warnMsg: '账号不能为空' }, { strategy: 'isLongEnough:4', warnMsg: '账号不能小于4位' }, { strategy: 'isShortEnough:20', warnMsg: '账号不能大于20位' } ]).add(form.password, [ { strategy: 'isNonEmpty', warnMsg: '密码不能为空' } ]).add(form.phonenum, [ { strategy: 'isNonEmpty', warnMsg: '手机号不能为空' }, { strategy: 'isMobile', warnMsg: '手机号格式不正确' } ]); var submitMsg = function(){ var msg = { username: form.username.value, password: form.password.value, phonenum: form.phonenum.value } //ajax('...', msg); return warn.textContent = '用户信息已成功提交至服务器'; } submitMsg = submitMsg.before(vld.start.bind(vld)); form.submit.onclick = function(){ submitMsg(); }; //这里只是模拟提交,实际应该用form.onsubmit
问题分析
总结一下易错的地方还有我敲得时候遇到的问题
Validator.prototype.add = function(domNode, ruleArr){ var self = this; for(var i = 0, rule; rule = ruleArr[i++];){ (function(rule){ var strategyArr = rule.strategy.split(':'), warnMsg = rule.warnMsg; self.rules.push(function(){ var tempArr = strategyArr.concat(); var ruleName = tempArr.shift(); tempArr.unshift(domNode.value); tempArr.push(warnMsg); return vldStrategy[ruleName].apply(domNode, tempArr); }); })(rule); } return this; };
在Validator原型链上的add函数需要注意几个问题
首先添加IIFE立即执行函数解决闭包问题就不用多说了
函数内又嵌套了函数,导致了this被劫持,所以必须缓存this
var self = this;
最开始我没有拷贝这个数组而是直接使用的strategyArr
Validator.prototype.add = function(domNode, ruleArr){ //添加验证规则 var self = this; for(var i = 0, rule; rule = ruleArr[i++];){ (function(rule){ var strategyArr = rule.strategy.split(':'), warnMsg = rule.warnMsg; self.rules.push(function(){ // var tempArr = strategyArr.concat(); var ruleName = strategyArr.shift(); strategyArr.unshift(domNode.value); strategyArr.push(warnMsg); return vldStrategy[ruleName].apply(domNode, strategyArr); }); })(rule); } return this; };
第一次提交没有问题,但再次提交就会报错
这是因为第一次提交后,闭包中的strategyArr已经改变
之后的提交,对这个数组进行操作就不是预期的结果了
在这个地方我犯了一个小错误,导致我断点调试了好长时间 __冏rz
Validator.prototype.start = function(){ //开始验证表单 for(var i = 0, vldFn; vldFn = this.rules[i++];){ var warnMsg = vldFn(); if(warnMsg){ warn.textContent = warnMsg; return false; } } }
改正前的错误代码是这样的
Validator.prototype.start = function(){ //开始验证表单 for(var i = 0, vldFn; vldFn = this.rules[i++];){ var warnMsg = vldFn(); if(warnMsg) warn.textContent = warnMsg; return false; } }
没错,只是因为少加了那层大括号
可能是之前只有一行,后来添加return false的时候忘添加了
这里我只是为了简洁才不写大括号的
我们平时千万不要这么写代码,简直挖坑给自己跳
submitMsg = submitMsg.before(vld.start.bind(vld));
添加装饰者这个地方也要注意
如果不写bind就会发生this劫持,同样会报错
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用策略模式与装饰模式扩展JavaScript表单验证功能”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:如何使用策略模式与装饰模式扩展JavaScript表单验证功能-创新互联
文章分享:http://pwwzsj.com/article/dhcgps.html