JavaScript观察者模式

观察者模式:

是一对多的模式,当订阅到某个对象上,当该对象改变时,将会通知所有依赖它的对象。

在js中,很多都是观察者模式,比如事件的click,先在某个元素上注册一个onclick事件,但并不知道该click事件什么时候会触发,待等到用户触发的时候再执行函数。类似的,在node中Events事件也是观察者模式,emit触发某个事件,然后再on事件中就会收到事件触发的信息。

观察者模式可以替代异步的callback,在时间上可以非同步,弱化对象之间的联系。

其实观察者模式的主要特点就是先找个对象将注册监听的函数放进去,一般为数组存放,之后当需要触发事件时,将数组中的函数拿出来循环遍历。

举个简单的例子,例如:
当登录以后,刷新网页头部的某些信息,比如用户名,会员等级,积分等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var event = {
listeners: [],
addListener = function(fn) {
this.listeners.push(fn);
},
emit = function() {
for(var i = 0; i < this.listeners.length; i++) {
this.listeners[i].apply(this, arguments);
}
}
};

var nameRefresh = function() {
console.log('name refresh');
};

var vipRefresh = function() {
console.log('vip refresh');
};

var scoreRefresh = function() {
console.log('score refresh');
};

// 注册事件
event.addListener(nameRefresh);
event.addListener(vipRefresh);
event.addListener(scoreRefresh);

// 当登录后调用emit

event.emit();

当然,观察者模式也是有缺点的,如果注册监听了某个事件,但是该事件一直都未触发过,那么该注册的函数将会一直存在内存中,虽然可以弱化对象之间的联系,但是如果过度使用的话,出现bug会很难debug。


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