文章目录 概述思路要清晰实现要迅猛测试效果优化怎么在Vue项目中使用

概述

我们都知道。 xxx.$on可以订阅一个消息。 xxx.$emit可以发布一个消息。 xxx.$off可以取消订阅一个消息。

不知道的人emm，参考这篇：Vue——如何自定义一个组件。

思路要清晰

这个过程涉及到的几个概念。

订阅过程： 消息，肯定要区分，来个name。 消息也要有事做，来个handler。 一堆消息，要有地方放，来个arr。

订阅时，交代叫什么name，干什么handler。

发布过程： 发布时，交代叫什么，来个name。 发布也可能有一些参数，来个param。

发布时，交代叫什么name，传递参数param。

取消订阅过程： 取消订阅，肯定要知道名字，来个name。

取消订阅时，交代要取消的name。

实现要迅猛

代码不多。

class EventBus { constructor() { this.arr = []; } on = (name, fn) => { let filter = this.arr.filter(v => v.name === name); if (filter.length === 0) { this.arr.push({ name, fn }) } } emit = (name, param) => { let filter = this.arr.filter(v => v.name === name); if (filter.length === 1) { filter[0].fn(param); } } off = (name) => { this.arr = this.arr.filter(v => v.name !== name); } }

构造：初始化事件数组。

实例的on：查重，如果重复了就啥都不干。没重复就push。 实例的emit：查重，如果有这事件就调用。 实例的off：筛选赋值。

测试效果

代码不多。

let bus = new EventBus(); bus.on('say', (msg) => { console.log(msg); }); let i = 0; let timer = setInterval(() => { if (i >= 30) { bus.off('say'); clearInterval(timer); return; } bus.emit('say', "你好，世界！" + i++) }, 1000);

新建一个消息中心。 订阅一个事件。 计时器，每隔一秒发布该消息。 30下后，取消订阅。

运行结果：

30秒后：

查看是否取消成功：

成功！

优化

使用ES6的Map代替数组，效率更好。

class EventBus { map = new Map(); on = (name, handler) => { if (!this.map.has(name)) { this.map.set(name, handler); } } emit = (name, param) => { let handler = this.map.get(name); if (handler !== null) { handler(param); } } off = (name) => { this.map.delete(name); } } 怎么在Vue项目中使用

做个插件，创建实例，绑定Vue的原型即可。 别闹了，Vue自带的。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。