前端JavaScript之手写实现：发布订阅模式

发布订阅模式

发布订阅模式：发布订阅模式是软件开发者常见的一种设计模式。该模式中存在一个或多个发布者，一个或多个订阅者，当发布者发布消息时，参与订阅的订阅者就会收到相应的消息通知。

    // 发布订阅模式
    class EventEmitter {
    
    
        constructor() {
    
    
            // key：事件名
            // value：callback [] 回调数组
            this.events = {
    
    };
        }
        on(name, callback) {
    
    
            if (this.events[name]) {
    
    
                this.events[name].push(callback);
            } else {
    
    
                this.events[name] = [callback];
            }
        }
        off(name, callback) {
    
    
            if (!this.events[name]) return;
            if (!callback) {
    
    
                // 如果没有callback，就删除整个事件
                this.events[name] = undefined;
            } else {
    
    
                // 通过过滤来删除注册事件的函数
                this.events[name] = this.events[name].filter((item) => item !== callback);
            }
        }
        once(name, callback) {
    
    
            // 只执行一次发布订阅
            function fn() {
    
    
                callback();
                this.off(name, fn)
            }
            this.on(name, fn);
        }
        emit(name, ...args) {
    
    
            if (this.events[name]) {
    
    
                // 遍历回调数组执行注册事件函数
                for (let i = 0; i < this.events[name].length; i++) {
    
    
                    this.events[name][i](...args);
                }
            }
        }
    }