Существует множество фреймворков и библиотек JavaScript для создания повторно используемых веб-компонентов. Несомненно, они очень полезны при создании веб-компонентов, потому что они построены с использованием лучших шаблонов проектирования и заботятся о написании большого количества вспомогательного кода, который вам, как разработчику, может понадобиться написать при разработке веб-компонента.
Но в то же время нам нужно понять, что эти библиотеки делают за кулисами, чтобы это стало возможным.
Любой веб-компонент JS представляет собой не что иное, как смесь некоторого кода JS, связанного шаблона и некоторых входных данных или модели. Вот и все.
Давайте создадим веб-компонент, используя простой JS, html и один ввод. На следующем изображении показан список контактов, который содержит изображение, имя и описание. Вот так должен выглядеть окончательный результат.
Сначала создайте html-страницу с требуемым стилем.
Приведенный выше фрагмент создает что-то вроде этого
Вы, должно быть, заметили тег ‹ul› со стилем class="contact-list". Это место для добавления тегов ‹li›, которые мы создадим программно — повторно используемый компонент.
Затем используйте следующий скрипт
Сохраните этот скрипт в теге body, чтобы создать компонент на лету.
Особое внимание уделите функции createContactComponent(). Он принимает модель «контакт» и возвращает шаблон со смешанными данными. И затем, наконец, добавьте только что созданный контактный компонент в нужный ‹ul›.
Подводя итог, каждый повторно используемый компонент, который вы создаете с помощью Angular или React, использует функцию, которая принимает вашу модель в качестве входных данных и возвращает шаблон со смешанными данными, которые в конечном итоге отображаются в DOM вашего браузера.
Есть много других вещей, которые эти фреймворки делают, помимо простого создания шаблона с предоставленной моделью, например, как обрабатывать жизненный цикл компонента. Вот почему всегда желательно использовать такие фреймворки, как Angular/React/Vue. Это прекрасно написанные фреймворки, которые позволяют вам сосредоточиться только на написании бизнес-логики.
Удачи!
