手写实现浏览器端的EventEmitter

2023-11-09 23:47:15

手写实现浏览器端的EventEmitter

在JavaScript中，EventEmitter是一种强大的工具，允许对象以发布-订阅模式进行通信。它提供了灵活的事件管理机制，让开发人员可以轻松地触发事件并监听来自其他对象的事件。

手写实现

手写一个EventEmitter需要以下步骤：

1. 创建一个EventEmitter类

class EventEmitter {
  constructor() {
    this._events = {};
  }
}

2. 添加事件监听器

EventEmitter.prototype.on = function(eventName, listener) {
  if (!this._events[eventName]) {
    this._events[eventName] = [];
  }
  this._events[eventName].push(listener);
};

3. 触发事件

EventEmitter.prototype.emit = function(eventName, ...args) {
  if (!this._events[eventName]) {
    return;
  }
  for (let listener of this._events[eventName]) {
    listener(...args);
  }
};

使用示例

const eventEmitter = new EventEmitter();

eventEmitter.on('my-event', (data) => {
  console.log(`Received event data: ${data}`);
});

eventEmitter.emit('my-event', 'Hello world!');

浏览器端的实现

在浏览器端，我们可以利用DOM元素的事件触发机制来实现EventEmitter。

class DOMEventEmitter extends EventEmitter {
  constructor(element) {
    super();
    this.element = element;
  }

  on(eventName, listener) {
    this.element.addEventListener(eventName, listener);
    super.on(eventName, listener);
  }

  emit(eventName, ...args) {
    this.element.dispatchEvent(new CustomEvent(eventName, { detail: ...args }));
    super.emit(eventName, ...args);
  }
}