发布订阅模式以及mitt源码实现

2024-04-18 19:12

本文主要是介绍发布订阅模式以及mitt源码实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

发布订阅模式以及mitt源码实现

前言:我为什么要写他?
场景1: 我在写一个组件,但是层层传递之后,全是属性/事件的传递。中间有很多缘由,vuex 又不适合,最后选择了eventBus,但是vue3 已经不再提供eventBus,可以用mitt库 来做EventBus(后面会实现一个mitt)

场景2: 在实现promise的时候,遇到了setTimeOut的处理,但是promise.then 不会一直等待setTimeOut,所以一直是PENDING转状态,那怎么让setTimeOut之后,再来改变状态呢,此时就需要一个事件队列,来存储这些PENDING的事件,等到resolve之后,如果还是PENDING,则以此执行事件队列里的事件,这也是一个发布订阅《EventBus》

梳理一下名词

发布订阅模式

  • 发布-订阅者模式(Publish-Subscribe Pattern)是一种软件设计模式,用于实现对象间的一对多通信。在该模式中,存在两种角色:发布者(Publisher)和订阅者(Subscriber)。

  • 发布者(Publisher) :负责发布(或广播)消息,通常不知道谁会接收这些消息。

  • 订阅者(Subscriber) :订阅(或监听)发布者的消息,并在发布者发布消息时收到通知。

这种模式的实现通常依赖于一个中介者(也称为事件总线或消息队列),发布者将消息发送到中介者,中介者负责将消息传递给所有已经订阅该消息类型的订阅者。

在前端开发中,发布-订阅者模式常用于解耦组件之间的通信,特别是在涉及到跨组件通信或全局状态管理时。一些流行的 JavaScript 库和框架(如 Vue.js 和 Redux)都提供了发布-订阅者模式的实现或支持。

总的来说,发布-订阅者模式提供了一种灵活的方式来实现组件间的通信,降低了它们之间的耦合度,使得系统更易于维护和扩展。

EventBus(事件总线:采用发布订阅模式的一个工具,来处理组件通信

  • 在Vue.js中,EventBus是一种简单而强大的实现发布-订阅者模式的工具。它实际上是一个Vue实例,可以用于在组件之间进行通信。但是vue3取消了全局事件总线,由于EventBus是一个全局实例,所以在使用时要小心不要造成命名冲突或滥用,以免导致代码维护和调试困难,安全性低。。,但是某些场景,我们确实需要事件总线,怎么办呢?
mitt / tiny-emitter ?

Mitt 和 tiny-emitter 都是 JavaScript 事件发射器库,可以用于在 JavaScript 中进行事件发布和订阅。但是,它们有一些明显的区别:

  • 体积:Mitt 比 tiny-emitter 更小,压缩后仅有 200 字节。tiny-emitter 的体积略大,压缩后约为 2.2 KB。
  • 支持的浏览器版本:Mitt 支持 IE9+,而 tiny-emitter 支持 IE6+。

尽管它们有一些区别,Mitt 和 tiny-emitter 都是功能强大且易于使用的事件发射器库。选择哪个库取决于你的应用程序的特定需求和偏好。

mitt

mitt 的 Usage

import mitt from 'mitt'const emitter = mitt()// listen to an event
emitter.on('foo', e => console.log('foo', e) )// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )// fire an event
emitter.emit('foo', { a: 'b' })// clearing all events
emitter.all.clear()// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

通过Usage,我们来看看mitt的大致实现步骤

  1. 首先使用mitt,是通过函数调用的形式(**const emitter = mitt()**),再通过(.)语法来调用方法,说明mitt 是一个函数内部是返回了 on, emit, off, once 方法
  2. 方法参数 订阅on 订阅《key,handler》发布: emit《key,params》取消订阅: off<key, handler?>订阅一次: once
  3. 下面就是 key 和handler 怎么做对应关系? 怎么知道我的key对应的订阅handler,发布的handler,取消的handler ?
  4. 使用队列/Map 来对数据做存储,保证顺序和对应关系
  • 订阅: 没有则创建一个数组集合,有则添加至对应的key下
  • 发布: 遍历key,执行对应的handler
  • 取消订阅: 遍历key,如果有handler,则删除对应的handler。 没有handler 则删除key 对应的所有handler
  • once: 注册一个函数,先执行,再取消 (其实mitt 内部并没有实现)

mitt源码实现

function mitt() {let all = new Map();/*** 订阅方法* @param {*} key  传递的事件key* @param {*} handler  事件处理函数*/const on = (key, handler) => {// 如果没有key 对应的数组,则创建一个if (!all.get(key)) {all.set(key, []);}// 将handler 存入对应的key 对应的数组中all.get(key).push(handler);};/*** 发布方法* @param {*} key 发布给订阅者的key* @param {*} params  发布者的参数,告诉订阅者我发布了什么内容。*/const emit = (key, params) => {// 判断是否有对应的keylet handlers = all.get(key);// if (!handlers) return; // 这不能return 啊,如果是* 后面还要做判断滴// 如果存在对应的keyif (handlers) {// 获取对应的key 对应的数组// 遍历数组,执行对应的事件处理函数handlers.slice().map((handler) => handler(params));}// 如果没有查到监听事件,看是否监听了所有事件handlers = all.get('*');// 如果是订阅了所有事件,则以此执行订阅的* 事件if (handlers) {handlers.slice().map((handler) => handler(params));}};/** 移除事件方法* @param {*} key * @param {*} handler?  如果传入handler,则移除制定的handler。如果没有传入handler,则移除key下所有的handler*/const off = (key, handler) => {let handlers = all.get(key);if (handlers) {// handler ? handlers.splice(handlers.indexOf(handler), 1) : handlers.length =0;handler ? handlers.splice(handlers.indexOf(handler), 1) : all.set(key, []);}console.log('all',all)};/*** 只执行一次方法:内部也是调用on,执行完,取消掉* @param {*} type * @param {*} handler */const once = (type, handler) => {const onceHandler = (params)=>{handler(params);off(type, handler);}on(type,onceHandler)};return {on,off,emit,once,};
}
const emitter = mitt();
emitter.on("foo", (params) => {console.log("foo1!",params);
});
emitter.once("foo", (params) => {console.log("foo2!",params);
});
// emitter.once("foo", (params) => {
//   console.log("foo!",params);
// });
emitter.on("*", (params) => {console.log("*!",params);
})
// emitter.off('foo')
emitter.emit("foo", "w");
console.log("emitter", emitter);

问题思考

  • 整体流程是什么?

先订阅,看有没有对应的key,没有就创建一个消息队列(前端就是创建一个数组集合),来存放订阅的事件。等到发布者根据key,发布事件,会传递参数给订阅者,订阅者此时会收到发布者发来的消息。

  • 怎么取消订阅?

先判断有没有对应的key, 并且 有要移除的函数。则从对应的key 对应的数组中,移除对应的订阅的事件。如果没有要移除的函数,则根据对应key, 将所有的事件队列清空

  • 怎么只执行一次?

先订阅,订阅的时候,创建一个新的函数,这个函数会执行一次,然后取消订阅。

  • 怎么发布所有事件?

先判断有没有订阅所有事件,如果有,则遍历所有事件,执行对应的事件处理函数。
事件订阅优缺点?

优点:

  • 简化通信: 不用考虑组件层级,组件间可以直接通信,不用一个向上/下 传递 属性/事件。是一个全局性质的模式

缺点:

  • 容易滥用: 其实组件之间本身是需要关系的大量使用事件总线使得组件之间的关系变得模糊

  • 难以跟踪:事件总线模式可能会导致事件流变得难以跟踪和理解,特别是在大型应用程序中。由于事件的传递是异步的,因此可能难以确定事件的来源和处理过程

参考链接地址

mitt: https://github.com/developit/mitt/blob/main/src/index.ts

这篇关于发布订阅模式以及mitt源码实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/915618

相关文章

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并