2018 год был годом компонентной архитектуры, и когда веб-компоненты были встроены в браузеры, давайте посмотрим, какие проблемы они решают.

До этого момента, если вам нужно совместно использовать или повторно использовать какой-либо компонент пользовательского интерфейса, вы должны использовать JavaScript API, который загрузит скрипт в глобальную область видимости. Что, если есть лучший подход, подумайте, есть ли у вас такой элемент, как этот ‹date-picker› ‹/date-picker›, который инкапсулирует весь стиль, функциональность и отображает средство выбора, а также может быть доступен из любой структуры или библиотеки, поскольку он встроен в браузер. Звучит круто, не правда ли. И это веб-компоненты.

Вот определение веб-компонентов MDN:

«Веб-компоненты - это набор различных технологий, позволяющих создавать многократно используемые настраиваемые элементы - с их функциональностью, инкапсулированной отдельно от остальной части вашего кода - и использовать их в ваших веб-приложениях».

В этом посте давайте подробно рассмотрим, как создавать архитектуру и создавать простую музыкальную библиотеку с помощью собственных веб-компонентов, а также как поддерживать состояние и делегирование событий.

Три спецификации веб-компонентов, прежде чем начать с него:

Пользовательские элементы

Это определяемые пользователем теги html, которые являются продолжением HTMLElement. Чтобы отличаться от родных, мы должны добавить тире к нашему элементу. Пример: ‹music-lib›

Теневой DOM

Это дает отличную возможность оборачивать стиль внутри веб-компонентов, чтобы CSS не выплеснулся за пределы компонента.

Шаблон HTML

Визуализируйте шаблон по запросу, только когда это необходимо.

Для музыкальной библиотеки, которая выглядит, как показано ниже, мы делим ее на 3 компонента. Это ‹music-lib›, ‹add-song› и ‹each-song›. Что дает нам три настраиваемых элемента. Мы визуализировали шаблон по запросу для каждого компонента и прикрепили к нему обработчики событий. Мы также наблюдаем за изменениями атрибутов некоторых элементов, поэтому, если происходит какое-либо изменение, мы повторно визуализируем компонент на его основе.

‹music-lib›
Это самый верхний компонент, который инкапсулирует список песен и ввод для добавления песни.

‹each-song›
Здесь наблюдается «fav», и когда компонент ‹music-lib› устанавливает атрибут fav для ‹each-song›, компонент отображает значение из него, и изменяется соответственно.

‹song-input›
В этом компоненте входное значение принимается и передается компоненту ‹music-library› после нажатия клавиши Enter.

Полный код можно найти здесь. Этот пост не призывает не использовать React или какие-либо другие фреймворки. Люди, заинтересованные в повторном рендеринге DOM, не стесняются выбирать подходящую библиотеку.

Удачного кодирования!