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

最新推荐文章于 2024-04-23 07:43:14 发布

推开世界的门

最新推荐文章于 2024-04-23 07:43:14 发布

阅读量480

点赞数 3

分类专栏：公司项目相关文章标签：前端

本文链接：https://blog.csdn.net/qq_38845858/article/details/137922181

版权

公司项目相关专栏收录该内容

84 篇文章 3 订阅

订阅专栏

发布订阅模式以及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的大致实现步骤

首先使用mitt，是通过函数调用的形式（**const emitter = mitt()**），再通过(.)语法来调用方法，说明mitt 是一个函数，内部是返回了 on, emit, off, once 方法
方法参数 订阅： on 订阅《key,handler》 ｜ 发布： emit《key,params》 ｜ 取消订阅： off<key, handler?> ｜ 订阅一次： once
下面就是 key 和handler 怎么做对应关系？怎么知道我的key对应的订阅handler，发布的handler，取消的handler ？
使用队列/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) => {
    // 判断是否有对应的key
    let handlers = all.get(key);
    // if (!handlers) return; // 这不能return 啊，如果是* 后面还要做判断滴
    // 如果存在对应的key
    if (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

推开世界的门

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
发布订阅模式以及mitt源码实现

发布-订阅者模式（Publish-Subscribe Pattern）是一种软件设计模式，用于实现对象间的一对多通信。在该模式中，存在两种角色：发布者（Publisher）和订阅者（Subscriber）。
复制链接

扫一扫