轻松掌握JavaScript装饰者模式
在传统的面向对象语言中，给对象添加功能常常使用继承的方式，但继承的方式会带来问题：当父类改变时，他的所有子类都将随之改变。
当JavaScript脚本运行时，在一个对象中（或他的原型上）增加行为会影响该对象的所有实例，
装饰者是一种实现继承的替代方案，它通过重载方法的形式添加新功能，该模式可以在被装饰者前面（before）或者后面(after)加上自己的行为以达到特定的目的。
装饰者模式是为已有功能动态地添加更多功能的一种方式，把每个要装饰的功能放在单独的函数里，然后用该函数包装所要装饰的已有函数对象，因此，当需要执行特殊行为的时候，调用代码就可以根据需要有选择地、按顺序地使用装饰功能来包装对象。优点是把类（函数）的核心职责和装饰功能区分开了。
我们可以定义工具函数，如下：
Function.prototype.before=function(beforeFn){
varself=this;//保存原函数的引用
returnfunction(){//返回包含了新函数和原函数的代理函数
beforeFn.apply(this,arguments);//执行新函数,且保证this不被劫持
returnself.apply(this,arguments);//执行原函数,并返回原函数的执行结果,并保证this不被劫持
}
};
Function.prototype.after=function(afterFn){
varself=this;
returnfunction(){
varret=self.apply(this,arguments);
afterFn.apply(this,arguments);
returnret;
}
};
这里的参数beforeFn、afterFn即为要为原函数扩展新功能的新函数（添加装饰），它们的唯一区别是执行顺序的不同。如果不想污染Function的原型，可以用下面的方法：
varbefore=function(fn,beforeFn){
returnfunction(){
beforeFn.apply(this,arguments);
returnfn.apply(this,arguments);
}
};
varafter=function(fn,afterFn){
returnfunction(){
varret=fn.apply(this,arguments);
afterFn.apply(this,arguments);
returnret;
}
};
例子：给HTTP请求中带上一个参数防止CSRF攻击
varajax=function(type,url,param){
console.log(param);//发送ajax请求代码略...
};
varbeforeFn=function(type,url,param){
param.Token='Token';
};
ajax=ajax.before(beforeFn);
ajax('get','http://...com/userinfo',{name:'SuFa'});
//{name:'SuFa',Token:'Token'}
通过给ajax函数动态装饰上Token参数，而不是直接在原函数上修改参数，保证了ajax函数仍然是一个纯净的函数，提高了它的可复用性，它可在无需做任何修改的情况下直接拿到别的项目中使用。
例子：表单验证（把验证输入和表单提交的代码分离开来，然后动态的把验证输入功能装饰到表单提交之前，这样一来，我们就可以把验证输入部分写成一个插件的形式，用在不同的项目中）
//验证输入函数
varvalidata=function(){
if(username.value===''){
alert('用户名不能为空');
returnfalse;
}
if(password.value===''){
alert('密码不能为空');
returnfalse;
}
};
//表单提交函数
varformSubmit=function(){
varparam={
username:username.value,
password:password.value
};
ajax('http://xxx.com/login',param);
};
formSubmit=formSubmit.before(validata);
submitBtn.onclick=function(){
formSubmit();
};
参考文献：《JavaScript模式》《JavaScript设计模式与开发实践》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。