实现简易版发布订阅

第一种实现方式

const eventHub = {
    queueMap: {},
    on: (name, fn) => {
        //1. 入队
        eventHub.queueMap[name] = eventHub.queueMap[name] || []
        eventHub.queueMap[name].push(fn)

    },
    emit: (name, data) => {
        if (!eventHub.queueMap[name]) {
            return
        }
        eventHub.queueMap[name].map(fn => fn.call(null, data))
        return undefined;
    },
    off: (name, fn) => {
        //出队
        if (!eventHub.queueMap[name]) {
            return
        }
        if (eventHub.queueMap[name].indexOf(fn) < 0) {
            return;
        }
        eventHub.queueMap[name].splice(eventHub.queueMap[name].indexOf(fn), 1)
    }
    //使用
    eventHub.on('click', console.log) 
    eventHub.on('click', console.error)
    setTimeout(()=>{ eventHub.emit('click', 'aliyu') },3000)

第二实现方式

class EventHub {
    queueMap = {}
    on(name, fn) {
        this.queueMap[name] = this.queueMap[name] || []
        this.queueMap[name].push(fn)
    }

    emit(name, data) {
        this.queueMap[name] = this.queueMap[name] || []
        if (!this.queueMap[name]) {
            return
        }
        this.queueMap[name].map(fn => fn.call(null, data))
        return undefined;

    }

    off(name, fn) {
        this.queueMap[name] = this.queueMap[name] || []
        if (!this.queueMap[name]) {
            return
        }
        if (this.queueMap[name].indexOf(fn) < 0) {
            return;
        }
        this.queueMap[name].splice(this.queueMap[name].indexOf(fn), 1)
       }
    }

    //使用
    const e = new EventHub()
    e.on('click', (name) => {
        console.log(`hi${name}`);
    })
    e.on('click', (name) => {
        console.log(`hello${name}`);
    })
    setTimeout(() => {
        e.emit('click', 'aliyu')
    }, 3000)

总结 为了方便自己后期查看而总结,大佬就不用看啦. 哈哈哈勿喷.