JavaScript装饰者模式

装饰者模式:

在不改变对象自身的基础上,在程序运行期间给对象动态地添加新功能。

例如我们要修改以前的一个功能,function a(){...},一般我们的做法是直接在a函数中添加代码,但是这样容易引起bug,万一别处调用了该函数,而我们万一又没测试到,这时可以引入装饰者模式。如:

1
2
3
4
5
6
7
8
9
10
function a(){
console.log('111');
}

var _a = a;

function b(){
_a();
console.log('222');
}

这样在不影响a函数的前提下又复用了a函数的功能。当然a函数的this指向必须是window,如果是document.getElementById 则这时就会报错,解决的方法当然是设置正确的this指向,可采用apply方法调用。

而采用AOP方式实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var before = function( beforefn, fn) {
return function() {
beforefn.apply(this, arguments);
return fn.apply(this, arguments);
}
}
var a = before(
function() {console.log(2)},
function() {console.log(3)}
);
a = before(function() {console.log(1);}, a);
a();

输出:
1
2
3

上面的代码可以使用在比如在提交表单之前可以进行一些基本的验证,比如submit.before(validator);

装饰者模式 vs 代理模式:

装饰者模式和代理模式都提供了对原先的对象的引用,向原对象发送请求。而他们的区别是:
1.代理模式中代理对象和原对象之间的关系是确定的,而装饰者模式用于在原对象的基础上动态添加新功能,也就是一开始关系是不确定的。
2.代理模式通常只有一层对原对象的引用,而装饰者模式经常会形成一条长长的装饰链。
3.装饰者模式是为对象增加新的职责和行为,而代理做的事情还是跟原对象一样。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!