首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自己实现一个eventBus

自己实现一个eventBus

作者头像
wade
发布2020-05-13 17:00:37
8460
发布2020-05-13 17:00:37
举报
文章被收录于专栏:coding个人笔记coding个人笔记

昨天使用了vue提供的事件发布订阅,于是今天就自己实现了一个,发现没有太大难度,直接上代码:

function EventBus() {}
EventBus.prototype.on = function (name, callback) {
 //如果没有事件对象,新增一个
 if(!this._events){
  //创建一个干净的没有原型链的对象
  this._events = Object.create(null);
 }
 //如果没有这个事件的订阅,新增一个,如果有,push进去
 if(!this._events[name]){
  this._events[name] = [callback];
 }else{
  this._events[name].push(callback);
 }
}
EventBus.prototype.emit = function (name, ...args) {
 //发布的时候,如果有这个事件,循环执行所有这个订阅的方法
 if(this._events[name]){
  this._events[name].forEach(callback => {
   callback(...args);
  })
 }
}
EventBus.prototype.off = function (name) {
 //如果有这个事件的订阅,清除所有订阅
 if(this._events[name]){
  delete this._events[name];
 }
}
EventBus.prototype.once = function (name, callback) {
 let once = (...args) => {
  callback(...args);
  this.off(name);
 };
 this.on(name, once);
}
let eventBus = new EventBus();
eventBus.on('on', function (msg) {
 console.log(msg);
})
eventBus.once('once', function (msg) {
 console.log(msg);
})
eventBus.on('off', function (msg) {
 console.log(msg);
})
eventBus.emit('on', '发布on1')//发布on1
eventBus.emit('on', '发布on2')//发布on2
eventBus.emit('once', '发布once')//发布once
eventBus.emit('once', '发布once')
eventBus.emit('off', '发布off')//发布off
eventBus.off('off')
eventBus.emit('off', '发布off')
```

on、off和emit没什么好说的,就是很简单的发布订阅,代码看一下也都理解了,once这个方法我觉得得理解一下,once方法其实就是执行on,执行一次之后执行off,我们可以采用函数劫持的方法,把订阅的方法劫持了,依然是执行on,但是回调变成自己的,当自己的回调执行之后,off移除这个订阅,这种做法好像也叫切片编程。

EventBus.prototype.once = function (name, callback) {
 let once = (...args) => {
  callback(...args);
  this.off(name);
 };
 this.on(name, once);
}
```

昨天有人问我eventBus具体应用场景,说实在的,我还真想不出来,兄弟组件之间传值、多层级组件之间传值。比如聊天点击进入一个页面,未读消息这种,大部分是在同一个页面展示,然后不同一个组件的场景才用得到,或者不同页面销毁一些会造成内存泄漏的场景。eventBus能解决的都有其它方法可以解决,其它方法也可以用eventBus解决,或许以后用到了eventBus之后,会觉得很香吧。

(完)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-05-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档