请手写一个发布-订阅的模式

news/2024/7/10 1:36:28 标签: vue

发布-订阅模式也是经典的设计模式之一，它在前端很多地方都有应用，比如javascript事件池，Vue的$on、$off，nodejs的events模块和socket通信等等都有应用，也是前端面试比较火热的考点之一，接下来给大家详细介绍下发布-订阅模式

发布-订阅模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都将得到通知。在JavaScript开发中，我们一般用事件模型来替代传统的发布-订阅模式

要手写一个简单的发布订阅模式，其实现思路如下：

先初始化一个events对象
调用on方法时，将事件名称eventName和监听函数fn存入events对象中
调用emit方法时，通过事件名称eventName从events对象中取出对应的回调并执行
off方法：通过事件名称eventName找出events对象对应的监听函数并清除
once方法：被emit触发一次后就立即调用off方法移除监听，也就是调用once传入的监听函数只会执行一次

代码不多，所以直接上完整代码

class EventEmitter {
    constructor() {
        this.events = {}
    }
    on(eventName, fn) {
        if (!this.events[eventName]) {
            this.events[eventName] = []
        }
        this.events[eventName].push(fn)
        console.log(this,'this')
        return this
    }
    once(eventName, fn) {
        const func = (...args) => {
            this.off(eventName, func)
            fn.apply(this, args)
        }
        this.on(eventName, func)
        return this
    }
    emit(eventName, ...args) {
        if (!this.events[eventName]) return this
        this.events[eventName].forEach(fn => {
            fn.apply(this, args)
        });
        return this
    }
    off(eventName, fn) {
        if (!this.events[eventName]) return this
        if (typeof fn === 'function') {
            this.events[eventName] = this.events[eventName].filter((f) => f !== fn)
            return this
        }
        this.events[eventName] = null
        return this
    }
}

const events = new EventEmitter();

events.on('event1', () => {
    console.log('event1', '第一个监听函数')
})
events.on('event1', () => {
    console.log('event1', '第二个监听函数')
})
events.emit('event1')

const fn1 = () => {
    console.log('event2', '第一个监听函数')
}
const fn2 = () => {
    console.log('event2', '第二个监听函数')
}
events.on('event2', fn1)
events.on('event2', fn2)
events.off('event2', fn1);

// 打印结果：
// event1 第一个监听函数
// event1 第二个监听函数




// 上面代码有疑问请阅读下面代码,这部分解答了上面读者的疑问
const events = new EventEmitter();

// event1部分
events.on('event1', () => {
    console.log('event1', '第一个监听函数')
})
events.on('event1', () => {
    console.log('event1', '第二个监听函数')
})
events.emit('event1')

// event2部分
const fn1 = () => {
    console.log('event2', '第一个监听函数')
}
const fn2 = () => {
    console.log('event2', '第二个监听函数')
}
events.on('event2', fn1)
events.off('event2', fn1);
events.on('event2', fn2)
events.emit('event2')