自己动手实现EventEmit

最近做React项目的时候使用了events库中的EventEmit,动手实现了一个简易版,了解到EventEmit本质上是观察者模式的一种实现。

export default class EventEmitter {
  constructor() {
    this.event = {};
    this.maxListerners = 10;
  }
  // 监听
  on(type, listener) {
    if (this.event[type]) {
      if (this.event[type].length >= this.maxListerners) {
        console.error('同一个监听器最多被十个对象监听,否则可能造成内存泄漏.\n');
        return;
      }
      this.event[type].push(listener);
    } else {
      this.event[type] = [listener];
    }
  }
  //发送监听
  emit(type, ...rest) {
    if (this.event[type]) {
      this.event[type].map(fn => fn.apply(this, rest));
    }
  }
  //移除监听器
  removeListener(type) {
    if (this.event[type]) {
      delete this.event[type];
      console.log(this.event);
    }
  }
  //移除所有的监听器
  removeAllListener() {
    this.event = {};
  }
}

调用:

import EventEmit from './EventEmit';
let DeviceEventEmit = new EventEmit();
DeviceEventEmit.on('event', (param1, param2) => {
  console.log('DeviceEventEmit', param1, param2);
});
DeviceEventEmit.emit('event', 'param1', 'param2');
DeviceEventEmit.removeListener('event');

运行结果:
在这里插入图片描述

发布了110 篇原创文章 · 获赞 62 · 访问量 23万+

猜你喜欢

转载自blog.csdn.net/hxy19971101/article/details/102625608