装饰者模式

最后更新于:2022-04-01 10:04:08

有时我们不希望某个类天生就非常庞大,一次性包含许多职责。那么我们就可以使用装饰着模式。 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象。 装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链。 ### 一、不改动原函数的情况下,给该函数添加些额外的功能 #### 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); // 报错“Uncaught TypeError: Illegal invocation” ~~~ 因为_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; return function() { beforefn.apply(this, arguments); // 新函数接收的参数会被原封不动的传入原函数 return _self.apply(this, arguments); }; }; ~~~ ~~~ /* 让新添加的函数在原函数之后执行(后置装饰)*/ Function.prototype.after = function(afterfn) { var _self = this; return function() { var ret = _self.apply(this, arguments); afterfn.apply(this, arguments); return ret; }; }; ~~~ ~~~ document.getElementById = document.getElementById.before(function() { console.log(1); }); ~~~ ### 三、避免污染原型 ~~~ var before = function(fn, beforefn) { return function() { beforefn.apply(this, arguments); return fn.apply(this, arguments); }; }; var after = function(fn, afterfn) { return function() { var ret = fn.apply(this, arguments); afterfn.apply(this, arguments); return ret; }; }; document.getElementById = before(document.getElementById, function(){ console.log(1); }); ~~~ ### 四、示例–插件式的表单验证 结合[《JavaScript设计模式–策略模式》](http://blog.csdn.net/ligang2585116/article/details/50365199)中的【表单验证】,运用到ajax提交数据验证,效果很棒! 修改上述before方法 ~~~ var before = function(fn, beforefn) { return function() { if(beforefn.apply(this, arguments) === false) { // beforefn返回false,直接return,不执行后面的原函数 return; } return fn.apply(this, arguments); }; }; ~~~ ~~~ /* 模拟数据验证*/ var validate = function() { if(username === "") { console.log("验证失败!"); return false; } return true; } /* 模拟ajax提交*/ var formSubmit = function() { console.log("提交!!!"); } username = 1; formSubmit = before(formSubmit, validate); // 提交!!! formSubmit(); username = ""; formSubmit = before(formSubmit, validate); // 验证失败! formSubmit(); ~~~ ### 五、装饰者模式和代理模式 **相同点**: 这两种模式都描述了怎么为对象提供一定程度上的间接引用,它们的实现部分都保留了对另外一个对象的引用,并且向那个对象发送请求。 **区别:** (1)代理模式:当直接访问本地不方便或者不符合需求时,为这个本体提供一个替代者。本地定义关键功能,而代理提供或拒绝对它的访问,或者在访问本体之前走一些额外的事情。(其做的事情还是跟本体一样) (2)装饰者模式:为对象动态加入行为。(一开始不能确定对象的全部功能,实实在在的为对象添加新的职责和行为) 转载请标明出处:[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
';