(Примечание: это одна из статей, написанных в серии разработок на основе плагинов vue. Если вы новичок, пожалуйста, ознакомьтесь с полной историей здесь)
На верхнем уровне, если мы видим разработку интерфейсных приложений, у нас есть три основных уровня.
- Бизнес-уровень (логика)
- Уровень обслуживания (вызовы API)
- Уровень пользовательского интерфейса (презентация)
Давайте немного поговорим об этом и рассмотрим, как мы можем улучшить это с помощью нашего модульного подхода.
Бизнес-уровень
Здесь находится вся логика приложения. Поэтому мы подумали, как мы можем разделить этот слой, чтобы каждый мог написать свою логику для каждого плагина, который он использует. Интересно, что мы не придумали такого решения, потому что дифференцировать полную логику сложно, поскольку некоторая часть логики будет жестко связана с самим плагином. Итак, мы определили основную логику и дали хуки внутри приложения, и все эти хуки будут настроены с помощью файла конфигурации. Ранее мы видели, как создать основной плагин, который будет принимать эти конфигурации и внедрять их в каждый плагин.
Уровень обслуживания
Здесь интерфейсная часть взаимодействует с серверной частью и питает двигатель. Раньше мы никогда не думали о создании сервиса как отдельного пакета, но как только мы его создали, у нас появился большой контроль над плагинами. Итак, мы сделали сервисы отдельным пакетом, этот пакет - просто телефонная книга API. Таким образом, всем, кто хочет вызвать API, не нужно беспокоиться о статических параметрах и обо всем, что они могут вызвать сервис, используя имя.
Итак, в нашем сервисном пакете есть экземпляр Axios и все необходимые URL-адреса для вызовов API. Теперь в нашем плагине мы будем вызывать службу по
service.makeCall('user/getUsers').then(...)
Теперь мы можем предоставить потребителю возможность манипулировать этим вызовом API в такой конфигурации, как,
plugins:{
users:{
services:{getUsers:'user/getUsersV2'}
}
}
В наших плагинах вместо вызова по умолчанию мы сначала проверим конфигурацию и сообщим службе сделать вызов.
Уровень пользовательского интерфейса
Когда наш движок запущен, это место, где мы можем увидеть некоторый контент. Поэтому мы подумали о том, чтобы попрактиковаться в некоторых вещах, которые могут немного облегчить нашу жизнь.
Инжектор тем
Мы создали инжектор тем, который будет вводить цвета во время выполнения на основе некоторого идентификатора. Мы разместили несколько файлов CSS и сценарий, который вставит файл CSS во время выполнения.
Общие компоненты
Когда мы создаем компоненты для подключаемых модулей, в конечном итоге мы получаем некоторые стандартные компоненты, которые можно использовать во всех подключаемых модулях. Итак, мы создали общий пакет компонентов, в котором будут присутствовать все общие компоненты, которые будут использоваться во всех плагинах.
Шаблоны
Мы столкнемся со сценарием, когда нам придется динамически изменять дизайн во время выполнения. Для этого мы использовали подход vue template slots (прочтите эту статью).
