предисловие
Это пятая статья о фронтенде бизнес-платформы о выводе [Веб-компонентов] в бизнес-практику.
Из этой статьи вы узнаете, что такое веб-компоненты, и лучшие практики их реализации в бизнес-сценариях.
Скриншоты этой статьи взяты из внутреннего обмена технологиями интерфейса бизнес-платформы.
Первое, первое знакомство (что такое веб-компоненты)
Технология Shadow DOM используется в реализации видеокомпонентов, предоставляемых html5.Технология Shadow DOM является одним из основных наборов веб-компонентов, а ввод и выбор также используют эту технологию.Что такое Shadow DOM, будет объяснено ниже.
2. Практика
Исходя из бизнеса, давайте сначала посмотрим на наглядный проект карточки заказа:
Код, реализованный с помощью веб-компонентов, выглядит следующим образом:
Вот три основных набора технологий, используемых в веб-компонентах.
- Шаблон: используйте шаблон для создания DOM;
- Shadow DOM: используйте Shadow DOM для изоляции стилей CSS;
- Пользовательские элементы: используйте пользовательские элементы для настройки элементов, наследуйте от HTMLElement, HTMLElement — это класс в API DOM, наследующий этот класс, имеет общие атрибуты и API-интерфейсы html, и используйте пользовательские элементы для настройки элементов;
Шаблоны и пользовательские элементы легко понять, так что же такое Shadow DOM?
Вы можете просто понять, что Shadow DOM — это независимая песочница, которая не мешает другим элементам DOM и может естественным образом изолировать стили CSS! Подобно тегу стиля Scoped в Vue, он не мешает другим стилям тегов.
Давайте подробнее рассмотрим<order-card />Код компонента:
В настоящее время содержимое компонента жестко закодировано, как динамически генерировать DOM? Продолжим чтение:
Ответ заключается в использованииWeb Componentsжизненный цикл компонента, который нужно сделать, которыйconnectedCallbackто естьdomУзел монтируется и вызывается в первый раз, и он будет вызываться только один раз, когда вы можете получить атрибуты, переданные извне. изменения свойств вызовутattributeChangedCallback, Вы можете делать вещи, связанные с обновлением dom здесь. Это не раскрывается здесь. Вы можете исследовать это самостоятельно.
domЕго можно генерировать динамически, как работает событие клика?
На самом деле, как вы обычно пишетеVueкомпоненты,Reactкомпоненты, как вVueсредний да@click,существуетReactсредний даonClick, конкретный пример может относиться к следующему рисунку:
Ну, давайте сначала поговорим об основах. Это веб-компоненты!
3. Резюме
Веб-компоненты имеют следующие характеристики:Сценарии его применения также относительно богаты:
Библиотека компонентов
Например: Версия Taro v3, которая уже практиковала WC в Китае, это скриншот с официального сайта:
охватывать
Например: смысл cross-end заключается в том, что набор компонентов Web Components может работать как в Web, так и в апплете, работающем в Web, который, естественно, поддерживается Web Components, и выполнимое решение для запуска в апплете может обратитесь к Under Taro 3.x.
Основной принцип заключается в том, что среда выполнения Taro предоставляет набор API-интерфейсов для моделирования DOM и BOM. API, который в конечном итоге вызывается React и Vue, будет сопоставлен с набором API, смоделированным средой выполнения taro, а затем среда выполнения Taro создаст апплет WeChat внутри смоделированного API Связанные компоненты и вызовы API. В настоящее время внутренний Tencent с открытым исходным кодомomi-mpЧтобы добиться кросс-энда, вы можете посмотреть, если вам интересно.
микро интерфейс
Несколько основных элементов микроинтерфейсов: независимость от технологического стека, изоляция приложений и независимая разработка. В настоящее время веб-компоненты совместимы, поэтому теоретически возможно использовать веб-компоненты в качестве микроинтерфейса.
4. Сделайте что-нибудь
Теперь, когда мы знаем, насколько хороши туалеты, что мы можем сделать с ними для нашего бизнеса?
🍉🍉🍉 Короткий рассказ:
В начале сентября наша бизнес-мидл и клиентская команда создавали библиотеку компонентов Vue вместе с цифровой командой, тогда наш менеджер по продукту предложил перестроить заказ, который включал бы несколько проектов технологических стеков React и Vue. .
Поэтому мы начали искать компонентное решение, которое может пересекать стек технологий.В сентябре наша группа создавала библиотеку компонентов Vue 2.x с DigiTech, одновременно изучая возможность кросс-технологических компонентов.
После непрерывных исследований мы использовали время буфера бизнес-развития, чтобы подготовить набор библиотек компонентов стека для разных технологий, основанных на технологии веб-компонентов!
Вот грандиозное введение в нашу работу Quark:Официальный сайт, пожалуйста, нажмите
Говоря с данными, следующая картинаQuarkС точки зрения бизнес-приземления, до сих пор Quark мог выдерживать проекты 40w+ pv, и данные мониторинга показывают, что работа находится в хорошем состоянии.
- 【Малый размер】Легче света,Общий размер пакета Quark cdn составляет 20 КБ!
- [Кросс-технологический стек] Поддержка различных фреймворков, таких как Vue, React, Angular и т. д. / без фреймворка
- 【Высокое качество】19+ высококачественных компонентов
- [Загрузка по запросу] Поддержка цитирования по запросу
- [Полная документация] Подробная документация и примеры
- [Одиночный тест] Покрытие юнит-тестами
- 【TS】Поддержка TypeScript
- 【SSR】Поддержка рендеринга на стороне сервера
- 【Тема】Поддержка пользовательских тем
Отметьте, что некоторые статьи были отправлены на форум внутренней сети!
над.