Vue js 和 fabric js 逻辑
Vue js and fabric js logic
我正在使用 Vue.js，我的组件之一是 2D canvas 编辑器（通过使用 fabric.js 库）。
问题是，这个编辑器的代码和我在其中进行的操作的代码变得非常冗长，无法成为组件脚本标记的一部分。
我尝试使用 mixins 并将代码分成单独的 mixin，例如 canvasMoving、copyPaste、grouping。
虽然这行得通，但我觉得这仍然不是可行的方法，也许我应该使用专门的 classes。我也相信 mixin 是当你有一个功能可以在多个组件之间共享时。
因为例如 copyPaste mixin，有时需要包含在 mixin grouping 中的方法。这对我来说真的很不对劲，因为该组件包含这两个 mixin，所以它工作正常，但如果我删除其中一个，它就会停止工作。
除此之外，所有这些 mixin 都与 canvas 一起工作，但是 canvas 仅在其中一个中初始化，并且他们可以再次访问它，因为该组件包含所有 mixin，但是如果我删除初始化 canvas 的 mixin，它们都会停止工作，因为 this.canvas 将是未定义的。
这里正确的做法是什么？我在考虑 classes 与依赖注入，比如让 master class 假设 Editor 并且它会有它的依赖项（分组、复制粘贴、绘图）或类似的东西。
那么我唯一不知道的是如何将我单独的 classes 与 Vue.js 组件连接起来。把masterclass放在我组件的data对象里？
所以最后我通过使用正常的 classes 而不是 mixins 解决了这个问题。我还使用 bottlejs 进行依赖注入。
现在每个 class 在它的构造函数中指定了它需要使用的其他 classes，所以它依赖于哪个 classes 就很清楚了。
同样，之前当一个 mixin 需要调用另一个 mixin 的方法时，这是一个简单的 this.methodName() 调用，不知道该方法位于何处，而现在 this._otherClass.methodName()
因为我需要访问 canvas、存储和发出事件，所以我创建了 class 编辑器，它有一个方法 init(canvas, store, eventBus)，因为我只能创建 Fabric canvas，在显示HTML canvas之后。 Bottle 使用空字段创建此 class，我在组件的安装阶段使用参数调用 init 函数。
然后我所有的 classes 都是 EditorProvider class 的祖先，它只有一个 getter 用于此编辑器 class（它进入构造函数并且存储在一个字段中），从那里我可以获得任何指定的字段。所以在我的任何 classes 中存储的调用看起来像：
this.editor.store.commit('anything')
致电canvas：
this.editor.canvas.renderAll()
调用事件总线：
this.editor.eventBus.emit('eventName')
我的组件现在只导入 bottlejs 并可以通过名称访问所有 classes。交互主要通过 canvas 和 window 事件，所以我创建了一个 EventHandler class，它将所有这些事件侦听器从组件中移到单独的 class。所以最后在组件中我只有 HTML 模板和几行导入和脚本标签，现在可读性更强并且依赖关系清晰可见。
我正在使用 Vue.js，我的组件之一是 2D canvas 编辑器（通过使用 fabric.js 库）。
问题是，这个编辑器的代码和我在其中进行的操作的代码变得非常冗长，无法成为组件脚本标记的一部分。
我尝试使用 mixins 并将代码分成单独的 mixin，例如 canvasMoving、copyPaste、grouping。
虽然这行得通，但我觉得这仍然不是可行的方法，也许我应该使用专门的 classes。我也相信 mixin 是当你有一个功能可以在多个组件之间共享时。
因为例如 copyPaste mixin，有时需要包含在 mixin grouping 中的方法。这对我来说真的很不对劲，因为该组件包含这两个 mixin，所以它工作正常，但如果我删除其中一个，它就会停止工作。
除此之外，所有这些 mixin 都与 canvas 一起工作，但是 canvas 仅在其中一个中初始化，并且他们可以再次访问它，因为该组件包含所有 mixin，但是如果我删除初始化 canvas 的 mixin，它们都会停止工作，因为 this.canvas 将是未定义的。
这里正确的做法是什么？我在考虑 classes 与依赖注入，比如让 master class 假设 Editor 并且它会有它的依赖项（分组、复制粘贴、绘图）或类似的东西。
那么我唯一不知道的是如何将我单独的 classes 与 Vue.js 组件连接起来。把masterclass放在我组件的data对象里？
所以最后我通过使用正常的 classes 而不是 mixins 解决了这个问题。我还使用 bottlejs 进行依赖注入。
现在每个 class 在它的构造函数中指定了它需要使用的其他 classes，所以它依赖于哪个 classes 就很清楚了。
同样，之前当一个 mixin 需要调用另一个 mixin 的方法时，这是一个简单的 this.methodName() 调用，不知道该方法位于何处，而现在 this._otherClass.methodName()
因为我需要访问 canvas、存储和发出事件，所以我创建了 class 编辑器，它有一个方法 init(canvas, store, eventBus)，因为我只能创建 Fabric canvas，在显示HTML canvas之后。 Bottle 使用空字段创建此 class，我在组件的安装阶段使用参数调用 init 函数。
然后我所有的 classes 都是 EditorProvider class 的祖先，它只有一个 getter 用于此编辑器 class（它进入构造函数并且存储在一个字段中），从那里我可以获得任何指定的字段。所以在我的任何 classes 中存储的调用看起来像：
this.editor.store.commit('anything')
致电canvas：
this.editor.canvas.renderAll()
调用事件总线：
this.editor.eventBus.emit('eventName')
我的组件现在只导入 bottlejs 并可以通过名称访问所有 classes。交互主要通过 canvas 和 window 事件，所以我创建了一个 EventHandler class，它将所有这些事件侦听器从组件中移到单独的 class。所以最后在组件中我只有 HTML 模板和几行导入和脚本标签，现在可读性更强并且依赖关系清晰可见。