JavaScript中的事件总线库—— mitt

前言

什么是事件总线

事件总线（Event Bus）是一种用于在软件系统中传递事件和消息的机制。它基于发布-订阅模式，允许不同组件或模块之间进行解耦，通过发送和接收事件来实现彼此之间的通信。

事件总线通常由三个主要组件组成：发布者（Publisher）、订阅者（Subscriber）和事件（Event）。发布者负责发布事件，订阅者则订阅感兴趣的事件，并在事件发生时执行相应的操作。

通过使用事件总线，系统中的不同模块可以通过发布和订阅事件的方式进行通信，而不需要直接依赖于彼此。这种解耦的方式可以提高系统的可扩展性和灵活性，同时也降低了模块之间的耦合度。

事件总线在许多领域都有广泛的应用，包括前端开发、后端开发、分布式系统等。它可以用于实现事件驱动的架构、消息队列、异步通信等场景，帮助开发人员更好地组织和管理系统中的事件和消息。

应用

拿vue来说，vue2中提供了事件总线，vue3中好像没有。当然实际业务中好像很少会用到，就拿我们项目来说当跨组件（不是父子组件）通信时一般使用pinia。在组件a中改变缓存中的值，在组件b中监听值的变化。

一般在具体业务中很少会用到，因为可能会导致事件比较多，难以维护。但是在项目框架中使用感觉还是很有用的，统一维护处理各种事件。

mitt

介绍

Mitt是一个简洁、灵活的JavaScript事件订阅和发布库。它提供了一种简单的方式来管理应用程序中的事件，使得不同组件之间的通信更加方便和可维护。

Mitt的特点包括：

1. 简单易用：Mitt提供了一个简洁的API，使得事件的订阅和发布变得非常简单和直观。

2. 灵活性：Mitt支持多种事件类型，包括普通事件、命名空间事件和通配符事件，可以满足不同场景下的需求。

3. 高性能：Mitt使用了一些优化技巧，如缓存事件处理函数和使用原生的事件监听器，以提高性能和效率。

4. 可扩展性：Mitt提供了一些扩展机制，如插件和中间件，可以方便地扩展其功能和定制化。

使用

安装

npm install --save mitt

基本使用

import mitt from 'mitt'

const emitter = mitt()

// 监听事件
emitter.on('foo', e => console.log('foo', e) )

// 监听所有事件
emitter.on('*', (type, e) => console.log(type, e) )

// 发起事件
emitter.emit('foo', {
    
     a: 'b' })

// 清空所有事件
emitter.all.clear()

// 监听与取消事件
function onFoo() {
    
    }
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

示例