js实现发布订阅模式

// 几个要素：
// 1.维护一个 events 对象
// 2.对象上每个事件为 key，值为事件执行函数，为数组
// 3.维护三个方法：
// 触发事件：emit，执行事件所绑定的方法（on绑定的）
// 监听事件：on，哪里需要在监听到事件的时候执行一些动作，就在那里绑定，可能有多个待执行函数，数组，每次监听到事件的时候统一 push 到事件数组中，由emit统一执行
// 仅监听一次事件：once，先执行 on 事件，监听到后执行 callback，callback 中再将该事件解绑，直接执行一次 callback(这里依然是由emit触发的时候执行)
// once是多个地方监听，第一次发送的事件都会打印，第二次发送的事件则都不会打印
// 解绑事件：off，将事件对象中维护的事件执行函数的数组进行过滤，删掉要解绑的事件方法
class Events {
    constructor() {
        this.events = {};
    }
    emit(type, ...args) {
        const listeners = this.events[type] || [];
        for (const listener of listeners) {
            listener(...args);
        }
    }
    on(type, listener) {
        this.events[type] = this.events[type] || [];
        // console.log(this.events[type]);
        this.events[type].push(listener);
    }
    once(type, listener) {
        // args 是 emit 触发事件时传入的
        const callback = (...args) => {
            // 当一次 emit 执行事件的时候，进行解绑事件操作
            const listeners = this.events[type] || [];
            this.off(type, callback);
            // 执行一次事件函数
            listener(...args);
        };
        this.on(type, callback);
    }
    off(type, listener) {
        this.events[type] = this.events[type] || [];
        this.events[type] = this.events[type].filter((item) => {
            return item !== listener;
        });
    }
}

const e = new Events();

const callback = (x) => {
    console.log("Click1", x.id);
};
e.on("click", callback);
e.on("click", callback);
e.on("click", () => {
    console.log("click111");
});

// 只打印一次
e.once("click2", function () {
    console.log("once1");
}); // Once Click2 5
e.once("click2", function () {
    console.log("once2");
}); // Once Click2 5

e.emit("click", { id: 3 }); // Click1 3 执行两遍,因为监听了两遍
e.emit("click", { id: 4 }); //Click1 4 执行两遍
e.emit("click2", { id: 5 });
e.emit("click2", { id: 6 }); //不会打印
e.off("click", callback);
// 仅会打印 click111
e.emit("click", { id: 8 });
// 注意：删除事件监听，前提是需要先把回调函数保存起来，保证删除的和监听的是同一个

参考链接