介绍#

发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。

发布订阅模式中，包含发布者，事件调度中心，订阅者三个角色。发布者和订阅者是松散耦合的，互不关心对方是否存在，他们关注的是事件本身。发布者借用事件调度中心提供的publish方法发布事件，而订阅者则通过subscribe进行订阅。

特点

发布订阅模式中，对于发布者Publisher和订阅者Subscriber没有特殊的约束，他们好似是匿名活动，借助事件调度中心提供的接口发布和订阅事件，互不了解对方是谁。
松散耦合，灵活度高，常用作事件总线。
易理解，可类比于DOM事件中的dispatchEvent和addEventListener。

缺点

当事件类型越来越多时，难以维护，需要考虑事件命名的规范，也要防范数据流混乱。

和观察者模式的区别#

定性上：观察者是经典软件设计模式中的一种，但发布订阅只是软件架构中的一种消息范式。

组成上：观察者模式本身只需要2个角色便可成型，即观察者和被观察者，其中被观察者是重点。而发布订阅需要至少3个角色来组成，包括发布者、订阅者和发布订阅中心，其中发布订阅中心是重点。

实现上：

观察者模式一般至少有一个可被观察的对象 Subject，可以有多个观察者去观察这个对象。二者的关系是通过被观察者主动建立的，被观察者至少要有三个方法——添加观察者、移除观察者、通知观察者。

当被观察者将某个观察者添加到自己的观察者列表后，观察者与被观察者的关联就建立起来了。此后只要被观察者在某种时机触发通知观察者方法时，观察者即可接收到来自被观察者的消息。

被观察者是要有一个数组来容纳所有的观察者！

与观察者模式相比，发布订阅核心基于一个中心来建立整个体系。其中发布者和订阅者不直接进行通信，而是发布者将要发布的消息交由中心管理，订阅者也是根据自己的情况，按需订阅中心中的消息。

关联：发布订阅的实现内部利用了观察者模式，订阅者和发布订阅中心的关系类似观察者和被观察者的关系。

简单实现#

1
class PubSub {
2
    constructor() {
3
        // 维护事件及订阅行为
4
        this.events = {}
5
    }
6
    /**
7
     * 注册事件订阅行为
8
     * @param {String} type 事件类型
9
     * @param {Function} callback 回调函数
10
     */
11
    subscribe(type, callback) {
12
        if (!this.events[type]) {
13
            this.events[type] = []
14
        }
15
        this.events[type].push(callback)
16
    }
17
    /**
18
     * 发布事件
19
     * @param {String} type 事件类型
20
     * @param  {...any} args 参数列表
21
     */
22
    publish(type, ...args) {
23
        if (this.events[type]) {
24
            this.events[type].forEach(callback => {
25
                callback(...args)
26
            })
27
        }
28
    }
29
    /**
30
     * 移除某个事件的一个订阅行为
31
     * @param {String} type 事件类型
32
     * @param {Function} callback 回调函数
33
     */
34
    unsubscribe(type, callback) {
35
        if (this.events[type]) {
36
            const targetIndex = this.events[type].findIndex(item => item === callback)
37
            if (targetIndex !== -1) {
38
                this.events[type].splice(targetIndex, 1)
39
            }
40
            if (this.events[type].length === 0) {
41
                delete this.events[type]
42
            }
43
        }
44
    }
45
    /**
46
     * 移除某个事件的所有订阅行为
47
     * @param {String} type 事件类型
48
     */
49
    unsubscribeAll(type) {
50
        if (this.events[type]) {
51
            delete this.events[type]
52
        }
53
    }
54
}

手写 EventEmitter#

EventEmitter （事件派发器）是 Node.js 的核心模块 events 中的类，用于对 Node.js 中的事件进行统一管理，用 events 特定的 API 对事件进行添加、触发和移除等等，EventEmitter 的核心就是事件触发与事件监听器功能的封装。

简而言之，EventEmitter就是一个典型的发布订阅模式，实现了事件调度中心。

实现：

1
class EventEmitter {
2
    constructor() {
3
        // 维护事件及监听者
4
        this.listeners = {}
5
    }
6
    /**
7
     * 注册事件监听者
8
     * @param {String} type 事件类型
9
     * @param {Function} callback 回调函数
10
     */
11
    on(type, callback) {
12
        if (!this.listeners[type]) {  // 如果该事件类型不存在
13
            this.listeners[type] = [] // 为该事件类型设置数组，存放回调函数
14
        }
15
        this.listeners[type].push(callback) // 将回调函数放入该事件类型数组
16
    }
17
    /**
18
     * 发布事件
19
     * @param {String} type 事件类型
20
     * @param  {...any} args 参数列表，把 emit 传递的参数赋给回调函数
21
     */
22
    emit(type, ...args) {
23
        if (this.listeners[type]) { // 如果该事件类型存在
24
            this.listeners[type].forEach(callback => {
25
                callback(...args) // 调用该事件类型数组中的每一个回调函数，并传入参数
26
            })
27
        }
28
    }
29
    /**
30
     * 移除某个事件的一个监听者
31
     * @param {String} type 事件类型
32
     * @param {Function} callback 回调函数
33
     */
34
    off(type, callback) {
35
        if (this.listeners[type]) {
36
            // 查询传入回调函数在该事件类型数组中的下标，并将其下标用 targetIndex 存储
37
            const targetIndex = this.listeners[type].findIndex(item => item === callback)
38
            if (targetIndex !== -1) { // 说明该回调函数存在于事件类型数组中
39
                this.listeners[type].splice(targetIndex, 1) // 删除该回调函数
40
            }
41
            if (this.listeners[type].length === 0) { // 该事件类型数组为空
42
                delete this.listeners[type] // 删除该事件类型
43
            }
44
        }
45
    }
46
    /**
47
     * 移除某个事件的所有监听者
48
     * @param {String} type 事件类型
49
     */
50
    offAll(type) {
51
        if (this.listeners[type]) { // 如果该事件类型数组存在
52
            delete this.listeners[type] // 直接删除该事件类型
53
        }
54
    }
55
}

使用：

1
// 创建事件管理器实例
2
const ee = new EventEmitter()
3

4
// 注册一个imagine事件监听者
5
ee.on('imagine', function() { console.log('前端收割机') })
6

7
// 发布事件imagine
8
ee.emit('imagine')
9
// 前端收割机
10

11
// 也可以emit传递参数
12
ee.on('imagine', function(name,address) { console.log(`大家好，我是${name},我来自${address}！`) })
13
ee.emit('imagine', '前端收割机','广东') // 此时会打印两条信息，因为前面注册了两个imagine事件的监听者
14
// 前端收割机
15
// 大家好，我是前端收割机，我来自广东！
16

17
// 测试移除事件监听
18
const BeRemovedListener = function() { console.log('我是一个可以被移除的监听者') }
19

20
// 注册一个TestOff事件监听者
21
ee.on('TestOff', BeRemovedListener)
22

23
// 发布事件TestOff
24
ee.emit('TestOff')
25
// 我是一个可以被移除的监听者
26

27
// 移除事件监听
28
ee.off('TestOff', BeRemovedListener)
29
ee.emit('TestOff') // 此时事件监听已经被移除，不会再有console.log打印出来了
30

31
// 测试移除imagine的所有事件监听
32
ee.offAll('imagine')
33
console.log(ee) // 此时可以看到ee.listeners已经变成空对象了，再emit发送imagine事件也不会有反应了