我扒光了mitt的源码，发现了这些不为人知的秘密

mitt，它简洁优雅的API设计让我眼前一亮，作为一个好奇的开发者，我决定深入它的源码，看看这个微型库究竟是如何运作的。

从API设计看核心思想

打开mitt的源码，首先映入眼帘的是几个关键的类型定义。这些类型就像建筑的蓝图，告诉我们这个库的设计哲学：

typescript 复制代码

export type Handler<T = unknown> = (event: T) => void;
export type WildcardHandler<T = Record<string, unknown>> = (
  type: keyof T,
  event: T[keyof T]
) => void;

这里定义了两种事件处理器：普通处理器 和通配符处理器。普通处理器只接收事件对象，而通配符处理器则可以接收事件类型和事件对象。这种设计让我想起了观察者模式中的主题和观察者关系，mitt巧妙地将这种关系用极简的代码表达出来。

核心数据结构：事件映射表

mitt的核心在于这个EventHandlerMap：

typescript 复制代码

type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
  keyof Events | '*',
  EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
>;

它使用了一个Map结构来存储事件类型和对应的处理器列表。这种设计有几个精妙之处：

类型安全：通过泛型约束，确保事件类型和事件对象类型匹配
灵活性：支持字符串和Symbol作为事件类型
扩展性：通配符'*'可以监听所有事件

在实际项目中，这种设计意味着我们可以这样使用：

typescript 复制代码

const emitter = mitt<{
  login: { user: string },
  logout: void
}>();

emitter.on('login', ({ user }) => {
  console.log(`${user} logged in`);
});

emitter.on('*', (type) => {
  console.log(`Event ${type} occurred`);
});

事件注册：on方法解析

让我们看看on方法的实现：

typescript 复制代码

on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
  const handlers = all!.get(type);
  if (handlers) {
    handlers.push(handler);
  } else {
    all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
  }
}

从类型层面看，通过Key extends keyof Events的泛型约束，强制type参数必须是Events类型中已定义的键，这在 TypeScript 环境下构建了严格的类型检查机制，避免了无效事件类型的传入。

实现逻辑上，核心围绕all这个 Map 对象展开 ------ 它存储着事件类型与对应监听器数组的映射关系。代码首先尝试从all中获取当前事件类型对应的监听器数组handlers，这里的all!非空断言表明了对all已初始化的假设。

后续分支处理清晰：若handlers存在（该事件已有监听器），则直接将新的handler推入数组，实现多监听器的累积；若不存在（首次注册该事件），则创建包含当前handler的新数组，并以事件类型为键存入all。

事件派发：emit方法详解

事件派发是事件系统的核心功能，mitt的实现同样精彩：

typescript 复制代码

emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
  let handlers = all!.get(type);
  if (handlers) {
    (handlers as EventHandlerList<Events[keyof Events]>)
      .slice()
      .map((handler) => {
        handler(evt!);
      });
  }

  handlers = all!.get('*');
  if (handlers) {
    (handlers as WildCardEventHandlerList<Events>)
      .slice()
      .map((handler) => {
        handler(type, evt!);
      });
  }
}

首先针对指定的type事件，从all这个 Map 中获取对应的监听器数组handlers。若存在该数组，则通过slice()创建副本（避免在触发过程中因监听器数组被修改而导致异常），再逐个调用数组中的 handler，并将evt参数传入 ------ 这完成了对特定事件类型监听器的触发。

值得注意的是对通配符'*'的处理：在触发完指定类型事件后，代码会再次从all中获取'*'对应的监听器数组。若存在，则同样通过slice()创建副本后逐个调用，此时传入的参数除了事件数据evt，还包括事件类型type。这种设计让通配符监听器能捕获所有事件的触发，为全局事件监听提供了支持。

取消订阅：off方法剖析

取消事件订阅看似简单，但mitt的实现考虑了很多边界情况：

typescript 复制代码

off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
  const handlers = all!.get(type);
  if (handlers) {
    if (handler) {
      handlers.splice(handlers.indexOf(handler) >>> 0, 1);
    } else {
      all!.set(type, []);
    }
  }
}

首先从all这个 Map 中获取指定type对应的监听器数组handlers。只有当该数组存在时，才进行后续处理：

若传入了具体的handler，则通过indexOf找到该监听器在数组中的位置，再用splice移除它。这里的>>> 0操作很巧妙 ------ 当indexOf返回 - 1（即未找到该监听器）时，这个无符号右移会将其转为 0，此时splice(0, 1)会尝试删除数组第一个元素，但由于原数组中不存在目标 handler，不会意外删除数组元素，这种处理实际上避免了错误，同时保持了代码简洁。

若未传入handler，则直接将该事件类型对应的监听器数组设为空数组，相当于一次性移除该事件的所有监听器。

类型系统的精妙运用

mitt的类型系统设计尤其值得称道。通过条件类型和泛型，它实现了出色的类型安全：

typescript 复制代码

emit<Key extends keyof Events>(
  type: undefined extends Events[Key] ? Key : never
): void;

这个重载声明确保了当事件类型定义中某个类型的事件对象是可选的（undefined）时，emit可以不带事件对象调用。这种精细的类型控制让开发者在享受灵活性的同时，还能获得类型检查的保护。

性能优化的思考

虽然mitt代码量极小，但在性能方面也有考虑：

使用原生Map和Array：这些数据结构在现代JavaScript引擎中高度优化
惰性初始化：不预先分配内存，按需创建数据结构
避免不必要的操作：如off方法中只有当handler存在时才进行查找和删除

在大型应用中，这些微优化累积起来能带来可观的性能提升。我曾经重构过一个使用Object存储事件处理器的大型应用，改用Map后性能提升了约15%。

结语

分析mitt的源码是一次令人愉悦的学习体验。它证明了优秀的软件设计不在于代码量的多少，而在于对问题本质的理解和恰到好处的抽象。

正如mitt的作者所展示的，有时候限制（200字节的大小）反而能激发出最优雅的设计。这让我想起了一句话："完美不是在没有东西可加的时候实现的，而是在没有东西可减的时候实现的。"mitt正是这种理念的完美体现。