我是小渔歌，点击右上方”“，每天为你分享【前端技术知识】干货。

　　很多小伙伴都用过Vue事件总线，大家知道他的原理吗？

　　实际上它是基于发布订阅模式实现的。

　　发布订阅模式其实就在我们身边，我们几乎每天都在与它打交道，js的事件机制就是发布订阅模式的体现。

　　比如下面这个点击事件。

　　按钮：充当这个发布对象。

　　绑定事件：就是给发布者的缓存列表中添加事件，用于通知订阅者。

　　点击：用户点击时，发布消息时会遍历缓存列表中对应的点击事件（click）数组方法，触发里面回调函数执行。

　　<button id="btn">小渔歌</button>document.querySelector("#btn").addEventListener("click", function(e) { alert("了小渔歌")})一个事件可以绑定多个回调函数，所以说上面一个事件对应一个数组方法。

　　发布订阅模式定义的是对象间一对多的依赖关系。

　　由上面我们大概可以知道，实现发布订阅模式，需要什么了吧？

　　发布对象缓存列表发布方法订阅方法解除订阅废话不多说直接上代码。

　　class Vue { constructor() { this.handles = {}; //缓存列表 } // 订阅事件 on(eventType, handle) { if (!this.handles.hasOwnProperty(eventType)) { this.handles[eventType] = []; //初始化定义某个事件的缓存列表 } if (typeof handle == 'function') { this.handles[eventType].push(handle); //向缓存列表中添加方法 } else { throw new Error('缺少回调函数'); } return this; //实现链式调用 } // 发布事件 emit() { let eventType = Array.prototype.shift.call(arguments); let eventFun = this.handles[eventType]; if (eventFun && eventFun.length) { this.handles[eventType].forEach((item, key, arr) => { item.apply(null, arguments); }) //事件，缓存方法都存在则触发回调函数 } else { throw new Error(`"${eventType}"事件未注册`); } return this; //实现链式调用 } // 删除事件 off(eventType, handle) { if (!this.handles[eventType]) { throw new Error(`"${eventType}"事件未注册`); } else if (typeof handle != 'function') { throw new Error('缺少回调函数'); } else { this.handles[eventType].forEach((item, key, arr) => { if (item == handle) { arr.splice(key, 1); } }) //移出事件的回调函数 } return this; // 实现链式操作 }}let eventBus = new Vue();eventBus.on("update", function(data) { console.log(data, "小渔歌，我来啦。")});eventBus.emit("update", "小渔歌发布了新文章，快来看呀。");控制台输出

　　eventBus .off("update") .emit("update", "小渔歌又发布了新文章，快来看呀。")控制台输出

　　此时可以看到没解除之前触发了，解除事件之后，缓存列表中已经没有这个事件的数组方法了，所以抛错。

　　Vue的事件总线原理，你懂了吗？[中国赞]

　　往期精彩内容

　　前端生成PDF，这几个方案你一定要知道

　　FormData对象，知道吗？它可以让你在表单数据处理上事半功倍？

　　哪个比较好用：instanceof 还是 typeof?

　　作者介绍

　　小渔歌，90后前端研发工程师，热爱生活，一个在劳动中不断学习的人，愿我们共同进步，点不迷路[中国赞][作揖]。