1.介绍

这期读两个源码 mitt 和 tiny-emitter，【发布订阅】的设计模式，周下载量都是在百万级别的，实现原理差不多，mitt 是用 Typescript 实现的，tiny-emitter 是 javascript，且已经三年没更新了（说明比较稳定😃）。

【发布订阅】的思想是，订阅者把订阅的事件注册到调度中心，当该事件触发时候，发布者把该事件发布到调度中心，由调度中心统一调度，触发事件。

第8期 | mitt - 图1

学习目标：
1）解读源码，了解发布订阅设计模式的应用场景，输出记录文档。

源码地址：
mitt：https://github.com/developit/mitt
tiny-emitter：https://github.com/scottcorgan/tiny-emitter

2.源码解析

Mitt

比较习惯Typescript，看看 mitt。发布订阅主要有三个函数，一个订阅函数，一个取消订阅函数，一个发布函数。

  1. /** 事件类型，只能为string或symbol */
  2. export type EventType = string | symbol;
  4. /** 事件注册函数类型 */
  5. /** T 指代事件类型，默认为unknown */
  6. export type Handler<T = unknown> = (event: T) => void;
  8. /** 通配符处理器(*) */
  9. /** Record<Keys, Type>：构造一个对象类型，其属性键为Keys，其属性值为Type。此实用程序可用于将一种类型的属性映射到另一种类型。 */
  10. /** Record<string, unknown> 意思就是一个key为string，value为unknown的对象 */
  11. export type WildcardHandler<T = Record<string, unknown>> = (
  12. /** keyof T 代表对象的key值集合 */
  13. type: keyof T,
  14.   /** T[keyof T] 代表对应的key的value */
  15.   event: T[keyof T]
  16. ) => void;
  18. // 事件注册函数的集合
  19. export type EventHandlerList<T = unknown> = Array<Handler<T>>;
  21. /** 通配符(*)处理器集合 */
  22. export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;
  24. /** 事件处理程序 */
  25. export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
  26.   keyof Events | '*',
  27.   EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
  28. >;
  30. export interface Emitter<Events extends Record<EventType, unknown>> {
  31.   all: EventHandlerMap<Events>;
  33.   /** 重载，根据入参类型不同，其回调的类型也不同，下面也是一样 */
  34.   on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
  35.   on(type: '*', handler: WildcardHandler<Events>): void;
  37.   off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>): void;
  38.   off(type: '*', handler: WildcardHandler<Events>): void;
  40.   emit<Key extends keyof Events>(type: Key, event: Events[Key]): void;
  41.   emit<Key extends keyof Events>(type: undefined extends Events[Key] ? Key : never): void;
  42. }
  44. /**
  45. * Mitt: Tiny (~200b) functional event emitter / pubsub.
  46. * @name mitt
  47. * @returns {Mitt}
  48. */
  49. export default function mitt<Events extends Record<EventType, unknown>>(
  50. all?: EventHandlerMap<Events>
  51. ): Emitter<Events> {
  52.   type GenericEventHandler =
  53.   | Handler<Events[keyof Events]>
  54.   | WildcardHandler<Events>;
  55.   all = all || new Map();
  57.   return {
  59.     /** 注册的事件名称集合(Map) */
  60.     all,
  62.     /**
  63.     * 注册订阅事件
  64.     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
  65.     * @param {Function} handler Function to call in response to given event
  66.     * @memberOf mitt
  67.     */
  68.     on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
  69.       // ! 表示强制断言，表示一定存在
  70.       // handlers是所有订阅事件的集合
  71.       const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
  72.       if (handlers) {
  73.         // 之前事件存在过就直接把事件处理函数 push 进去
  74.         handlers.push(handler);
  75.       }
  76.       else {
  77.         // 如果没有，就新set一个 {"type": handler}
  78.         all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
  79.       }
  80.     },
  82.       /**
  83.       * 删除事件订阅
  84.       * If `handler` is omitted, all handlers of the given type are removed.
  85.       * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
  86.       * @param {Function} [handler] Handler function to remove
  87.       * @memberOf mitt
  88.       */
  89.       off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
  90.         const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
  91.         if (handlers) {
  92.           if (handler) {
  93.             // 删除事件订阅
  94.             // >>> 表示无符号右移，存在必然能删，不存在也删不着，写法比较优雅
  95.             handlers.splice(handlers.indexOf(handler) >>> 0, 1);
  96.           }
  97.           else {
  98.             // 不存在则重置type的所有handlers
  99.             all!.set(type, []);
  100.           }
  101.         }
  102.       },
  104.         /**
  105.         * 发布，触发事件
  106.         *
  107.         * @param {string|symbol} type The event type to invoke
  108.         * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
  109.         * @memberOf mitt
  110.         */
  111.         emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
  112.           // 触发事件注意要先slice拷贝一下，因为在迭代过程中如果调用了off函数，会改变handles
  113.           let handlers = all!.get(type);
  114.           if (handlers) {
  115.             (handlers as EventHandlerList<Events[keyof Events]>)
  116.               .slice()
  117.               .map((handler) => {
  118.               handler(evt!);
  119.             });
  120.           }
  122.           handlers = all!.get('*');
  123.           if (handlers) {
  124.             (handlers as WildCardEventHandlerList<Events>)
  125.               .slice()
  126.               .map((handler) => {
  127.               handler(type, evt!);
  128.             });
  129.           }
  130.         }
  131. };
  132. }

3.总结

发布订阅是比较高频的面试题，在实现emit的过程中，要注意需要拷贝一份handlers数组，避免在迭代过程中，如果调用了off函数，会改变handles数组这个情况。

另外后续加强TypeScript编写复杂类型的能力。