源码学习目录

1. 前言

1.1 环境

  1. 操作系统: macOS 11.5.2
  2. 浏览器: Chrome 94.0.4606.81
  3. mitt 3.0.0
  4. tiny-emitter 2.1.0

    1.2 阅读该文章可以get以下知识点

  • 了解 mitt、tiny-emitter 作用和使用场景
  • 学习 发布订阅 设计模式

    2. 开始

    2.1 mitt 使用方法

    ```javascript import mitt from ‘mitt’

const emitter = mitt()

// listen to an event emitter.on(‘foo’, e => console.log(‘foo’, e) )

// listen to all events emitter.on(‘*’, (type, e) => console.log(type, e) )

// fire an event emitter.emit(‘foo’, { a: ‘b’ })

// clearing all events emitter.all.clear()

// working with handler references: function onFoo() {} emitter.on(‘foo’, onFoo) // listen emitter.off(‘foo’, onFoo) // unlisten

  1. <a name="ow0sa"></a>
  2. ## 2.2 mitt 源码
  3. ```javascript
  4. /**     ts声明,非逻辑代码 start     **/
  5. // 事件类型是字符串或者symbol
  6. export type EventType = string | symbol;
  8. // An event handler can take an optional event argument
  9. // and should not return a value
  10. // 传入事件
  11. export type Handler<T = unknown> = (event: T) => void;
  12. //  通配符处理,传入类型和事件
  13. export type WildcardHandler<T = Record<string, unknown>> = (
  14.     type: keyof T,
  15.     event: T[keyof T]
  16. ) => void;
  18. // An array of all currently registered event handlers for a type
  19. // 事件回调数组
  20. export type EventHandlerList<T = unknown> = Array<Handler<T>>;
  21. // 通配符事件回调数组
  22. export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;
  24. // A map of event types and their corresponding event handlers.
  25. // 事件类型和事件回调列表
  26. export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
  27.     keyof Events | '*',
  28.     EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
  29. >;
  31. export interface Emitter<Events extends Record<EventType, unknown>> {
  32.     all: EventHandlerMap<Events>;
  33.     // ts的重载,事件注册,可以传type也可以传*,进入到不同的handler回调
  34.     on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
  35.     on(type: '*', handler: WildcardHandler<Events>): void;
  36.      // 事件解绑
  37.     off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>): void;
  38.     off(type: '*', handler: WildcardHandler<Events>): void;
  39.     // 事件发布
  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. /**     ts声明,非逻辑代码 end     **/
  47. /**
  48.  * Mitt: Tiny (~200b) functional event emitter / pubsub.
  49.  * @name mitt
  50.  * @returns {Mitt}
  51.  */
  52. export default function mitt<Events extends Record<EventType, unknown>>(
  53.     all?: EventHandlerMap<Events>
  54. ): Emitter<Events> {
  55.   // type类型
  56.     type GenericEventHandler =
  57.         | Handler<Events[keyof Events]>
  58.         | WildcardHandler<Events>;
  59. // all可以传入map或者创建一个map
  60.     all = all || new Map();
  62.     return {
  63.         // type名称合集
  64.         /**
  65.          * A Map of event names to registered handler functions.
  66.          */
  67.         all,
  69.         /**
  70.          * Register an event handler for the given type.
  71.          * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
  72.          * @param {Function} handler Function to call in response to given event
  73.          * @memberOf mitt
  74.          */
  75.     // 事件注册, 事件名和回调函数
  76.         on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
  77.       // 事件名的列表是否存在,存在直接从all中get
  78.             const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
  79.             // 存在该事件名列表,直接push
  80.       if (handlers) {
  81.                 handlers.push(handler);
  82.             }
  83.       // 不存在,设置一个新的 {type: [handler]}
  84.             else {
  85.                 all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
  86.             }
  87.         },
  89.         /**
  90.          * Remove an event handler for the given type.
  91.          * If `handler` is omitted, all handlers of the given type are removed.
  92.          * @param {string|symbol} type Type of event to unregister `handler` from, or `'*'`
  93.          * @param {Function} [handler] Handler function to remove
  94.          * @memberOf mitt
  95.          */
  96.       // 事件解绑,事件名,回调函数选传
  97.         off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
  98.       // 查看是否存在该事件列表
  99.             const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
  100.             if (handlers) {
  101.         // 如果传入了回调函数,只从回调列表中删除这一个函数,其他的保留
  102.                 if (handler) {
  103.           // >>> 这个操作符就像>>操作符一样，只是左移的位总是零。
  104.           // >>> 不太会用,只知道大于等于0都是原来的值,如果小于0,是一个非常大的数字,基本越界,超出了handlers的范围
  105.                     handlers.splice(handlers.indexOf(handler) >>> 0, 1);
  106.                 }
  107.                 else {
  108.           // 清空该回调列表
  109.                     all!.set(type, []);
  110.                 }
  111.             }
  112.         },
  114.         /**
  115.          * Invoke all handlers for the given type.
  116.          * If present, `'*'` handlers are invoked after type-matched handlers.
  117.          *
  118.          * Note: Manually firing '*' handlers is not supported.
  119.          *
  120.          * @param {string|symbol} type The event type to invoke
  121.          * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
  122.          * @memberOf mitt
  123.          */
  124.     // 事件发布
  125.         emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
  126.             // 获取事件回调列表
  127.       let handlers = all!.get(type);
  128.             if (handlers) {
  129.                 (handlers as EventHandlerList<Events[keyof Events]>)
  130.             // 创建一个新的列表
  131.                     .slice()
  132.                     .map((handler) => {
  133.                         handler(evt!);
  134.                     });
  135.             }
  136.             // 获取属于* 的回调列表
  137.             handlers = all!.get('*');
  138.             if (handlers) {
  139.                 (handlers as WildCardEventHandlerList<Events>)
  140.                     .slice()
  141.                     .map((handler) => {
  142.           // 传入事件类型和值
  143.                         handler(type, evt!);
  144.                     });
  145.             }
  146.         }
  147.     };
  148. }

2.3 tiny-emitter 使用

  1. var Emitter = require('tiny-emitter');
  2. var emitter = new Emitter();
  4. emitter.on('some-event', function (arg1, arg2, arg3) {
  5.  //
  6. });
  8. emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');

2.4 tiny-emitter 源码

  1. // 这个写法不太推荐,声明了一个无语义化的构造函数
  2. function E () {
  3.   // Keep this empty so it's easier to inherit from
  4.   // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
  5. }
  7. E.prototype = {
  8.   // 事件注册 名称,回调,上下文
  9.   on: function (name, callback, ctx) {
  10.     // 这个e相当于mitt的map对象,存储事件和回到函数
  11.     var e = this.e || (this.e = {});
  12.         // 简写,当列表存在和不存在直接赋值[]
  13.     (e[name] || (e[name] = [])).push({
  14.       fn: callback,
  15.       ctx: ctx
  16.     });
  18.     return this;
  19.   },
  20.     // 事件注册,只执行依次
  21.   once: function (name, callback, ctx) {
  22.     var self = this;
  23.     // 回调函数
  24.     function listener () {
  25.       // 执行回调时,解绑这一个回调,其他相同的事件名称还是可以监听到发布的消息
  26.       self.off(name, listener);
  27.       // 执行回调函数
  28.       callback.apply(ctx, arguments);
  29.     };
  30.         // 在listener上在绑定了回调函数,可能有些处理用吧,怪异的写法
  31.     listener._ = callback
  32.     return this.on(name, listener, ctx);
  33.   },
  34.     // 事件发布
  35.   emit: function (name) {
  36.     // 支持数据多参数,将name这个参数去除了,这里是和mitt的差异点
  37.     var data = [].slice.call(arguments, 1);
  38.     // 生成新的数组,不修改原数组
  39.     var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
  40.     var i = 0;
  41.     var len = evtArr.length;
  42.         // 循环执行所有的回调事件
  43.     for (i; i < len; i++) {
  44.       evtArr[i].fn.apply(evtArr[i].ctx, data);
  45.     }
  47.     return this;
  48.   },
  49.     // 事件解绑,这里的回调函数必传,不支持批量删除所有的事件,这里是和mitt的差异点
  50.   off: function (name, callback) {
  51.     var e = this.e || (this.e = {});
  52.     var evts = e[name];
  53.     var liveEvents = [];
  54.         // 回调函数需要传的情况,删除这个函数
  55.     if (evts && callback) {
  56.       for (var i = 0, len = evts.length; i < len; i++) {
  57.         if (evts[i].fn !== callback && evts[i].fn._ !== callback)
  58.           liveEvents.push(evts[i]);
  59.       }
  60.     }
  62.     // Remove event from queue to prevent memory leak
  63.     // Suggested by https://github.com/lazd
  64.     // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
  65.     // 如果所有的回调事件都解绑了,直接删除事件列表
  66.     (liveEvents.length)
  67.       ? e[name] = liveEvents
  68.       : delete e[name];
  70.     return this;
  71.   }
  72. };
  74. module.exports = E;
  75. module.exports.TinyEmitter = E;

3. 总结

  1. mitt使用documentation自动生成文档,基于注释注释

  2. 这个语法可以用在indexOf配合splice处理,小于0基本会越界,不会删除数组中的值,如-1 >>>0 等于4294967295,依次往上加1

  3. mitt使用microbundle打包cjs,umd,mjs
  4. tiny-emitter 使用 browserify,没有microbundle的好用,需要配置的东西比较多
  5. tiny-emitter 和 mitt在发布订阅机制上逻辑是相同的,区别 | | mitt | tiny-emitter | | —- | —- | —- | | emit支持传递2个以上参数 | 不支持 | 支持 | | off是否支持全量解绑 | 支持 | 不支持 | | once只执行一次 | 不支持 | 支持 | | 是否支持监听所有事件* | 支持 | 不支持 | | 是否可以从外部传入事件map列表 | 支持 | 不支持 |

参考文档