Vue js и fabric js logic
Я использую Vue.js, и один из моих компонентов - это редактор 2D-холста (с использованием библиотеки fabric.js).
Дело в том, что код этого редактора и операций, которые я в нем выполняю, становится довольно многословным, чтобы быть частью тега скрипта компонента.
Я пробовал использовать миксины и разделил код на отдельные миксины, такие как canvasMoving, copyPaste, grouping.
Пока это работает, я чувствую, что это все еще не тот путь, по которому, возможно, мне следует использовать специализированные классы. Также я верю, что миксин - это когда у вас есть функциональность, которую можно разделить между несколькими компонентами.
Потому что, например, миксину copyPaste иногда требуются методы, которые содержатся в миксине grouping. Тогда мне кажется, что это действительно неправильно, поскольку компонент включает в себя оба этих миксина, он работает нормально, но если я удалю один из них, он перестанет работать.
Более того, все эти миксины работают с холстом, но холст инициализируется только в одном из них, и снова они могут получить к нему доступ, потому что компонент включает в себя все миксины, но если я удалю миксин, который инициализирует холст, они все перестать работать, потому что this.canvas будет неопределенным.
Какой здесь правильный подход? Я думал о классах с внедрением зависимостей, например, если мастер-класс скажет Editor, и у него будут свои зависимости (группировка, copyPaste, рисование) или что-то в этом роде.
Тогда единственное, чего я не знаю, это как связать мои отдельные классы с компонентом Vue.js. Поместить мастер-класс в объект data моего компонента?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В конце концов, я решил эту проблему, используя обычные классы вместо миксинов. Я также использовал бутылка для внедрения зависимостей.
Теперь каждый класс в своем конструкторе указывает другие классы, которые ему необходимо использовать, поэтому сразу становится ясно, от каких классов он зависит.
Также раньше, когда одному миксину требовалось вызвать метод другого миксина, это был простой вызов this.methodName() без знания того, где находится этот метод, тогда как теперь это четко указано в this._otherClass.methodName().
Поскольку мне нужен был доступ к холсту, хранилищу, а также для генерации событий, я создал редактор классов, в котором есть метод init(canvas, store, eventBus), потому что я могу создать холст Fabric только после отображения холста HTML. Бутылка создает этот класс с пустыми полями, и я вызываю функцию инициализации с параметрами в смонтированном этапе моего компонента.
Тогда все мои классы являются предками класса EditorProvider, у которого есть только один метод получения для этого класса Editor (который он получает в конструкторе и сохраняет в поле), откуда я могу получить любое из указанных полей. Таким образом, вызов store в любом из моих классов выглядит так:
this.editor.store.commit('anything')
Вызов на холст:
this.editor.canvas.renderAll()
Звонок на eventbus:
this.editor.eventBus.emit('eventName')
Теперь мой компонент просто импортирует bottlejs и имеет доступ ко всем классам по их именам. Взаимодействие происходит в основном с помощью событий холста и окна, поэтому я создал класс EventHandler, который перемещает все эти прослушиватели событий из компонента в отдельный класс. Итак, в конечном итоге в компоненте у меня есть только HTML-шаблон и несколько строк импорта и тег скрипта, который теперь стал намного более читаемым, а зависимости четко видны.