Условная загрузка

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

Селекторы и таргеты

В Unpoly условная загрузка привязывается к таргету (target). Таргет — это CSS-селектор, указывающий на элемент страницы, который будет обновлён. Например:

<div id="comments"></div>
<a href="/posts/42/comments" up-target="#comments">Показать комментарии</a>

Событие клика по ссылке загрузит контент только в элемент с id="comments". Если элемент отсутствует на странице, запрос не будет выполнен, что позволяет избежать лишнего трафика.

Использование атрибутов up-if и up-unless

Для условной загрузки Unpoly предоставляет два основных атрибута:

  • up-if — выполняет запрос, если выражение истинно.
  • up-unless — выполняет запрос, если выражение ложно.

Примеры:

<a href="/notifications" up-target="#notification-panel" up-if="window.userLoggedIn">
  Показать уведомления
</a>

<a href="/promo" up-target="#promo-banner" up-unless="window.promoDismissed">
  Специальное предложение
</a>

Здесь загрузка панели уведомлений произойдет только если переменная userLoggedIn равна true, а баннер акции — только если promoDismissed не установлен.

Отложенная загрузка через up-on и up-delay

Unpoly позволяет запускать условную загрузку по различным событиям, не ограничиваясь кликом:

  • up-on задаёт событие, на которое реагирует ссылка или форма.
  • up-delay откладывает выполнение запроса на указанное количество миллисекунд.

Пример:

<a href="/search/suggestions" up-target="#suggestions" up-on="input" up-delay="300">
  Поиск
</a>

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

Динамическая проверка условий через JavaScript

Атрибуты up-if и up-unless могут содержать любой JS-код, который возвращает true или false. Это позволяет создавать сложные логические условия:

<a href="/dashboard/alerts" up-target="#alerts-panel"
   up-if="window.notificationsEnabled && window.userRole === 'admin'">
  Показать оповещения
</a>

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

Unpoly активно используется для ленивой подгрузки частей интерфейса — форм, таблиц, панелей уведомлений. Стратегия:

  1. На странице размещается контейнер с уникальным идентификатором.
  2. Ссылка или событие инициируют загрузку контента в этот контейнер.
  3. Атрибуты up-if и up-unless контролируют, нужна ли загрузка.
<div id="analytics-panel"></div>
<button up-target="#analytics-panel"
        up-if="window.showAnalytics">
  Загрузить аналитику
</button>

Контент панели будет подгружен только при выполнении условия window.showAnalytics.

Комбинация с up-preload и кэшированием

Unpoly позволяет предварительно подгружать ресурсы без их немедленного отображения. Атрибут up-preload работает вместе с условной загрузкой:

<a href="/chat/messages" up-target="#chat" up-preload up-if="window.chatEnabled">
  Чат
</a>

В этом случае запрос выполняется заранее, если условие истинно, но контент появится только при активации соответствующего элемента.

Обработка ошибок и fallback

При условной загрузке важно учитывать ситуации, когда условие изменилось или элемент отсутствует. Unpoly предоставляет:

  • Событие up:request:error для обработки ошибок.
  • up-on-error для выполнения альтернативного действия.

Пример:

<a href="/user/profile" up-target="#profile" up-if="window.loggedIn"
   up-on-error="alert('Не удалось загрузить профиль')">
  Профиль
</a>

Если условие истинно, но запрос не удался, пользователь получит уведомление.

Интеграция с серверной логикой

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

<a href="/dashboard/widgets" up-target="#widgets" up-if="userHasWidgets">
  Загрузить виджеты
</a>

На сервере проверяется userHasWidgets и формируется ответ только при наличии данных. Это обеспечивает согласованность фронтенда и бэкенда.

Ключевые практики

  • Использовать up-if и up-unless для контроля сетевых запросов.
  • Комбинировать с up-delay для минимизации лишних загрузок при динамическом вводе.
  • Применять up-preload для ускорения реакции интерфейса.
  • Всегда обрабатывать ошибки через up-on-error или события up:request:error.
  • Проверять наличие таргета, чтобы избежать лишних запросов и ошибок DOM.

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

Оглавление