vuejs、fabricjs和window的事件处理

Question

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

最近我们开始重构，我们认为如果我们将所有事件统一在一个事件总线下会很好。因为现在我们有 3 种类型的事件：vuejs 事件、fabricjs 画布事件、窗口事件。

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

import EventEmitter from 'events'

class EventBus extends EventEmitter {}

const eb = new EventBus()
export default eb

然后我们可以在任何地方导入这个事件总线，比如import eventBus from '@/EventBus'

所以通过使用这个事件总线，我们不是 vue 组件的类可以对这些事件做出反应，这些事件也可以在 vue 组件中发出或捕获。

现在我们还想将 fabricjs 事件传输到我们的事件总线，这将消除类（和 vue 组件）直接引用画布以注册其事件的需要。

假设我们将有一个类引用画布，我们会将事件传输到我们的事件总线，如下所示：

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

虽然这可行，但我注意到它在处理诸如 mouse:moving 之类的事件时会产生一些性能开销，同时在画布上处理许多对象，这些事件被快速调用。

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

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

Answer 1

在 fabricjs 画布的特殊情况下，这种操作不应该那么昂贵。

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

这些操作是： 提取鼠标位置和几个加法，乘法以获得画布相对坐标。循环穿过对象并查看对象是否与该坐标相交。将事件处理程序绑定到画布实例并调用它。

您的事件转发应该不花钱。

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

例如，在任何地方导入您的画布实例以使其可访问，会将您的事件处理程序绑定到该特定画布，您的代码将开始以一种困难的方式引用它，当您想要将另一个画布添加到您的项目中时可能有麻烦了。