参考EventEmitter实现完整订阅发布功能函数

 更新时间:2023年02月12日 15:16:02   作者:拾光者  
这篇文章主要为大家介绍了参考EventEmitter实现完整订阅发布功能函数示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

前一篇文章 《实现一个简单的订阅发布功能函数|参考 EventEmitter》 实现了简单版本的,本篇文章用 JS 完整实现 Node.js 中的 EventEmitter

实现

EventEmitter 中有一些重复功能的函数,或者已经移除的函数,这里不会进行实现。

主要会新增以下功能:

  • 新增默认最大订阅限制,且可进行更改
  • 可获取所有的订阅事件名称
  • 可根据事件名获取所有的监听函数
  • 默认是往订阅事件队列尾部新增,现在新增 可往队列头部添加订阅事件 的功能

根据 简单版实现 为基础,再根据功能来新增一些属性和方法。

需要新增内部属性:

  • maxListeners,默认最多给特定事件添加了 10 个的订阅,如果超过了则不会生效,且会有警告提示,如果需要更多,则需要调用 setMaxListeners 进行设置。
  • addListener,抽离新增订阅的实现,用于复用

需要新增功能函数:

  • listeners 获取
  • rawListeners 获取所有订阅的原始监听函数
  • listenerCount 获取所有订阅数量
  • eventNames 获取所有订阅事件名
  • prependListener 从头部新增订阅,如果代码中需要先执行的订阅,才需要用到
  • prependOnceListener 从头部新增一次性订阅,如果代码中需要先执行的订阅,才需要用到
  • setMaxListeners 设置最大订阅数量
  • getMaxListeners 获取最大订阅数量

完整代码实现:

type Listener = (...args: any[]) => void;
type EventInfo = {
  // 监听器
  listener: Listener;
  // 备份,需要改变 listener 时,则需要备份,比如 once
  bak?: Listener;
};
// 创建一次性监听器
function createOnceListener(pub: PubSub, eventName: string | symbol, listener: Listener) {
  const onceListener = (...args: any[]) => {
    // 执行一次后直接取消订阅
    listener(args);
    pub.off(eventName, listener);
  };
  return onceListener;
}
export class PubSub {
  private eventMap: Record<string | symbol, EventInfo[]> = {};
  // 默认最多给特定事件添加了 10 个的监听器
  private maxListeners = 10;
  // 订阅实现
  private addListener = (eventName: string | symbol, listener: Listener, addToHead = false) => {
    if (!this.eventMap[eventName]) {
      this.eventMap[eventName] = [];
    }
    // 不能添加超过 maxListeners 的监听逻辑处理
    if (this.eventMap[eventName].length >= this.maxListeners) {
      console.warn(
        `maxListeners: ${this.maxListeners}, ${eventName.toString()} event has add ${this.maxListeners} listener,`
      );
    } else {
      if (addToHead) {
        this.eventMap[eventName].unshift({ listener });
      } else {
        this.eventMap[eventName].push({ listener });
      }
    }
    return this;
  };
  // 订阅
  on = (eventName: string | symbol, listener: Listener) => {
    return this.addListener(eventName, listener);
  };
  // 取消订阅
  off = (eventName: string | symbol, listener: Listener) => {
    if (this.eventMap[eventName]) {
      this.eventMap[eventName] = this.eventMap[eventName].filter((item) => {
        // once listener 取消订阅
        if (item.bak) {
          return item.bak !== listener;
        }
        // 正常 listener 取消订阅
        return item.listener !== listener;
      });
    }
    return this;
  };
  // 类似 EventEmitter 中的 emit 函数
  emit = (eventName: string | symbol, ...args: any[]) => {
    this.eventMap[eventName]?.forEach((item) => {
      item.listener(...args);
    });
    return this;
  };
  // 只订阅一次
  once = (eventName: string | symbol, listener: Listener) => {
    const onceListener = createOnceListener(this, eventName, listener);
    this.on(eventName, onceListener);
    return this;
  };
  // 获取所有订阅的原始监听器
  listeners = (eventName: string | symbol) => {
    return this.eventMap[eventName]?.map((item) => item.bak || item.listener) || [];
  };
  // 返回名为 eventName 的事件的监听器数组的副本,包括任何封装器(例如由 .once() 创建的封装器)。
  rawListeners = (eventName: string | symbol) => {
    return this.eventMap[eventName]?.map((item) => item.listener) || [];
  };
  // 获取所有订阅数量
  listenerCount = (eventName: string | symbol) => {
    return this.eventMap[eventName]?.length || 0;
  };
  // 获取所有 eventName
  eventNames = () => {
    const eventNames = [];
    for (const key in this.eventMap) {
      eventNames.push(key);
    }
    return eventNames;
  };
  // 将 listener 函数添加到名为 eventName 的事件的监听器数组的开头。不检查是否已添加 listener。 多次调用传入相同的 eventName 和 listener 组合将导致多次添加和调用 listener。
  prependListener = (eventName: string | symbol, listener: Listener) => {
    return this.addListener(eventName, listener, true);
  };
  // 将名为 eventName 的事件的单次 listener 函数添加到监听器数组的开头。 下次触发 eventName 时,将移除此监听器,然后再调用。
  prependOnceListener = (eventName: string | symbol, listener: Listener) => {
    const onceListener = createOnceListener(this, eventName, listener);
    this.prependListener(eventName, onceListener);
    return this;
  };
  // 当前最大监听器数的值。 该值可以设置为 Infinity(或 0)以指示无限数量的监听器。
  setMaxListeners = (n: number) => {
    this.maxListeners = n;
    return this;
  };
  // 返回当前最大监听器数的值,该值由 setMaxListeners(n) 设置或为默认值 10。
  getMaxListeners = () => {
    return this.maxListeners;
  };
}
export const pubSub = new PubSub();

说明:

  • ononceprependListenerprependOnceListener 几个新增 listener 的函数都不检查是否已添加 listener,多次调用传入相同的 eventNamelistener 组合将导致多次添加和调用listener ,因此需要注意不要多次注入。

总结

如果你的应用非常大,需要非常精细的管理事件,那么可以使用完整版实现,如果不是的话,可以使用简单版本。

以上就是参考EventEmitter实现完整订阅发布功能函数的详细内容,更多关于EventEmitter订阅发布功能函数的资料请关注脚本之家其它相关文章!

相关文章

  • 一次NodeJS内存泄漏排查的实战记录

    一次NodeJS内存泄漏排查的实战记录

    这篇文章主要给大家介绍了一次NodeJS内存泄漏排查的实战记录,文中给出了详细的排查过程以及内存泄漏的解决方法,大家可以学习一下以备不时之需,需要的朋友可以参考下
    2022-03-03
  • nodejs下载指定版本完整图文步骤

    nodejs下载指定版本完整图文步骤

    node.js官方版是一款专业性非常强的浏览辅助工具软件,这款软件操作十分的简单、功能也是非常的强劲,下面这篇文章主要给大家介绍了关于nodejs下载指定版本的相关资料,需要的朋友可以参考下
    2023-12-12
  • node.js 发布订阅模式的实例

    node.js 发布订阅模式的实例

    下面小编就为大家带来一篇node.js 发布订阅模式的实例。小编觉得挺不错的,现在就想给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Mac OS X 系统下安装和部署Egret引擎开发环境

    Mac OS X 系统下安装和部署Egret引擎开发环境

    之前的文章,我们已经介绍了Windows 系统下安装和部署Egret的开发环境,那么,这篇文档中,我们主要介绍在Mac环境中安装Egret以及部署
    2014-09-09
  • nodejs个人博客开发第三步 载入页面

    nodejs个人博客开发第三步 载入页面

    这篇文章主要为大家详细介绍了nodejs个人博客开发的载入页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Node.js+ES6+dropload.js实现移动端下拉加载实例

    Node.js+ES6+dropload.js实现移动端下拉加载实例

    这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字符串。有兴趣的小伙伴可以自己尝试下
    2017-06-06
  • Node.js+Express.js+TS实现简单图床脚本

    Node.js+Express.js+TS实现简单图床脚本

    在这篇博客文章中,我将介绍如何使用 TypeScript 和 Express 框架来编写一个简单的图床脚本,可以将本地图片上传到服务器,并返回图片的 URL,这样,你就可以在 Markdown 文档中方便地引用图片,而不用担心图片的存储和管理问题
    2023-10-10
  • Nodejs异步回调的优雅处理方法

    Nodejs异步回调的优雅处理方法

    这篇文章主要介绍了Nodejs异步回调的优雅处理方法,本文使用了ES6中的新特性,用一种十分优雅的方式解决了回调问题,需要的朋友可以参考下
    2014-09-09
  • 详解如何优雅在webpack项目实现mock服务器

    详解如何优雅在webpack项目实现mock服务器

    这篇文章主要为大家介绍了详解如何优雅在webpack项目实现mock服务器,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • nodejs制作爬虫实现批量下载图片

    nodejs制作爬虫实现批量下载图片

    本文给大家分享的是作者使用nodejs制作爬虫来爬去图片并批量下载的全过程,非常的细致,有需要的小伙伴可以参考下
    2017-05-05

最新评论