JavaScript装饰者模式
2021-01-03 本文已影响0人
晓蟲QwQ
给对象动态添加或修改功能。在静态语言中通过新对象引用旧对象地方式添加，最终形成包装链。
在JavaScript中可以使用AOP来实现装饰模式
插件式的表单验证
<body>
用户名： <input type="text" name="username" id="username" value="" />
密码： <input type="password" name="passwrod" id="passwrod" value="" />
<input type="button" id="submitBtn" value="提交" />
</body>
<script type="text/javascript">
var username = document.getElementById('username'),
password = document.getElementById('passwrod'),
submitBtn = document.getElementById('submitBtn');
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('用户名不能为空');
return false;
}
if( password.value ==='' ){
alert('密码不能为空');
}
}
var formSubmit = function(){
var param = {
username: username.value,
password: password.value
}
ajax('http://xxx.com/login',param);
}
//添加装饰
formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
formSubmit();
}
- 以上的装饰模式会叠加函数的作用域，装饰链过长会影响性能。
- 由于是放回新函数，所以会丢失原函数的属性。
