JavaScript面试题：消息订阅与发布的简单实现_事件订阅 代码题 js

消息订阅与发布的简单实现

消息订阅与发布简单实现

概述

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

（1）订阅者把自己想订阅的事件 注册到调度中心
（2）发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。
简单来说就是发布者发送数据，订阅者接收数据并展示

最核心的两个内容

• 中央事件处理器（调度中心）
• 只有先订阅才能进行发布

具体代码

// 消息订阅与发布
// 创建一个消息订阅与发布的类
class Subpub{
    #eventStack // 私有变量，代表调度中心
    
    // 构造函数
    constructor(){
        this.#eventStack = {}; // 初始化私有变量
        /**
            #eventStack是一个对象，存储id和id对应的值
            @param id 消息对应的编号（标题）
            @param id值 消息的内容
        */
    }

    // 消息订阅函数
    /**
     * @param id 消息编号
     * @param callback 回调函数，用来接收消息
     */
    subscribe(id,callback){
        // #eventStack已经初始化为对象
        // 判断有没有这个属性
        if(!this.#eventStack[id]){
            // 如果没有这个属性则将初始化一个数组
            this.#eventStack[id] = []
        }

        // 将取值（也就是回调函数）加入数组
        this.#eventStack[id].push(callback)
    }

    /**
     * 
     * @param {*} id 消息编号
     * @param  {...any} params 参数
     */
    // 消息发布函数
    publish(id,...params){
        // 如果没有先进行订阅，则发出警告
        if(!this.#eventStack[id]){
            console.warn('the id is not in this subpub stack, please subscribe first!');
            return  
        }
        // 依次调用回调（当事件触发时，有调度中心同意调度）
        this.#eventStack[id].forEach((callback) => {
            callback.apply(this, params)
        })
    }

    /**
     * 删除消息函数
     * @param {*} id 消息编号
     * @param {*} callback 消息内容
     * @returns 
     */
    remove(id,callback){
        // 判断是否有订阅
        if(!this.#eventStack[id]) return

        // 判断是否有callback函数
        if(!callback){
            // 如果没有callback，就删掉整个事件
            this.#eventStack[id] = undefined
            return 
        }

        // 如果有callback，就仅仅删掉callback这个消息
        this.#eventStack[id] = this.#eventStack[id].filter((item) => item!==callback)
    }
}

// 创建一个消息订阅发布对象
const sp = new Subpub();

// 调用消息订阅，指定id，传入回调
sp.subscribe('hhh', () => { console.log("哈哈哈"); })
sp.subscribe('www', (param) => { console.log('哇哇哇' + param); })

// 调用消息发布，指定id和要传入的参数
sp.publish('hhh') // 不传数据时
sp.publish('www', 'hello') // 传数据时
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
75
76
77
78
79
80
81
82

哈哈哈
哇哇哇hello

可以看到，id为hhh的发布与订阅是一起的，id为www的发布与订阅时绑定在一起的，调用各自的回调函数。