手写发布订阅模式 EventEmitter

手写发布订阅模式 EventEmitter手写发布订阅模式EventEmitter1.简介最近发现好多大厂面试题里都有手写发布订阅模式EventEmitter,原因是vue和react的非父子组件的通信就是靠他实现的,下面是一个简易版的EventEmitter。2.代码//发布订阅模式classEventEmitter{constructor(){//事件对象,存放订阅的名字和事件如:…

大家好,欢迎来到IT知识分享网。手写发布订阅模式

手写发布订阅模式 EventEmitter

1.简介

最近发现好多大厂面试题里都有手写发布订阅模式 EventEmitter,原因是 vue 和 react 的非父子组件的通信就是靠他实现的,下面是一个简易版的 EventEmitter。

2.代码

// 发布订阅模式
class EventEmitter { 
   
  constructor() { 
   
    // 事件对象,存放订阅的名字和事件 如: { click: [ handle1, handle2 ] }
    this.events = { 
   }
  }
  // 订阅事件的方法
  on(eventName, callback) { 
   
    if (!this.events[eventName]) { 
   
      // 一个名字可以订阅多个事件函数
      this.events[eventName] = [callback]
    } else { 
   
      // 存在则push到指定数组的尾部保存
      this.events[eventName].push(callback)
    }
  }
  // 触发事件的方法
  emit(eventName, ...rest) { 
   
    // 遍历执行所有订阅的事件
    this.events[eventName] &&
      this.events[eventName].forEach(f => f.apply(this, rest))
  }
  // 移除订阅事件
  remove(eventName, callback) { 
   
    if (this.events[eventName]) { 
   
      this.events[eventName] = this.events[eventName].filter(f => f != callback)
    }
  }
  // 只执行一次订阅的事件,然后移除
   once(eventName, callback) { 
   
    // 绑定的时fn, 执行的时候会触发fn函数
    const fn = (...rest) => { 
   
      callback.apply(this, rest) // fn函数中调用原有的callback
      this.remove(eventName, fn) // 删除fn, 再次执行的时候之后执行一次
    }
    this.on(eventName, fn)
  }
}

3.使用

const event = new EventEmitter()

const handle = (...pyload) => console.log(pyload)

event.on('click', handle)

event.emit('click', 100, 200, 300, 100)

event.remove('click', handle)

event.once('dbclick', function() { 
   
  console.log('click')
})

event.emit('dbclick', 100)


参考链接

1.https://www.fed123.com/javascriptnodejs/4681.html

2.https://www.jianshu.com/p/e0575e17de2a

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15657.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信