Показательный пример — ElementUI
Основной причиной повторяющегося кода в нашей кодовой базе было преодоление поведения по умолчанию некоторых библиотек, особенно ElementUI. Отличная библиотека во всех аспектах, но большинство библиотек не дадут вам того уровня конфигурируемости, который позволил бы идеально подогнать ее под требования вашего проекта.
Возможно, именно по этой причине вы попали на эту статью.
Проблема
Да, вы, наверное, видели это раньше. Тот конкретный набор конфигураций, который просто разбросан по всему коду и каждый раз делает одно и то же, но его сложно обобщить. Его сложно поддерживать, и его легко пропустить.
Решение № 1. Создайте собственные компоненты-оболочки
Эксперты 9/10 рекомендуют всегда создавать компоненты-оболочки для библиотек, чтобы вы могли придерживаться своей собственной терминологии и оставаться по-настоящему независимыми от библиотек. Это также болезненно громоздко и в большинстве случаев является огромным излишеством.
Простой процесс — передать атрибуты и прослушиватели событий от родителя, добавить поведение по умолчанию и синхронизировать модель. Вы также можете добавить пользовательские классы и поведения на основе реквизита, возможности действительно безграничны.
Мне лично такой подход не очень нравится. Теоретически вы можете избавиться от ElSelect в пользу VSelect или даже создать собственный компонент, который поддерживает все используемые функции из плагина и даже больше. Тем не менее, я не делал этого ни в каких ситуациях.
Это подход, который следует использовать, если у вас есть компоненты уровня организации с огромным количеством повторного использования.
Решение № 2. Расширьте компонент для поддержки вашей кодовой базы
Отказ от ответственности: это подход, который я выбрал, поэтому я немного предвзято отношусь к нему.
Другой способ сделать это — сделать библиотеку своей собственной и переопределить поведение компонента в соответствии с потребностями вашего проекта. Есть две ключевые части информации, которые вам нужно понять, чтобы сделать это:
- Что такое компонент Vue на самом деле.
Чтобы сильно упростить, компонент — это его объект $options, который определяет шаблон, вычисляемые свойства и всю функциональность внутри компонента. - Как работает Vue.extend($options).
Vue.extend позволяет добавлять/переопределять функции компонента, расширяя его объект $options. Он позволяет вам изменять определения методов, изменять вычисляемое поведение, добавлять хуки жизненного цикла, добавлять новых наблюдателей и т. д. За исключением изменения шаблона, с помощью этой функции довольно легко сделать большинство вещей.
В качестве примера № 2 следующий код
добавит пользовательскую опору и новый созданный хук, который будет вызываться каждый раз при создании ElSelect как показано здесь.
Чтобы убедиться, что вы не упустите ни одного оригинального поведения, вам следует погрузиться в исходный код библиотеки.
Легко предсказать, что должно произойти. Вы можете написать простую утилиту, чтобы переопределить поведение по умолчанию, или даже преобразовать ее в небольшой плагин, который вы сможете использовать. Вот что я в итоге написал -
Помните, вызывайте это после первоначального определения компонента и до того, как будут использованы какие-либо экземпляры этого компонента.
Vue.use(ElementUI);
Vue.use(ElementDefaultOverrides);
new Vue({
el: '#app',
render: h => h(App),
});
Примечание. Не забудьте добавить в README небольшое предупреждение о том, что компоненты могут не соответствовать поведению, описанному в документации библиотеки, и почему. Ваши коллеги-разработчики будут вам благодарны.
Очень полезный гайд, который помог мне во всем этом разобраться -
