自己动手实现EventEmit

本文介绍了作者在React项目中实践观察者模式,通过动手实现EventEmitter的过程,揭示了EventEmitter的工作原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近做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');

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值