vuejs、fabricjs和window的事件处理

Question

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

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

所以我们创建了简单的 EventBus class 像这样：

import EventEmitter from 'events'

class EventBus extends EventEmitter {}

const eb = new EventBus()
export default eb

然后我们可以像 import eventBus from '@/EventBus'

这样的任何地方导入这个事件总线

因此，通过使用此事件总线，我们的 class 不是 vue 组件的 es 可以对这些事件做出反应，并且这些事件也可以在 vue 组件中发出或捕获。

现在我们也想将 fabricjs 事件传输到我们的事件总线，这将消除 classes（和 vue 组件）直接引用 canvas 进行注册的需要参加活动。

所以假设我们将有一个 class，其中我们引用了 canvas，我们将像这样将事件传输到我们的事件总线：

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

虽然这有效，但我注意到它在 mouse:moving 等事件上有一些性能开销，同时在 canvas 上处理许多对象，其中事件被称为快速。

我的问题是，我们应该那样做吗？或提供所有 classes 对 canvas 的访问权限，以便它们都可以直接注册到其事件总线并删除此 'unnecessary' 从一个事件总线到另一个事件总线的传输？

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

Answer 1

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

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

这些操作是：提取鼠标位置和一些加法、乘法以获得 canvas 相对坐标。遍历对象并查看对象是否与该坐标相交。将事件处理程序绑定到 canvas 实例并调用它。

您的事件转发应该是免费的。

说的对不对，要看项目。如果清晰的代码和组织的好处超过了额外的函数包装，那么它就有意义了。

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

Event handling of vuejs, fabricjs and window