利用策略模式与装饰模式扩展JavaScript表单验证功(2)

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表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: