Переиспользуемые компоненты

Unpoly — это легковесная JavaScript-библиотека для ускорения интерфейса веб-приложений за счёт динамической подгрузки фрагментов страницы без полной перезагрузки. Одним из ключевых подходов при работе с Unpoly является построение переиспользуемых компонентов, что позволяет создавать модульный, поддерживаемый и отзывчивый интерфейс.

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

Структура компонента

Стандартная структура компонента включает следующие элементы:

  1. Контейнер с идентификатором или классом

    <div id="user-profile" class="component">
    <h2 class="username"></h2>
    <p class="email"></p>
    <button class="refresh-btn">Обновить</button>
</div>

    Контейнер является точкой привязки для Unpoly. Любые обновления через up.render или ссылки с up-target будут применяться именно к этому элементу.

  2. Шаблон HTML Шаблон может находиться прямо на сервере или быть встроен в страницу через <template>. Он определяет, как будет выглядеть компонент при подгрузке:

    <template id="user-profile-template">
    <h2 class="username">{{username}}</h2>
    <p class="email">{{email}}</p>
</template>

  3. JS-функции и обработчики событий Для переиспользуемых компонентов важно отделять логику от разметки. Используются обработчики через up.on, чтобы событие автоматически привязывалось при каждом обновлении фрагмента:

    up.on('click', '.refresh-btn', function(event) {
    const target = up.fragment(event.target.closest('.component'));
    up.render(target, '/user/profile');
});

Динамическая подгрузка и обновление

Unpoly позволяет обновлять компоненты по целевому селектору с помощью up.render:

up.render('#user-profile', '/user/profile', {
    method: 'GET',
    cache: 'no-cache'
});
  • Первый аргумент — селектор компонента на странице (up-target).
  • Второй аргумент — URL фрагмента на сервере.
  • Опции — метод запроса, кеширование, дополнительные заголовки и прочее.

Важно использовать up-target для изолированного обновления. Если компонент содержит внутренние интерактивные элементы, они будут автоматически инициализированы после обновления.

Параметры и контекст компонента

Чтобы компонент был переиспользуемым, его содержимое должно быть параметризируемым:

up.render('#user-profile', '/user/profile', {
    params: { user_id: 42 }
});

На сервере можно возвращать только HTML-фрагмент для указанного пользователя, не перезагружая всю страницу. Это упрощает модульное тестирование и снижает связанность компонентов.

Повторное использование событий

Unpoly автоматически удаляет старые обработчики событий при перерисовке элемента, если использовать делегирование через up.on. Это предотвращает дублирование обработчиков:

up.on('click', '.component .edit-btn', function(event) {
    const target = up.fragment(event.target.closest('.component'));
    up.render(target, '/edit/form');
});
  • .component .edit-btn — селектор кнопки внутри компонента.
  • Событие будет работать при каждой подгрузке компонента.

Вложенные компоненты

Unpoly поддерживает вложенные компоненты. Можно обновлять часть компонента, не трогая родителя:

<div id="user-profile">
    <div class="avatar"></div>
    <div class="info"></div>
</div>
up.on('click', '.update-avatar', function(event) {
    up.render('.avatar', '/user/avatar', { params: { user_id: 42 } });
});

Каждый внутренний блок работает как отдельный переиспользуемый компонент, что облегчает масштабирование интерфейса.

Кэширование компонентов

Для ускорения интерфейса можно использовать кэширование HTML-фрагментов:

up.render('#user-profile', '/user/profile', {
    cache: 'session'
});
  • cache: 'session' — сохраняет фрагмент на время сессии, повторные запросы будут брать данные из кэша.
  • cache: 'no-cache' — принудительно обновляет компонент.

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

Итоговая структура переиспользуемого компонента

  1. HTML-контейнер с уникальным селектором.
  2. Шаблон HTML с параметрами.
  3. JS-обработчики событий через up.on.
  4. Обновление через up.render с параметрами и таргетом.
  5. Вложенные компоненты и кэширование для сложных интерфейсов.

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

Оглавление