柒.1.5 发布-订阅模式

柒.1.5.1 什么是发布-订阅模式
举个例子
作为前端工程师的你很关心前端技术，会经常去刷笔者的公众号学习。这样有了新文章你不会第一时间知道；要是忘了刷，过段时间新文章被挤下去之后，你再回来刷，就会可能错过了这篇文章；你要一直保持刷的姿势，很累的。换个轻松点的姿势，你选择了关注笔者的公众号，一有新的文章发布，公众号就会发消息到你的手机通知到你，从此你再也不会错过新文章，新松获取新知识。
定义
发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。
订阅者（Subscriber）把自己想订阅的事件注册（subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（publish event）到调度中心，也就是该事件触发时，由调度中心统一调用（fire event）订阅者注册到调度中心的处理逻辑代码。
柒.1.5.2 优缺点
优点
对象之间解耦
异步编程中，可以更松耦合的代码编写
缺点
创建订阅者本身要消耗一定的时间和内存
虽然可以弱化对象之间的联系，多个发布者和订阅者嵌套一起的时候，程序难以跟踪维护
柒.1.5.3 如何实现
发布-订阅模式的实现思路
创建一个对象；
在该对象上创建一个调度中心，实际上是一个缓存列表；
on 方法用来把函数 fn 都加到缓存列表中，也即订阅者注册事件到调度中心；
emit 方法取到 arguments 里第一个当做 event，根据 event 值去执行对应缓存列表中的函数（发布者发布事件到调度中心，调度中心处理代码）；
off 方法可以根据 event 的值取消订阅；
once 方法只监听一次，调用完毕后删除缓存函数（订阅一次）。
JavaScript代码实现
1
let eventEmitter = {
2
    // 缓存列表
3
    list: {},
4
    // 订阅
5
    on (event, fn) {
6
        let _this = this;
7
        // 如果对象中没有对应的 event 值，也就是说明没有订阅过，就给 event 创建个缓存列表
8
        // 如有对象中有相应的 event 值，把 fn 添加到对应 event 的缓存列表里
9
        (_this.list[event] || (_this.list[event] = [])).push(fn);
10
        return _this;
11
    },
12
    // 监听一次
13
    once (event, fn) {
14
        // 先绑定，调用后删除
15
        let _this = this;
16
        function on () {
17
            _this.off(event, on);
18
            fn.apply(_this, arguments);
19
        }
20
        on.fn = fn;
21
        _this.on(event, on);
22
        return _this;
23
    },
24
    // 取消订阅
25
    off (event, fn) {
26
        let _this = this;
27
        let fns = _this.list[event];
28
        // 如果缓存列表中没有相应的 fn，返回false
29
        if (!fns) return false;
30
        if (!fn) {
31
            // 如果没有传 fn 的话，就会将 event 值对应缓存列表中的 fn 都清空
32
            fns && (fns.length = 0);
33
        } else {
34
            // 若有 fn，遍历缓存列表，看看传入的 fn 与哪个函数相同，如果相同就直接从缓存列表中删掉即可
35
            let cb;
36
            for (let i = 0, cbLen = fns.length; i < cbLen; i++) {
37
                cb = fns[i];
38
                if (cb === fn || cb.fn === fn) {
39
                    fns.splice(i, 1);
40
                    break
41
                }
42
            }
43
        }
44
        return _this;
45
    },
46
    // 发布
47
    emit () {
48
        let _this = this;
49
        // 第一个参数是对应的 event 值，直接用数组的 shift 方法取出
50
        let event = [].shift.call(arguments),
51
            fns = _this.list[event];
52
        // 如果缓存列表里没有 fn 就返回 false
53
        if (!fns || fns.length === 0) {
54
            return false;
55
        }
56
        // 遍历 event 值对应的缓存列表，依次执行 fn
57
        fns.forEach(fn => {
58
            fn.apply(_this, arguments);
59
        });
60
        return _this;
61
    }
62
};
63
​
64
function user1 (content) {
65
    console.log('用户1订阅了:', content);
66
}
67
​
68
function user2 (content) {
69
    console.log('用户2订阅了:', content);
70
}
71
​
72
function user3 (content) {
73
    console.log('用户3订阅了:', content);
74
}
75
​
76
function user4 (content) {
77
    console.log('用户4订阅了:', content);
78
}
79
​
80
// 订阅
81
eventEmitter.on('article1', user1);
82
eventEmitter.on('article1', user2);
83
eventEmitter.on('article1', user3);
84
​
85
// 取消user2方法的订阅
86
eventEmitter.off('article1', user2);
87
​
88
eventEmitter.once('article2', user4)
89
​
90
// 发布
91
eventEmitter.emit('article1', 'Javascript 发布-订阅模式');
92
eventEmitter.emit('article1', 'Javascript 发布-订阅模式');
93
eventEmitter.emit('article2', 'Javascript 观察者模式');
94
eventEmitter.emit('article2', 'Javascript 观察者模式');
95
​
96
// eventEmitter.on('article1', user3).emit('article1', 'test111');
97
​
98
/*>>
99
    用户1订阅了: Javascript 发布-订阅模式
100
    用户3订阅了: Javascript 发布-订阅模式
101
    用户1订阅了: Javascript 发布-订阅模式
102
    用户3订阅了: Javascript 发布-订阅模式
103
    用户4订阅了: Javascript 观察者模式
104
*/
105
​
Copied!
柒.1.5.4 发布-订阅模式与观察者模式的区别
先看个图以便有个直观认识。
观察者模式：观察者（Observer）直接订阅（Subscribe）主题（Subject），而当主题被激活的时候，会触发（Fire Event）观察者里的事件。
发布订阅模式：订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。
差异
在观察者模式中，观察者是知道 Subject 的，Subject 一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
观察者模式大多数时候是同步的，比如当事件触发，Subject 就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。
观察者模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

陆、设计原则与编程范式 - 以前

陆.1.5 依赖倒置原则

下一个 - 柒、设计模式与软件工程

柒.1.14 适配器模式

最近更新 1yr ago

复制链接

内容

柒.1.5.4 发布-订阅模式与观察者模式的区别

差异