当前位置：首页 > news >正文

Mitt 库使用笔记

news 来源：原创 2025/9/18 16:30:09

1. 介绍

Mitt 是一个轻量级的 JavaScript 库，用于在应用程序中实现事件触发和监听。它不依赖任何外部库，功能简洁，主要用于在模块间进行事件传递。

体积小：Mitt 的压缩版本仅有几千字节，非常适合在前端框架中作为事件管理工具。
API 简洁：提供了三个主要的 API：on、off 和 emit。

适用于需要事件驱动开发的场景，尤其是在没有框架（如 Vue、React）时的事件管理。

2. 安装

你可以通过 npm 或直接在 HTML 文件中使用 Mitt。

npm 安装

使用 npm 安装 Mitt：

npm install mitt

CDN 引入

你也可以通过 CDN 引入 Mitt：

<script src="https://cdn.jsdelivr.net/npm/mitt@3.0.0/dist/mitt.umd.js"></script>

通过 CDN 引入后，mitt 会挂载到全局对象中（window.mitt），你可以直接使用。

3. 基本用法

Mitt 提供了三个基本的方法来管理事件：

on(event, handler)：用于注册事件监听器。
off(event, handler)：用于注销事件监听器。
emit(event, data)：用于触发事件。

3.1 创建实例

Mitt 的 API 是基于实例的，你首先需要创建一个事件管理器的实例。

// 导入 Mitt（如果使用 npm 安装）
import mitt from 'mitt';// 创建一个 Mitt 实例
const emitter = mitt();

3.2 注册事件监听器

使用 on 方法来注册事件监听器。

// 监听 'message' 事件
emitter.on('message', (data) => {console.log('收到消息:', data);
});

3.3 触发事件

使用 emit 方法来触发事件。

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

输出：

收到消息: Hello, World!

3.4 注销事件监听器

你可以使用 off 方法来移除事件监听器。

const handler = (data) => {console.log('事件被触发:', data);
};// 注册事件
emitter.on('message', handler);// 触发事件
emitter.emit('message', 'Hello again!'); // 会输出：事件被触发: Hello again!// 注销事件
emitter.off('message', handler);// clearing all events
emitter.all.clear()// 触发事件
emitter.emit('message', 'This should not be logged'); // 不会输出任何内容

3.5 触发多个事件

Mitt 也支持触发多个事件，只需要调用 emit 多次即可。

// 触发多个事件
emitter.emit('message', 'Hello');
emitter.emit('alert', 'This is an alert!');

4. 使用场景

Mitt 可以在许多场景下发挥作用，例如：

组件间通信：在不同组件间传递消息时，可以利用 Mitt 来管理自定义事件。
模块间解耦：如果你的应用包含多个功能模块，Mitt 可以作为模块之间的通信桥梁，避免模块间直接依赖。
简单的事件管理：对于一些不需要全局状态管理的项目，可以通过 Mitt 来简化事件的管理。

4.1 示例：组件间通信

假设你有两个组件，ComponentA 和 ComponentB，它们需要通过事件传递数据。

// 在 ComponentA 中触发事件
const emitter = mitt();const ComponentA = () => {const handleClick = () => {emitter.emit('data', 'Hello from A');};return (<button onClick={handleClick}>Send Data from A</button>);
};// 在 ComponentB 中监听事件
const ComponentB = () => {emitter.on('data', (data) => {console.log('Received in B:', data);});return <div>Listening to data...</div>;
};

4.2 示例：模块间通信

假设你有两个模块 ModuleA 和 ModuleB，你可以通过 Mitt 让它们互相通信。

// ModuleA.js
import mitt from 'mitt';const emitter = mitt();// 模块 A 触发事件
const sendData = () => {emitter.emit('data', { message: 'Data from ModuleA' });
};// ModuleB.js
import { emitter } from './ModuleA';// 模块 B 监听事件
emitter.on('data', (data) => {console.log(data);
});

5. Mitt 的优势与限制

优势

轻量：Mitt 的体积非常小，适合用于小型项目或模块化应用。
简单易用：API 简洁，容易上手，不需要太多配置或复杂的操作。
灵活性高：可以在任何地方使用，支持自定义事件管理，减少了全局状态的依赖。

限制

不支持命名空间：Mitt 的事件是全局的，无法为事件提供命名空间。这意味着所有事件会共享同一个命名空间。
没有内建的异步支持：Mitt 本身不提供事件的异步处理机制，因此需要额外的逻辑来处理异步事件。
没有内建的生命周期管理：Mitt 也不会自动清理未注销的事件监听器，可能会导致内存泄漏，需要开发者手动管理。

6. 总结

Mitt 是一个非常简单且轻量的事件管理库，适合在小型项目或模块化应用中使用。它提供了 on、off 和 emit 等简单的 API，让你可以轻松地进行自定义事件的监听与触发。

适合用于组件间通信、模块间解耦和事件驱动的场景。虽然它的功能非常基础，但对于不需要复杂功能的应用来说，Mitt 足够满足需求。

Mitt 库使用笔记

1. 介绍 Mitt 是一个轻量级的 JavaScript 库，用于在应用程序中实现事件触发和监听。它不依赖任何外部库，功能简洁，主要用于在模块间进行事件传递。体积小：Mitt 的压缩版本仅有几千字节，非常适合在前端框架中作为事件…...

编程日记 2025/9/18 16:30:09

OpenCVE：一款自动收集NVD、MITRE等多源知名漏洞库的开源工具，累计收录CVE 27万+

漏洞库在企业中扮演着至关重要的角色，不仅提升了企业的安全防护能力，还支持了安全决策、合规性要求的满足以及智能化管理的发展。前期博文《业界十大知名权威安全漏洞库介绍》介绍了主流漏洞库，今天给大家介绍一款集成了多款漏洞库的开源漏洞…...

编程日记 2025/9/18 16:26:21

uniapp中的uni-file-picker组件上传多张图片到服务器

由于在uniapp官方文档中的uni-file-picker组件可实现图片上传功能，默认的是上传到自带的服务，所以我们要修改成自己的服务器 1. 添加 :auto-upload"false" 加上这个取消自动上传 <uni-file-picker v-model"jobAddUpdateForm.imag…...

编程日记 2025/9/17 19:44:19

LIF神经元模型的显隐转换

本文星主将介绍LIF神经元模型的显式和隐式转换（星主看见有论文[1]是这个称呼的，所以本文也称显式和隐式），并得到隐式模型的解析解。注意：理解本文内容需要有一定的微积分基础，如果大家看着数学头疼&#xf…...

编程日记 2025/9/18 16:28:11

Node的学习以及学习通过Node书写接口并简单操作数据库

Node的学习 Node的基础上述是关于Node的一些基础，总结的还行； 利用Node书写接口并操作数据库 1. 初始化项目创建新的项目文件夹，并初始化 package.json mkdir my-backend cd my-backend npm init -y2. 安装必要的依赖安装Express.js&…...

编程日记 2025/9/18 14:24:05

Android 获取屏幕物理尺寸

注：编译 sdk 需要使用 30 因为引入了 WindowMetrics、uild.VERSION_CODES.R 新 sdk 才存在的类和属性某些场景处理 view ，对 view 显示的位置要求比较精确，通常我们使用context.getResources().getDisplayMetrics().widthPixels 获取到的宽、…...

编程日记 2025/9/16 5:52:34

【FFmpeg】解封装 ① ( 封装与解封装流程 | 解封装函数简介 | 查找码流标号和码流参数信息 | 使用 MediaInfo 分析视频文件 )

文章目录一、解封装1、封装与解封装流程2、解封装常用函数二、解封装函数简介1、avformat_alloc_context 函数2、avformat_free_context 函数3、avformat_open_input 函数4、avformat_close_input 函数5、avformat_find_stream_info 函数6、av_read_frame 函数7、avformat_s…...

编程日记 2025/9/13 22:49:31

#渗透测试#红队全栈 powshell基础使用

声明！ 学习视频来自B站up主泷羽sec，任何违法事件与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！ 目录标题认识powsehll打开方式使用方式美化自己的powershell简单…...

编程日记 2025/9/17 17:13:47

Qt之自定义标题栏拓展（十）

Qt开发系列文章 - user-defined-titlebars（十） 目录前言一、方式一 1.效果演示 2.创建标题栏类 3.可视化UI设计 4.定义相关函数 5.使用标题栏类二、方式二 1.效果演示 2.创建标题栏类 3.定义相关函数 1.初始化函数 2.功能函数 3.窗口关…...

编程日记 2025/9/14 21:50:46

设计模式之创建型

1、What 关注对象的创建过程，旨在通过不同的方式来创建对象，以解耦对象的创建与其使用过程。这些模式提供了创建对象的灵活性和可扩展性，使得代码更加易于维护和管理。 1.1 单例模式确保一个类只有一个实例，并提供一个全局访问…...

编程日记 2025/9/18 16:27:12

记录一下自己对网络安全法的笔记

仅记录一下自己对网络安全法的笔记文章来源（https://www.cac.gov.cn/2016-11/07/c_1119867116_2.htm）（2016年11月7日第十二届全国人民代表大会常务委员会第二十四次会议通过）该法自2017年6月1日起施行。《网络安全法》是我国第一…...

编程日记 2025/9/13 9:10:15

Mybatis-plus-Join--分页查询

数据表四张： user： id,username,create_time,update_time product： id,name,price,number(库存),create_time,update_times order： id,quantity,order_time(下单时间),update_time order_detail:id,product_id,order_id,quant…...

编程日记 2025/9/6 6:19:25

EE308FZ_Sixth Assignment_Beta Sprint_Sprint Essay 5

Assignment 6Beta SprintCourseEE308FZ[A] — Software EngineeringClass Link2401_MU_SE_FZURequirementsTeamwork—Beta SprintTeam NameFZUGOObjectiveSprint Essay 5_Day9-Day10 (12.19-12.20)Other Reference1. WeChat Mini Program Design Guide 2. Javascript Style Gui…...

编程日记 2025/9/18 16:27:13

【AI日记】24.12.19 kaggle 比赛 2-8 | 睡眠质量提高

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】工作参加：kaggle 比赛 Regression with an Insurance Dataset时间：8 小时读书书名：富兰克林自传时间：0.5 小时阅读原因：100 美元纸币上的人物 …...

编程日记 2025/9/15 13:27:34

string

1.对象创建 // // Created by 徐昌真 on 2024/12/15. // #include <iostream> #include <string>using namespace std;int main() {string s "意思是不要沉迷于空洞的幻想也不要追求无用的虚名强调了做事要脚踏实地专注于实际的目标与行动";// 1. 无…...

编程日记 2025/9/18 7:05:31

观龙鱼之态，察疾病之征

龙鱼，以其独特的外形、优雅的游姿，成为众多养鱼爱好者的心头好。然而，这些水中的 “精灵” 一旦患病，其状态会发生明显变化。了解龙鱼患病的表现，对于鱼主人及时发现并治疗至关重要。当龙鱼出现食欲不振的情况时&…...

编程日记 2025/9/10 1:14:58

【NLP 16、实践 ③ 找出特定字符在字符串中的位置】

看着父亲苍老的白发和渐渐老态的面容希望时间再慢一些 —— 24.12.19 一、定义模型 1.初始化模型 ① 初始化父类 super(TorchModel, self).__init__()： 调用父类 nn.Module 的初始化方法，确保模型能够正确初始化。 ② 创建嵌入层 self.embedding n…...

编程日记 2025/9/18 5:20:28

一.photoshop导入到spine

这里使用的是 photoshoptospine脚本下载地址:https://download.csdn.net/download/boyxgb/90156744 脚本的使用,可以通过文件的脚本的浏览,浏览该脚本使用该脚本,也可以将该脚本放在photoshop安装文件夹里的script文件夹下,具体路径:Photoshop\Presets\Scripts,重启photosho…...

编程日记 2025/9/18 16:28:10

docsify

macos ➜ ~ node -v v16.20.2➜ ~ npm --version 8.19.4全局安装 docsify-cli 工具 npm i docsify-cli -g➜ ~ docsify -vdocsify-cli version:4.4.4初始化项目 docsify init ./docsls -ah docs . .. .nojekyll README.md index.htmlindex.html 入口文件README.md 会…...

编程日记 2025/9/18 16:28:11

在Windows Server路由和远程访问服务中启用L2TP/IPsec VPN

背景路由和远程访问服务（Routing and Remote Access Services，RRAS）是Windows Server上的一个角色，包含很多功能，可以用来搭建VPN。然而，在什么也不做的初始配置中，它只允许PPTP协议连接。然而…...

编程日记 2025/9/18 9:35:18

感知机收敛性定理证明

1. 问题描述感知机收敛性定理假设： 存在一个参数向量 θ（被归一化为单位向量，，以及一个正数 ，使得对所有训练样本满足： 这是线性可分的假设，意味着每个样本点与正确超平面之间有一个至少为的…...

编程日记 2025/9/10 1:55:12

监控易平台：提升IDC 数据中心运维效率与质量

一、引言随着信息技术的飞速发展，IDC 数据中心作为信息存储、处理和传输的核心枢纽，其规模和复杂性不断增加。数据中心的稳定运行对于企业业务的连续性和发展至关重要，然而，传统的运维方式在面对日益增长的运维需求时&#xff0c…...

编程日记 2025/9/15 1:09:39

WordPress 资源展示型下载类主题 CeoMax-Pro_v7.6 开心版

WordPress 资源展示型下载类主题 CeoMax-Pro_v7.6 开心版； CeoMax-Pro是一款极致美观强大的WordPress付费资源下载主题，它能满足您所有付费资源下载的业务需求！ 你的想法与业务不能被主题所限制！CeoMax-Pro强大的功能&#xff0…...

编程日记 2025/9/18 16:28:12

java数据类型(补充-引用类型)

Java还提供了引用数据类型（Reference Types）。这些类型的变量存储的是对象的引用，而不是直接存储值。引用数据类型主要包括以下几类： 类型描述类(Class)每个对象都有自己的状态（属性或字段）、行为&#xf…...

编程日记 2025/9/11 14:25:34

【WRF教程第四期】WRF 初始化概述：以4.5版本为例

WRF 初始化（WRF Initialization） Building Initialization Programs编译方式理想案例初始化（Initialization for Idealized Cases）理想化案例的输入可用的理想化案例现实案例初始化（Initialization for Real Data Ca…...

编程日记 2025/9/18 9:53:47

「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台

本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲，并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度，是音乐播放器界面开发的基础功能示例。关键词 UI互动应用音乐控制播放控制动态展示状态管理按钮…...

编程日记 2025/8/26 5:49:57

Navicat 17 功能简介 | SQL 美化

SQL美化本期，我们将深入挖掘 Navicat 的实用的SQL代码美化功能。你只需简单地点击“SQL 美化”按钮，即可轻松完成 SQL 的格式化。随着 17 版本的发布，Navicat 也带来了众多的新特性，包括兼容更多数据库、全新的模型设计、可视化…...

编程日记 2025/9/16 5:32:44

C++ 只出现一次的数字 - 力扣（LeetCode）

点击链接即可查看题目：136. 只出现一次的数字 - 力扣（LeetCode） 一、题目给你一个非空整数数组 nums ，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。你必须设计并实现线性时间…...

编程日记 2025/9/11 20:16:05

Unity3D仿星露谷物语开发5之角色单例模式

1、目的使用单例模式创建角色对象，保证整个游戏中只有一个角色，并且让游戏对象具有全局可访问性。 2、流程 （1）创建SingletonMonobehaviour脚本 Assets下创建Scripts目录用于存放所有的脚本，再创建Misk子目录&…...

编程日记 2025/9/16 7:26:46

解析在OceanBase创建分区的常见问题｜OceanBase 用户问题精粹

在《分区策略和管理分区计划的实践方案》这篇文章中，我们介绍了在ODC中制定分区策略及有效管理分区计划的经验。有不少用户在该帖下提出了使用中的问题，其中一个关于创建分区的限制条件的问题，也是很多用户遭遇的老问题。因此本文以其为切入&…...

编程日记 2025/9/16 10:30:48

python学习路径（一）

学习 Python 的完整大纲应该从基础知识到高级应用层层递进，并以构建自己的项目为目标，最终形成自己的知识体系。以下是一个完整、详细且逻辑清晰的学习路径： 第一部分：Python 基础 1. 环境配置与工具 Python 安装与版本管理&…...

编程日记 2025/9/15 13:47:35

【Nginx-5】Nginx 限流配置指南：保护你的服务器免受流量洪峰冲击

在现代互联网应用中，流量波动是常态。无论是突发的用户访问高峰，还是恶意攻击，都可能导致服务器资源耗尽，进而影响服务的可用性。为了应对这种情况，限流（Rate Limiting）成为了一种常见的保护措施…...

编程日记 2025/9/17 13:19:46

OpenCV(python)从入门到精通——运算操作

加法减法操作 import cv2 as cv import numpy as npx np.uint8([250]) y np.uint8([10])x_1 np.uint8([10]) y_1 np.uint8([20])# 加法,相加最大只能为255 print(cv.add(x,y))# 减法，相互减最小值只能为0 print(cv.subtract(x_1,y_1))图像加法 import cv2 as…...

编程日记 2025/9/14 9:47:04

MFC 自定义网格控件

一、什么是 Custom Control？ Custom Control（自定义控件） 是 MFC（Microsoft Foundation Classes）框架中提供的一种控件类型，用于实现自定义的外观和功能。当标准控件（例如 CEdit、CButton、CLi…...

编程日记 2025/9/18 11:56:54

什么是卷积？卷积的意义

卷积是一种在数学和信号处理中广泛应用的运算方法，它通常被用于描述两个函数之间的关系。在信号处理中，卷积可以将两个信号进行组合，以得到一个新的信号，该信号反映了这两个原始信号之间的关系。具体来说，假设有两个…...

编程日记 2025/9/11 22:40:19

μC/OS-Ⅱ源码学习(7)---软件定时器

快速回顾 μC/OS-Ⅱ中的多任务 μC/OS-Ⅱ源码学习(1)---多任务系统的实现 μC/OS-Ⅱ源码学习(2)---多任务系统的实现(下) μC/OS-Ⅱ源码学习(3)---事件模型 μC/OS-Ⅱ源码学习(4)---信号量 μC/OS-Ⅱ源码学习(5)---消息队列 μC/OS-Ⅱ源码学习(6)---事件标志组本文进一…...

编程日记 2025/9/9 4:26:24

3D和AR技术在电商行业的应用有哪些？

3D展示和AR技术在电商行业的应用为消费者带来了更为直观、沉浸式的购物体验，显著提升了商品展示效果和销售转化率。以下是3D和AR技术在电商行业的具体应用： 1、商品3D展示： 通过3D技术，商品可以在电商平台上以三维形式呈现&…...

编程日记 2025/9/16 19:18:42

数据增强的几大方式

1. 随机擦除(Random Erasing) 说明随机在图像中选取一个矩形区域，将其像素值随机化或设为零，以增加模型对部分缺失信息的鲁棒性。 import numpy as np import cv2def random_erasing(image, sl0.02, sh0.2, r10.3):h, w, _ image.shapearea h * wta…...

编程日记 2025/9/14 20:01:19

GraphReader: 将长文本结构化为图，并让 agent 自主探索，结合的大模型长文本处理增强方法

GraphReader: 将长文本结构化为图，并让 agent 自主探索，结合的大模型长文本处理增强方法论文大纲理解为什么大模型和知识图谱不够？还要多智能体设计思路数据分析解法拆解全流程核心模式提问为什么传统的长文本处理方法会随着文本长度增加而…...

编程日记 2025/9/16 4:14:53

VTK 模型封闭 closeSurface 补洞，网格封闭性检测

网格封闭性检测见： vtk Edges 特征边提取网格封闭性检测_vtkfeatureedges-CSDN博客由于以前做过3D打印模型，要求模型必须是封闭的，原来对模型封闭有研究过，不过没有记录；现在又遇到，整理一下&#xff…...

编程日记 2025/9/15 7:52:01

【译】仅有 Text2SQL 是不够的：用 TAG 统一人工智能和数据库

原文地址：Text2SQL is Not Enough: Unifying AI and Databases with TAG 摘要通过数据库为自然语言问题提供服务的人工智能系统有望释放出巨大的价值。此类系统可让用户利用语言模型（LM）的强大推理和知识能力，以及数据管理系统…...

编程日记 2025/9/14 0:27:05

Java：链接redis报错：NoSuchElementException: Unable to validate object

目录前言报错信息排查1、确认redis密码设置是否有效2、确认程序配置文件，是否配置了正确的redis登录密码3、检测是否是redis持久化的问题4、确认程序读取到的redis密码没有乱码原因解决前言一个已经上线的项目，生产环境的redis居然没有设置密码&…...

编程日记 2025/9/17 8:33:28

每日一题 334. 递增的三元子序列

334. 递增的三元子序列使用贪心来找到三个数字 class Solution { public:bool increasingTriplet(vector<int>& nums) {int first INT_MAX;int second INT_MAX;for(int num : nums){if(num < first){first num;}else if(num < second){second num;}els…...

编程日记 2025/9/15 2:17:02

金仓 Kingbase 日常运维 SQL 汇总

编程日记 2025/9/15 6:12:37

JAVA开发ERP时在 PurchaseOrderServiceImpl.java 中添加日志记录进行调试

在 PurchaseOrderServiceImpl.java 中添加日志记录，以便在保存订单时输出参数进行调试。可以使用 Spring 的日志框架（SLF4J 和 Logback）来实现这一点。添加日志记录引入 SLF4J 依赖: 确保项目中已经包含了 SLF4J 和 Logback 的依赖。通常在…...

编程日记 2025/9/15 4:10:11

36.3 grafana-dashboard看图分析

kube-prometheus中的grafana总结 db使用 sqlit，volume类型为emptydir 无法持久化，pod扩缩就重新创建通过configMap设置的prometheus DataSource 通过 prometheus-k8s svc对应的域名访问下面对应两个prometheus容器，有HA 各个dashboard通过 …...

编程日记 2025/9/13 10:25:01