Как лучше всего создать динамический верхний и нижний колонтитулы, которые можно использовать в приложениях Vue и React?

Question

У меня есть много небольших проектов, которые являются дочерними приложениями для основного сайта, каждый из которых размещается в собственном контейнере в поддомене ниже родительского проекта.

Это не имеет большого значения для моего вопроса, но только для дополнительного контекста: основной сайт - это древний монстр Drupal 7, который через json раскрывает ссылки и структуру верхнего и нижнего колонтитула сайта. Эти ссылки и структура не претерпевают много изменений, но достаточно, чтобы детским приложениям был необходим простой способ обновления своих собственных версий.

Большинство «детских приложений» - это довольно простые одностраничные приложения, написанные на Vue & React.

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

Это жизнеспособно? Какая основа была бы лучше для этого?

Answer 1

Веб-компонент - это самый простой способ достичь того, что вам нужно.Напишите свой верхний и нижний колонтитулы как веб-компонент.Таким образом, его легко включить в приложение Vue / React.Либо вы можете использовать простые веб-компоненты или лучшую абстракцию, такую ​​как Stencil или Lit-Element.

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

const header = document.querySelector("#app-header");

Конечно, это не полностью декларативный способ выполнения действий.Если вам нужен декларативный подход, вы можете создать компонент Layout в Vue и React и использовать свои веб-компоненты в шаблоне JSX / template Layout.

В качестве необязательного расширения в аналогичной строке - компонент Layout.может быть другим веб-компонентом, который отображает компонент верхнего и нижнего колонтитула вместе с вашими мини-дочерними приложениями.Таким образом, вы можете избежать создания нескольких компонентов компоновки конкретного каркаса.Однако для вашего случая я не вижу необходимости.