js实现一个EventEmitter类的完整写法

最新推荐文章于 2024-10-13 07:21:17 发布

原创最新推荐文章于 2024-10-13 07:21:17 发布 · 859 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文将详细介绍如何在JavaScript中实现一个EventEmitter类，包括使用on方法为对象绑定事件和事件处理函数。参考链接提供了一个详细的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js实现一个EventEmitter类的完整写法

// 实现一个EventEmitter类作为被观察的对象
class EventEmitter {
    constructor() {
        this.listeners = new Map();
    }

    addListener(label, callback) {
        this.listeners.has(label) || this.listeners.set(label, []);
        this.listeners.get(label).push(callback);
    }
    removeListener(label, callback) {
        let listeners = this.listeners.get(label);
        let index;
        if (listeners && listeners.length) {
            index = listeners.reduce((i, listener, index) => {
                return (isFunction(listener) && listener === callback) ? i = index : i;
            }, -1);
        }
        if (index > -1) {

            listeners.splice(index, 1);
            this.listeners.set(label, listeners);
            return true;
        }

        return false;
    }
    emit(label, ...args) {
        let listeners = this.listeners.get(label);
        if (listeners && listeners.length) {
            listeners.forEach((listener) => {
                listener(...args);
            })
            return true;
        }

        return false;
    }
}
// 实现一个观察者
class Observer {
    constructor(id, subject) {
        this.id = id;
        this.subject = subject;
    }
    on(label, callback) {
        this.subject.addListener(label, callback);
    }
}

通过on给被观察者对象绑定事件以及事件处理函数：

let observable = new EventEmitter();

let [observer1, observer2] = [
    new Observer(1, observable),
    new Observer(2, observable)
]

observer1.on('change', (data) => {
    console.log(`${observer1.id} observered data:`, data);
})

observer2.on('haha', (data) => {
    console.log(`${observer2.id} observered data:`, data);
})

observable.emit('change', {a: 1}); // 1 observered data: { a: 1 }
observable.emit('haha', [1, 2, 3]); // 2 observered data: [ 1, 2, 3 ]