Javascript vuejs、fabricjs和Windows的事件处理

在我们的项目中，我们使用Vuejs和Fabricjs，在画布上绘制一些东西并对其进行编辑等

最近，我们开始重构，我们决定，如果我们将所有事件统一到一个事件总线下，那就太好了。因为现在我们有3种类型的事件：vuejs事件、fabricjs画布事件和窗口事件

因此，我们创建了简单的EventBus类，如下所示：

import EventEmitter from 'events'

class EventBus extends EventEmitter {}

const eb = new EventBus()
export default eb

this._canvas.on({
      'mouse:down': e => eventBus.emit('canvas:mouse:down', e),
      'mouse:up': e => eventBus.emit('canvas:mouse:up', e)
})

然后，我们可以在任何地方导入此事件总线，就像从“@/eventBus”导入eventBus一样

因此，通过使用此事件总线，非vue组件的类可以对这些事件作出反应，并且这些事件也可以在vue组件中发出或捕获

现在我们还想将fabricjs事件传输到我们的事件总线，这样就不需要类和vue组件直接引用canvas来注册其事件

假设我们有一个类，其中引用了canvas，并将事件传输到事件总线，如下所示：

import EventEmitter from 'events'

class EventBus extends EventEmitter {}

const eb = new EventBus()
export default eb

this._canvas.on({
      'mouse:down': e => eventBus.emit('canvas:mouse:down', e),
      'mouse:up': e => eventBus.emit('canvas:mouse:up', e)
})

虽然这样做有效，但我注意到它在诸如鼠标之类的事件上有一些性能开销：在画布上操作许多对象时移动，其中的事件称为fast

我的问题是，我们应该这样做吗？或者提供对画布的所有类访问，以便它们都可以直接注册到其事件总线，并删除从一个事件总线到另一个事件总线的“不必要”传输

---

我的同事也希望将窗口事件移动到我们的事件总线，但这对我来说似乎更加错误，因为我们拥有的一切都可以访问窗口对象。

在fabricjs画布的特定情况下，这种操作应该不会太贵

鼠标移动时的fabricjs事件执行一些标准操作，这些操作稍微依赖于您拥有的对象数量

这些行动是： 提取鼠标位置，并对其进行加法、乘法运算，得到画布的相对坐标。通过对象循环，查看对象是否与该坐标相交。将事件处理程序绑定到画布实例并调用它

您的事件转发不应花费任何费用

这取决于项目是否合理。如果清晰的代码和组织的好处超过了额外的函数包装，那么它是有意义的

---

例如，到处导入canvas实例以使其可访问，将事件处理程序绑定到特定的canvas，您的代码将以一种困难的方式开始引用该实例，即当您想向项目添加另一个canvas时，您可能会遇到麻烦。

我们最终确实为canvas和vue做了这件事，我们不是在使用vuejs事件总线，而是一个通用的事件总线，可以在任何地方使用。窗口事件保持不变，因为我们可以访问任何地方的窗口对象。直接硬绑定到画布可能存在问题的观点也是正确的。