Расширение функциональности

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

Хуки жизненного цикла

Unpoly предоставляет хуки, которые позволяют вмешиваться в процесс загрузки, отображения и замены фрагментов HTML. Основные категории:

  • up:click — срабатывает при клике на элемент, обрабатываемый Unpoly.
  • up:request — перед отправкой AJAX-запроса.
  • up:response — после получения ответа от сервера, до замены контента.
  • up:fragment:loaded — после вставки нового фрагмента в DOM.
  • up:layer:opened — при открытии слоя (layer) или модального окна.

Пример использования:

up.on('up:fragment:loaded', function(event) {
  const fragment = event.fragment;
  console.log('Фрагмент загружен:', fragment);
});

С помощью хуков можно реализовать валидацию форм перед отправкой, анимацию при обновлении контента и логирование пользовательских действий.

Кастомные события

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

// Создание кастомного события
const fragment = up.fragment('#comments');
up.emit(fragment, 'comments:updated', { count: 42 });

// Подписка на событие
up.on('comments:updated', function(event) {
  console.log('Количество комментариев:', event.detail.count);
});

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

Расширение через слои и модальные окна

Unpoly предоставляет API для слоёв (layers) — изолированных частей интерфейса, которые можно открывать поверх основного контента. Слои позволяют создавать всплывающие модальные окна, динамически подгружать формы и компоненты.

up.layer.open('/users/123/edit', {
  layer: 'modal',
  title: 'Редактирование пользователя',
  size: 'large'
});

Параметры слоёв:

  • layer — идентификатор слоя.
  • title — заголовок окна.
  • size — размеры (small, medium, large).
  • cache — кэширование фрагмента.
  • animation — тип анимации при открытии/закрытии.

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

Переопределение поведения загрузки

По умолчанию Unpoly использует встроенные AJAX-запросы для загрузки контента. Поведение можно переопределить, подключив собственные обработчики запросов или используя адаптеры.

Пример: изменение метода запроса для определённых ссылок.

up.on('up:request', function(event) {
  if (event.target.matches('.api-link')) {
    event.request.method = 'POST';
    event.request.headers['X-Custom-Header'] = 'value';
  }
});

Также можно использовать глобальные перехватчики для обработки ошибок:

up.on('up:response', function(event) {
  if (!event.response.ok) {
    console.error('Ошибка при загрузке фрагмента:', event.response.status);
  }
});

Пользовательские фильтры и вставка контента

Unpoly позволяет фильтровать или изменять HTML перед вставкой. Для этого используется up:fragment:insert:

up.on('up:fragment:insert', function(event) {
  const fragment = event.fragment;
  fragment.querySelectorAll('img').forEach(img => {
    img.alt = 'Автоматически добавлено';
  });
});

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

Интеграция с другими библиотеками

Unpoly легко интегрируется с jQuery, React, Vue и другими библиотеками:

  • jQuery: используется для удобного манипулирования DOM в хуках.
  • React/Vue: можно монтировать компоненты внутри загруженных фрагментов через хуки up:fragment:loaded.
  • Сторонние плагины: подключаются к фрагментам через кастомные события.

Пример интеграции с React:

up.on('up:fragment:loaded', function(event) {
  const container = event.fragment.querySelector('.react-root');
  if (container) {
    ReactDOM.render(<App />, container);
  }
});

Создание расширений и плагинов

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

(function() {
  up.on('up:fragment:loaded', function(event) {
    const fragment = event.fragment;
    fragment.querySelectorAll('.tooltip').forEach(el => {
      tippy(el); // инициализация всплывающих подсказок
    });
  });
})();

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

Настройка глобальных параметров

Unpoly предоставляет конфигурационные параметры, которые расширяют возможности библиотеки:

  • up.fragmentCache — управление кэшированием фрагментов.
  • up.animation — типы анимаций для всех фрагментов.
  • up.submitForm — глобальная настройка отправки форм (AJAX или обычная).
up.fragmentCache.enabled = true;
up.animation.default = 'fade';
up.submitForm({ method: 'POST' });

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

Вывод

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

Оглавление