用AOP装饰函数，实现插件式表单验证
2018-09-25 本文已影响1人
悟C
之前用策略模式实现了表单的验证，现在学习了装饰模式发现实现表单验证更简洁，意图和目的更明确。
下面来看一下，装饰函数实现的插件式表单验证:
<body>
<input type="text" id="username">
<button id="submitBtn">按钮</button>
<script>
var submitBtn = document.getElementById('submitBtn');
var username = document.getElementById('username');
Function.prototype.before = function(beforefn) {
var __self = this;
return function() {
if (beforefn.apply(this, arguments) === false) {
return;
}
return __self.apply(this, arguments);
}
}
var validata = function() {
if (username.value === '') {
alert('username不能为空')
return false;
}
}
var formSubmit = function() {
var param = {
username: username.value
};
console.log('进行ajax请求', param);
}
formSubmit = formSubmit.before(validata);
submitBtn.onclick = function() {
formSubmit();
}
</script>
</body>
通过实现一个before，让formSubmit运行之前先运行beforefn。如果beforefn返回false，就不执行formSubmit函数。
通过before我们就可以很好的分离提交ajax请求和数据验证，让彼此的职责更明确。
不过要注意：这种装饰方式也叠加了函数的作用域，如果装饰的链条过长，性能上会受一点影响。
