源码学习 mitt.js

本文正在参加「金石计划」

mitt是什么

mitt 将自己描述为一个 200 字节的小型函数式事件发射器/发布订阅器。
用于实现模块之间的通信、UI 交互等等。
github.com/developit/m…

源码学习

export type EventType = string | symbol;

定义了一个事件类型，可以是字符串或符号。

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

定义了两个事件处理函数类型： Handler 处理单个事件， WildcardHandler 处理多个事件。

export type EventHandlerList<T = unknown> = Array<Handler<T>>;
export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;

定义了事件处理函数列表类型， EventHandlerList 是单个事件处理函数的列表， WildCardEventHandlerList 是多个事件处理函数的列表。

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

定义了事件处理函数的映射类型，将事件类型映射到对应的事件处理函数列表。
EventHandlerMap的类型定义使用了Map类型，其键类型是keyof Events | '*'。keyof Events是Events类型的所有键的联合类型，而'*'则代表了通配符事件类型，即可以监听所有类型的事件。值类型是EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>。这里的值类型定义了每个键可以存储的值类型。其中EventHandlerList是一个泛型数组类型，其元素类型是Events[keyof Events]类型，也就是事件类型对应的值类型。WildCardEventHandlerList也是一个泛型数组类型，但是其元素类型是一个函数类型，即(type: EventType, event: unknown) => void。这里的函数类型表示的是通配符事件的处理函数类型，它接受两个参数，一个是事件类型，一个是事件数据，但是事件类型不一定和数据类型相对应。

export interface Emitter<Events extends Record<EventType, unknown>> {
	all: EventHandlerMap<Events>;

	on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
	on(type: '*', handler: WildcardHandler<Events>): void;

	off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>): void;
	off(type: '*', handler: WildcardHandler<Events>): void;

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

定义了事件发射器接口，具有注册事件、移除事件、触发事件等功能。

export default function mitt<Events extends Record<EventType, unknown>>(
  all?: EventHandlerMap<Events>
): Emitter<Events> {
  type GenericEventHandler =
    | Handler<Events[keyof Events]>
    | WildcardHandler<Events>;
  all = all || new Map();

  return {
    /**
     * A Map of event names to registered handler functions.
     */
    all,

    /**
     * Register an event handler for the given type.
     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
     * @param {Function} handler Function to call in response to given event
     * @memberOf mitt
     */
    on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
      const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
      if (handlers) {
        handlers.push(handler);
      } else {
        all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
      }
    },

    /**
     * Remove an event handler for the given type.
     * If `handler` is omitted, all handlers of the given type are removed.
     * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
     * @param {Function} [handler] Handler function to remove
     * @memberOf mitt
     */
    off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
      const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
      if (handlers) {
        if (handler) {
          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
        } else {
          all!.set(type, []);
        }
      }
    },

    /**
     * Invoke all handlers for the given type.
     * If present, `'*'` handlers are invoked after type-matched handlers.
     *
     * Note: Manually firing '*' handlers is not supported.
     *
     * @param {string|symbol} type The event type to invoke
     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
     * @memberOf mitt
     */
    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!);
          });
      }
    },
  };
}

出一个函数 mitt，它返回一个事件触发器对象，具有 on、off 和 emit 三个方法，用于注册、移除和触发事件。
函数使用了泛型类型参数 Events，它是一个继承自 Record<EventType, unknown> 的类型，其中 EventType 是一个字符串类型。Events 的值应该是一个对象，它的每个属性名表示事件类型，属性值是任意类型。这个函数的返回值类型是 Emitter<Events>，一个事件触发器对象，该对象支持注册、移除和触发事件。

函数体分为以下几个部分：

1. 使用了一个默认参数 all，如果调用函数时没有提供 all 参数，则将其赋值为一个新的空 Map 对象。
2. 返回一个对象字面量，具有三个属性 all、on 和 emit。其中 all 是一个 Map 对象，用于保存所有事件类型的处理函数。on 方法用于注册事件处理函数，emit 方法用于触发事件，off 方法用于移除事件处理函数。
3. on 方法需要两个参数：事件类型 type 和事件处理函数 handler。函数将 handler 添加到 all 对象中 type 属性所对应的处理函数数组中。
4. off 方法也需要两个参数：事件类型 type 和事件处理函数 handler。如果 handler 未提供，则移除该事件类型 type 对应的所有事件处理函数；否则，仅移除该事件类型 type 对应的特定处理函数。
5. emit 方法也需要两个参数：事件类型 type 和事件数据 evt。该方法会调用 type 对应的所有事件处理函数，并传入 evt 数据。如果 type 对应的处理函数数组中包含了通配符 *，则调用所有 * 对应的处理函数。通配符事件处理函数需要接收两个参数：事件类型和事件数据。