学习JavaScript设计模式之装饰者模式
有时我们不希望某个类天生就非常庞大,一次性包含许多职责。那么我们就可以使用装饰着模式。
装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象。
装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链。
一、不改动原函数的情况下,给该函数添加些额外的功能
1.保存原引用
window.onload=function(){ console.log(1); }; var_onload=window.onload||function(){}; window.onload=function(){ _onload(); console.log(2); }
问题:
(1)必须维护中间变量
(2)可能遇到this被劫持问题
在window.onload的例子中没有这个烦恼,是因为调用普通函数_onload时,this也指向window,跟调用window.onload时一样。
2.this被劫持:
var_getElementById=document.getElementById; document.getElementById=function(id){ console.log(1); return_getElementById(id); } return_getElementById(id);//报错“UncaughtTypeError:Illegalinvocation”
因为_getElementById是全局函数,当调用全局函数时,this是指向window的,而document.getElementById中this预期指向document。
3.解决this被劫持:
var_getElementById=document.getElementById; document.getElementById=function(id){ console.log(1); return_getElementById.call(document,id); }
二、用AOP装饰函数
/*让新添加的函数在原函数之前执行(前置装饰)*/ Function.prototype.before=function(beforefn){ var_self=this; returnfunction(){ beforefn.apply(this,arguments);//新函数接收的参数会被原封不动的传入原函数 return_self.apply(this,arguments); }; };
/*让新添加的函数在原函数之后执行(后置装饰)*/ Function.prototype.after=function(afterfn){ var_self=this; returnfunction(){ varret=_self.apply(this,arguments); afterfn.apply(this,arguments); returnret; }; };
document.getElementById=document.getElementById.before(function(){ console.log(1); });
三、避免污染原型
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; }; }; document.getElementById=before(document.getElementById,function(){ console.log(1); });
四、示例–插件式的表单验证
结合《学习JavaScript设计模式之策略模式》中的【表单验证】,运用到ajax提交数据验证,效果很棒!
修改上述before方法
varbefore=function(fn,beforefn){ returnfunction(){ if(beforefn.apply(this,arguments)===false){ //beforefn返回false,直接return,不执行后面的原函数 return; } returnfn.apply(this,arguments); }; };
/*模拟数据验证*/ varvalidate=function(){ if(username===""){ console.log("验证失败!"); returnfalse; } returntrue; } /*模拟ajax提交*/ varformSubmit=function(){ console.log("提交!!!"); }
username=1; formSubmit=before(formSubmit,validate);//提交!!! formSubmit(); username=""; formSubmit=before(formSubmit,validate);//验证失败! formSubmit();
五、装饰者模式和代理模式
相同点:这两种模式都描述了怎么为对象提供一定程度上的间接引用,它们的实现部分都保留了对另外一个对象的引用,并且向那个对象发送请求。
区别:
(1)代理模式:当直接访问本地不方便或者不符合需求时,为这个本体提供一个替代者。本地定义关键功能,而代理提供或拒绝对它的访问,或者在访问本体之前走一些额外的事情。(其做的事情还是跟本体一样)
(2)装饰者模式:为对象动态加入行为。(一开始不能确定对象的全部功能,实实在在的为对象添加新的职责和行为)
希望本文所述对大家学习javascript程序设计有所帮助。