当前位置：首页 > JavaScript

js实现emit

2026-04-07 04:38:06JavaScript

实现事件发射器（Event Emitter）的 JavaScript 方法

在 JavaScript 中，可以通过自定义类或对象实现事件发射器（Event Emitter）功能，用于监听和触发事件。以下是两种常见实现方式：

基于类的实现

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

  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  }

  emit(eventName, ...args) {
    const listeners = this.events[eventName];
    if (listeners) {
      listeners.forEach(listener => listener(...args));
    }
  }

  off(eventName, listenerToRemove) {
    const listeners = this.events[eventName];
    if (listeners) {
      this.events[eventName] = listeners.filter(listener => listener !== listenerToRemove);
    }
  }
}

使用方法：

const emitter = new EventEmitter();
emitter.on('event', (arg1, arg2) => console.log(arg1, arg2));
emitter.emit('event', 'Hello', 'World');

基于对象的实现

const eventEmitter = {
  events: {},
  on(eventName, fn) {
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(fn);
  },
  off(eventName, fn) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(f => f !== fn);
    }
  },
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(fn => fn(...args));
    }
  }
};

使用方法：

eventEmitter.on('test', data => console.log(data));
eventEmitter.emit('test', 'Emitted data');

扩展功能实现

如果需要更完整的事件发射器，可以添加以下功能：

js实现emit

class AdvancedEventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, listener) {
    if (!this.events[eventName]) this.events[eventName] = [];
    this.events[eventName].push(listener);
    return () => this.off(eventName, listener);
  }

  once(eventName, listener) {
    const onceWrapper = (...args) => {
      listener(...args);
      this.off(eventName, onceWrapper);
    };
    this.on(eventName, onceWrapper);
  }

  emit(eventName, ...args) {
    const listeners = this.events[eventName];
    if (listeners) {
      listeners.forEach(listener => listener(...args));
    }
  }

  off(eventName, listenerToRemove) {
    const listeners = this.events[eventName];
    if (listeners) {
      this.events[eventName] = listeners.filter(listener => listener !== listenerToRemove);
    }
  }

  listenerCount(eventName) {
    const listeners = this.events[eventName];
    return listeners ? listeners.length : 0;
  }
}

使用场景示例

const emitter = new AdvancedEventEmitter();

// 常规监听
emitter.on('data', data => console.log('Received:', data));

// 一次性监听
emitter.once('connect', () => console.log('Connected!'));

// 触发事件
emitter.emit('data', { id: 1, value: 'test' });
emitter.emit('connect');
emitter.emit('connect'); // 不会触发，因为是一次性监听