Выделение компонентов и частичные шаблоны

По мере роста кодовой базы HTML одни и те же фрагменты разметки появляются на многих страницах: заголовок сайта, нижний колонтитул, навигация, карточка товара, поле формы. Копирование и вставка создают серьёзные проблемы с сопровождением: изменение нижнего колонтитула требует редактирования каждой страницы.

Большинство языков серверной шаблонизации (Jinja, Liquid, ERB, EJS, Handlebars, Twig) поддерживают директивы включения: {% include "header.html" %} или <%- include("header") %>. Сборка или сервер встраивает фрагмент в каждую страницу, которая его подключает.

JSX/TSX (React), одnofайловые компоненты Vue, компоненты Svelte и компоненты Astro выражают ту же идею с более строгой семантикой: компонент объединяет структуру, стили и поведение. Они преобразуются в HTML во время сборки (SSG) или выполнения (SSR/CSR).

Группируйте фрагменты и компоненты по назначению: partials/layout/ для заголовка, нижнего колонтитула и навигации, partials/blocks/ для блоков главного экрана, возможностей и призывов к действию, partials/forms/ для полей, кнопок и списков выбора. Последовательная организация упрощает навигацию по библиотеке фрагментов по мере её роста.

Параметры делают фрагменты более мощными: {% include "button.html" with label="Save", variant="primary" %}. Внутри фрагмента обращайтесь к параметрам по имени. Один и тот же шаблон создаёт разные кнопки на разных страницах сайта.

Для фрагментов, оборачивающих произвольное содержимое (карточки, диалоговые окна), используйте шаблоны со слотами: {% block content %}{% endblock %} в Jinja, {% block %} в Twig и свойство {children} в JSX. Оборачивающий фрагмент предоставляет оболочку, а вызывающий код — внутреннее содержимое.

Генераторы статических сайтов (11ty, Astro, Hugo, Jekyll) обрабатывают включения во время сборки — в развёрнутом HTML не остаётся синтаксиса шаблонов. Динамическая шаблонизация (PHP, Rails, Express+EJS) обрабатывает их во время запроса — это гибко, но медленнее. Выбирайте подход в зависимости от того, должно ли содержимое меняться при каждом запросе.

Фрагменты должны содержать собственные стили CSS. Фрагмент нижнего колонтитула использует footer.css, а фрагмент кнопки — button.css. Если этап сборки объединяет только CSS фактически используемых на странице фрагментов, это предотвращает загрузку CSS всех компонентов на каждой странице.

Каждый фрагмент должен проверяться отдельно: отображайте его с разными данными и проверяйте результат. Такие инструменты, как компонентное тестирование Cypress или тестирование снимков Jest, подходят и для фрагментов HTML. Проверенные фрагменты можно безопасно изменять без ручной проверки каждой использующей их страницы.

Фрагменты работают как программный интерфейс. Изменение имён параметров, соглашений о слотах или обязательных свойств нарушает работу каждого вызывающего кода. Документируйте интерфейс фрагмента, постепенно объявляйте устаревшие возможности и используйте инструмент поиска, чтобы перед реорганизацией найти все места использования.

Создавайте страницы, объединяя фрагменты: заголовок, боковую панель, содержимое, нижний колонтитул и фрагменты аналитики. Каждый фрагмент небольшой и сосредоточен на одной задаче, поэтому сама страница превращается в короткий сценарий сборки, соединяющий их. Такой подход гораздо понятнее, чем один HTML-файл размером 800 строк.

Чтобы выделить фрагмент, найдите повторяющуюся разметку на разных страницах, скопируйте её в partials/X.html, замените каждое вхождение директивой включения и вынесите в параметры значения, которые отличаются у вызывающего кода. Выделяйте по одному фрагменту за раз — кодовая база будет постепенно улучшаться.

Каково главное преимущество выделения повторяющегося фрагмента HTML, например нижнего колонтитула сайта, в отдельный фрагмент?

Выделяйте повторяющуюся HTML-разметку в отдельные фрагменты и компоненты с помощью серверных включений (Jinja, Twig, EJS) или компонентов фреймворков (React, Vue, Svelte, Astro). Передавайте данные через параметры, а компоненты объединяйте с помощью слотов. Группируйте их по назначению, тестируйте отдельно и рассматривайте сигнатуру фрагмента как программный интерфейс. Выполняйте миграцию постепенно: каждое выделение уменьшает дублирование и улучшает сопровождаемость.