Mitt:周下载量千万的轻量级事件发布订阅模块

本文约 900 字，阅读完大约 3 分钟。

HELLO ，这里是大熊的收藏录。

分享各种开源插件应用场景、使用方法、demo示例~

Vue 的 事件总线 听说过吧？

没听过？那一定是面试少了，这玩意儿在面试中经常会和父子组件通信方法论一起考核。

Vue2 时代玩事件总线倒是挺简单的，但 Vue3 就没那么轻松了，如果还想玩玩，可以考虑下 Mitt 这个基于事件通信封装的三方插件。

Mitt

一个仅占用 200 字节的事件通信模块。

项目仓库：https://github.com/developit/mittnpm 包：https://www.npmjs.com/package/mitt官网： 暂无英文文档：https://github.com/developit/mitt中文文档： 暂无star 数量： 11.8k (11836)开源协议： MITnpm 周下载量： 1900 万左右jsDelivr 月请求次数： 560 万左右（排 1903 名）最新版本： 3.0.1兼容性： Node.js/Browser(IE9+)文件大小： 1.1 kB (Gzip 0.8 kB)依赖数量： 零依赖更新状态： 三年前

虽然 Mitt 专为浏览器设计开发的，但在 Node.js 中也能正常使用。

开源的代码量也不是很多，有兴趣可以读读源码学习下大佬的编码思维。

安装

1、npm 安装

1npm i mitt

导入依赖

12345// CommonJSconst mitt = require('mitt')// ESMimport mitt from 'mitt'

2、浏览器端引入

1234567<!-- 传统 script 引入 --><scriptsrc="https://cdn.jsdelivr.net/npm/mitt@3.0.1/dist/mitt.umd.min.js"></script><!-- ESM --><scripttype="module">import mitt from 'https://cdn.jsdelivr.net/npm/mitt@3.0.1/+esm'</script>

示例

1、浏览器中使用

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<buttonid="emit">广播所有事件</button><buttonid="emit1">广播事件 evt1</button><buttonid="emit2">广播事件 evt2</button><buttonid="off2">关闭事件 evt2</button><buttonid="clear">清除全部事件</button><scriptsrc="https://cdn.jsdelivr.net/npm/mitt@3.0.1/dist/mitt.umd.min.js"></script><script>const emitter = mitt()// 监听所有事件  emitter.on('*', (type, data) => {console.log(`全局事件 ${type}`, data)  })// 监听指定事件  emitter.on('evt1', (data) => {console.log('evt1 事件接收到的数据：', data) // {type: '微信公众号'}  })functioneve2(data){console.log('evt2 事件接收到的数据：', data) // {'name': '前端路引'}  }  emitter.on('evt2', eve2)document.getElementById('emit1').addEventListener('click', () => {    emitter.emit('evt1', {'type': '微信公众号'})  })document.getElementById('emit2').addEventListener('click', () => {    emitter.emit('evt2', {'name': '前端路引'})  })document.getElementById('off2').addEventListener('click', () => {// 移除指定的事件监听函数// emitter.off('evt2', eve2)// 移除所有 evt2 事件监听    emitter.off('evt2')  })document.getElementById('emit').addEventListener('click', () => {// 使用 emitter.all 获取所有事件类型    emitter.all.keys().forEach(eventType => {if (eventType !== '*') { // 避免重复触发通配符事件        emitter.emit(eventType, {'type': '全局通知'})      }    })  })// 清空所有事件document.getElementById('clear').addEventListener('click', () => {    emitter.all.clear()  })</script>

运行效果：

2、Node.js 中使用

123456789101112const mitt = require('mitt')// 或者使用 ESM 导入// import mitt from 'mitt'const emitter = mitt()// 监听事件emitter.on('foo', e => {console.log('foo', e) // foo { a: 'b' }})emitter.emit('foo', { a: 'b' })

Node.js 中只要没跨进程，可以随便使用，只是要注意不要 new 出多个实例了。

最后

Mitt 非常适合 Vue/React 这类单页应用框架，在多页应用中反而无法使用，毕竟要跨标签页通信必须要一点点手段才行。