JS/TS事件(订阅)处理机制:EventEmitter

2023-12-28 17:38:58

前言

EventEmitter 是一个Node.js 的核心模块中的类,它用于处理事件的机制,常见于各种 JavaScript/TypeScript 应用中,尤其是在前端框架和库中。

简单用法

  1. 创建 EventEmitter 实例:

    import { EventEmitter } from 'events';
    const myEventEmitter = new EventEmitter();
    
  2. 添加事件监听器:

    myEventEmitter.on('eventName', (arg1, arg2) => {
      console.log('Event received with arguments:', arg1, arg2);
    });
    
  3. 触发事件:

    myEventEmitter.emit('eventName', 'arg1', 'arg2');
    
  4. 一次性订阅:

    myEventEmitter.once('onceEvent', () => {
      console.log('This listener will be called only once.');
    });
  5. 移除事件监听器:

    myEventEmitter.off('eventName', listenerFunction);

简单原理介绍

EventEmitter 的基本原理是使用发布-订阅模式。它维护了一个事件名到事件处理函数列表的映射。当使用 on 方法添加一个事件监听器时,它会将对应事件名的处理函数加入到列表中。当使用 emit 方法触发一个事件时,它会调用对应事件名的所有处理函数。

下面是 EventEmitter 的基本实现思路的简化示例:

type EventMap = Record<string, Function[]>;

class EventEmitter {
  private events: EventMap = {};

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

  emit(eventName: string, ...args: any[]) {
    const listeners = this.events[eventName] || [];
    for (const listener of listeners) {
      listener(...args);
    }
  }

  off(eventName: string, listener: Function) {
    const listeners = this.events[eventName];
    if (listeners) {
      const index = listeners.indexOf(listener);
      if (index !== -1) {
        listeners.splice(index, 1);
      }
    }
  }
}

// 使用示例
const myEventEmitter = new EventEmitter();
myEventEmitter.on('myEvent', (arg1, arg2) => {
  console.log('Event received with arguments:', arg1, arg2);
});
myEventEmitter.emit('myEvent', 'arg1', 'arg2');

注意点

建议不要在触发监听的回调listener中去取消监听,可能会有不可预知的问题。?

文章来源:https://blog.csdn.net/qq_43491495/article/details/135228953
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。