mitt-依赖库详解

2025-03-08 约 525 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146123606

mitt 依赖库详解

一、概述

mitt 是一个极其轻量级的 JavaScript 事件发射器库，实现了发布-订阅模式。该模式允许对象间松散耦合，一个对象（发布者）可以发布事件，而其他对象（订阅者）可以监听这些事件并作出响应。适用于浏览器和 Node.js 环境。

二、安装

npm install mitt

三、基本使用

1. 引入 `mitt`

import mitt from "mitt";

2. 创建事件发射器实例

const emitter = mitt();

3. 订阅事件

使用 on 方法来订阅事件，该方法接收两个参数：事件名称和回调函数。当指定事件被触发时，回调函数将被执行。

// 订阅名为 'message' 的事件
emitter.on("message", (data) => {
  console.log("Received message:", data);
});

4. 发布事件

使用 emit 方法来发布事件，该方法接收事件名称作为第一个参数，后续可选参数会传递给订阅该事件的回调函数。

// 发布 'message' 事件，并传递数据
emitter.emit("message", "Hello, World!");

5. 取消订阅

使用 off 方法取消订阅事件，需要传入事件名称和要取消的回调函数引用。

// 定义回调函数
const messageHandler = (data) => {
  console.log("Received message:", data);
};

// 订阅事件
emitter.on("message", messageHandler);

// 取消订阅
emitter.off("message", messageHandler);

// 此时再发布事件，已取消的回调函数不会执行
emitter.emit("message", "This message won't trigger the handler.");

四、高级用法

1. 监听所有事件

mitt 允许监听所有事件，使用特殊的 '*' 作为事件名称。当任何事件被触发时，该回调函数都会执行，并会接收到事件名称和传递的数据。

emitter.on("*", (eventName, data) => {
  console.log(`Event ${eventName} was triggered with data:`, data);
});
emitter.emit("userLoggedIn", { username: "john_doe" });

2. 清除所有订阅

使用 all.clear() 方法可以清除所有事件的所有订阅。

emitter.all.clear();
// 之后发布事件不会触发任何回调
emitter.emit("message", "No handlers will receive this.");