观察者模式(发布/订阅模式)

观察者模式是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。

说的简单些,就是在数据发生改变时,对应的处理函数自动执行。维基的定义中涉及到了主动发出通知,按照这种方式,在angularJS中的事件广播更是中规中矩,但是其缺点是代码的可维护性较差。那么如果不进行主动通知,而是在进行对象属性值设置时,调用相关的处理函数,也可达到同等效果。

源代码

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 页面加载时自动执行
var Observer = (function() {
// 为了防止消息被外部修改,将消息变量设为私有变量
var _message = {};
return {
// 注册信息接口
regist: function(type, fn) {
// 判断消息类型是否存在
if (typeof _message[type] === 'undefined') {
// 将动作推送到消息队列中执行
_message[type] = [fn];
} else {
// 将动作方法推入到对应类型的队列中
_message[type].push(fn);
}
},
// 发布消息接口
fire: function(type, args) {
//如果该消息没有被注册,直接结束
if (!_message[type]) return;
var events = {
type: type, //消息的类型
args: args || {} //消息所携带的数据
}
i = 0, //消息循环变量
len = _message[type].length; //消息动作的长度
for (; i < len; i++) {
//依次执行注册消息所对应的动作序列
_message[type][i].call(this, events);
}
},
// 移除信息接口
remove: function(type, fn) {
// 如果消息队列存在
if (_message[type] instanceof Array) {
//从最后一个消息动作开始遍历
var i = _message[type].length - 1;
for (; i >= 0; i--) {
_message[type][i] === fn && _message[type].splice(i, 1);
}
}
}
}
})();

//订阅消息

Observer.regist('news', function(e) {
console.log(e.type, e.args.msg);
});

Observer.regist('weather', function(e) {
console.log(e.args.title);
console.log(e.args.msg);
});
Observer.regist('weather', function(e) {
console.log(e.args.title);
console.log(e.args.msg);
});
//发布消息
Observer.fire('news', {
msg: '新闻主体内容'
});

Observer.fire('weather', {
title: '杭州天气',
msg: '晴转多云 21-36°C'
});


Observer.fire('weather', {
title: '上海天气',
msg: '晴转多云 22-36°C'
});
Fang Zhen wechat
有事微信联系~
我滴要饭の账号(💚一分也是爱💚)
-------------The End-------------
0%