订阅-发布

event bus 既是 node 中各个模块的基石,又是前端组件通信的依赖手段之一,同时涉及了订阅-发布设计 模式,是非常重要的基础

  1. // 将下列代码补充完整,可以使代码正确执行
  2. class EventEmeitter {
  3.     constructor() {
  4.         this._events = this._events || new Map();
  5.   }
  6. }
  7. EventEmeitter.prototype.emit = function( type, ...args ) {
  8.     // your code
  9. }
  10. EventEmeitter.prototype.addListener = function(type, fn) {
  11.     // your code
  12. }
  13. EventEmeitter.prototype.removeListener = function(type, fn) {
  14.     // your code
  15. }
  17. const emitter = new EventEmeitter();
  18. const say = name => {
  19.     console. log(`say: ${name}`);
  20. }
  22. emitter.addListener('say', say)     
  23. emitter.addListener('say', say);
  25. emitter.emit('say', 'Hello World!');
  26. emitter.removeListener('say', say);
  27. emitter.emit('say', 'Hello World!');
  28. // say: Hello World!
  29. // say: Hello World!

实现

  1. // 代码实现
  2. class EventEmeitter {
  3.     constructor() {
  4.       // 选择了 Map 作为存储事件的结构，因为作为键值对的储存方式 Map 比一般对象更加适合，我们操作起来也更加简洁
  5.     this._events = this._events || new Map();  // 储存事件，回调键值对
  6.     this._maxListeners || 10; // 设置监听上限
  7.   }
  8. }
  10. // 触发名为 type 的事件
  11. EventEmeitter.prototype.emit = function(type, ...args) {
  12.   let handler = this._events.get(type);
  13.   if (Array.isArray(handler)) {
  14.       // 如果是一个数组说明有多个监听者，需要依次触发；里面的函数
  15.     for (let i = 0; i < handler.length; i++) {
  16.         /* 触发监听函数我们可以用 apply 与 call 两种方法，在少数参数时 call 的性能更好，
  17.        * 多个参数时 apply 性能更好，当年 Node 的 Event 模块就在三个参数以下用 call 否则用 apply。
  18.        * Node 全面拥抱 ES6+ 之后，相应的 call/apply 操作用 Reflect 新关键字重写了
  19.        */
  20.       if (args.length > 0) {
  21.           handler[i].apply(this, args);
  22.       } else {
  23.           handler[i].call(this);
  24.       }
  25.     }
  26.   } else if (handler && typeof handler === 'function') {
  27.       // 单个函数情况直接触发
  28.     if (args.length > 0) {
  29.       handler.apply(this, args);
  30.     } else {
  31.       handler.call(this);
  32.     }
  33.   }
  34.   // 返回自身，链式调用
  35.   return this;
  36. }
  38. // 监听名为 type 的事件
  39. EventEmeitter.prototype.addListener = function(type, fn) {
  40.   // 获取对应事件的函数清单
  41.     const handler = this._events.get(type);
  42.   if (!handler) {
  43.     this._events.set(type, fn);
  44.   } else if (handler && typeof handler === 'function') {
  45.       // 如果 handler 是个函数，说明是一个监听者
  46.     this._events.set(type, [handler, fn]); // 多个监听者需要用数组存储
  47.   } else{
  48.     // 存在同类型监听者，直接往数组添加
  49.       handler.push(fn);
  50.   }
  51. }
  53. // 移除名为 type 的事件
  54. EventEmeitter.prototype.removeListener = function(type, fn) {
  55.   // 获取对应事件的函数清单
  56.     const handler = this._events.get(type);
  57.   if (handler && typeof handler === 'function') {
  58.       // 如果 handler 是个函数，说明只被监听一次
  59.     this._events.delete(type, fn);
  60.   } else{
  61.     if (!Array.isArray(handler)) {
  62.         return this;
  63.     }
  64.     // 如果 handler 是数组，说明被监听多次，需要依次移除对应的函数
  65.     let position = handler.indexOf(fn);
  66.     // 如果找到匹配的函数，从数组清除
  67.     if (position !== -1) {
  68.         // 找到对应的位置，直接清除此回调
  69.       handler.splice(position, 1);
  71.              // 如果清除后只有一个函数，那么取消数组，以函数形式保存
  72.       if (handler.length === 1) {
  73.           this._events.set(type, handler[0]);
  74.       }
  75.     }
  76.   }
  77. }