前端学习笔记之观察者模式


观察者模式也称”发布-订阅”模式,它的作用就是当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,自动刷新对象状态

举个生活比较常见常见的例子,比如你去面试之后,面试官看你表现不错,最后会跟你要联系方式,以便之后可以联系你。在这角色扮演当中,你就是“订阅者”,面试官就是“发布者”。

那么发布订阅模式是咋实现的呢?

思路

  1. 给定一个发布者
  2. 面试者将联系方式给发布者
  3. 发布者的一个列表有各种职位(web端的,java 的),里面记载回调函数以便通知这些面试者
  4. 最后发布消息的时候,会遍历这个列表的职位的回调函数,告诉面试者面试这个职位是通过还是不通过
  5. 如果面试者取消了订阅,那么将回调函数和之前的回调函数作对比,如果相等,就将这个面试者的上班通知去掉
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
var Event = (function() {
var events = {}; //发布者
//subscribe也就是订阅,post 代表面试者要面的职位,callback表示为回调函数
function subscribe(post, callback) {
events[post] = events[post] || []; //发布者的列表里有没有这个面试职位,如果没有就创建一个空数组
events[post].push(callback);
}
//publish 表示发布
function publish() {
var post = Array.prototype.shift.call(arguments); //第一个参数指定“键”
var fns = events[post]; //设置缓存,提高性能
if (!fns) { //如果发布者的列表里没有这个职位,那肯定是不能发布
return;
}
for (var i = 0; i < fns.length; i++) { //遍历当前的职位的数组里有几个面试者
fns[i].apply(this, arguments);
}
}
//unsubscribe 表示取消订阅
function unsubscribe(post, fn) {
var fns = events[post];
if (fns) {
if (fn) {
for (var i = fns.length; i >= 0; i--) {
if (fns[i] === fn) fns.splice(i, 1);
}
} else {//如果没有传入fn回调函数,直接取消post对应消息的所有订阅
fns = [];
}
} else {//如果发布者的列表没有这个职位,直接 return
return;
}
}
return {
subscribe: subscribe,
publish: publish,
unsubscribe: unsubscribe
};
})();

测试:

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
var fn1 = function(time) {
console.log("小明你通过了面试,上班时间:" + time);
};
var fn2 = function(time) {
console.log("小强你通过了面试,上班时间:" + time);
};
//小明将联系方式给了发布者,发布者(hr)觉得小明不错,可以通过,于是在列表(java)里写下了一些回调函数,到时候发布的时候将上班时间告诉小明
Event.subscribe("java", fn1);
//小强也订阅了
Event.subscribe("java", fn2);
Event.publish("java", "2017-10-01");
/*输出:
小明你通过了面试,上班时间:2017-10-01
小强你通过了面试,上班时间:2017-10-01
*/
Event.unsubscribe("java", fn1);//删除小明的上班通知
Event.publish("java", "2017-10-01");
/*输出:
小强你通过了面试,上班时间:2017-10-01
*/

参考

Javascript异步编程的4种方法
js设计模式笔记 - 观察者模式

-------------本文结束感谢您的阅读-------------

本文标题:前端学习笔记之观察者模式

文章作者:shenzekun

发布时间:2017年10月05日 - 15:10

最后更新:2017年11月13日 - 07:11

原始链接:http://www.shenzekun.cn/前端学习笔记之观察者模式.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励我继续创作!