Юнит-тестирование компиляторов

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

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

Основные директивы и атрибуты

  • up-target — определяет элемент, который будет обновлён после выполнения запроса.
  • up-url — указывает URL для запроса, который заменит содержимое целевого элемента.
  • up-method — задаёт HTTP-метод (GET, POST, PUT, DELETE) для запроса.
  • up-transition — задаёт анимацию при обновлении содержимого, например, fade, slide или none.
  • up-confirm — отображает диалог подтверждения перед выполнением действия.

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

<button 
    up-target="#content"
    up-url="/posts/42"
    up-transition="fade">
    Показать пост
</button>

<div id="content">
    <!-- Здесь загрузится контент -->
</div>

События и обратные вызовы

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

  • up:click — срабатывает при клике на элемент, который инициирует запрос.
  • up:request — происходит перед отправкой AJAX-запроса.
  • up:success — срабатывает при успешной загрузке нового содержимого.
  • up:fragment:loaded — триггер для каждого обновлённого фрагмента.
  • up:error — вызывается при ошибке запроса.

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

up.on('up:fragment:loaded', '#content', function(event) {
    console.log('Фрагмент #content обновлён');
});

Работа с формами

Формы в Unpoly автоматически перехватываются, если они содержат атрибуты up-target или up-url. Это позволяет отправлять данные без полной перезагрузки страницы.

Пример:

<form 
    up-target="#messages"
    up-method="POST"
    up-url="/messages/create">
    <input type="text" name="text">
    <button type="submit">Отправить</button>
</form>

<div id="messages">
    <!-- Новое сообщение добавится сюда -->
</div>

Формы поддерживают все стандартные методы HTTP, а также автоматическое отображение ошибок валидации, если сервер возвращает статус 422 с HTML-контентом ошибок.

Работа с модальными окнами

Unpoly позволяет динамически создавать модальные окна без подключения сторонних библиотек. Для этого используется атрибут up-modal:

<a 
    href="/posts/42/edit"
    up-modal>
    Редактировать пост
</a>

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

История браузера и навигация

Unpoly автоматически обновляет URL и историю браузера при замене фрагментов, что делает навигацию естественной. Можно использовать up-history для управления поведением истории:

  • true (по умолчанию) — создаёт запись в истории при загрузке нового фрагмента.
  • false — обновление фрагмента не сохраняется в истории.

Пример:

<a 
    href="/posts/42"
    up-target="#content"
    up-history="false">
    Показать пост без записи в истории
</a>

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

Unpoly предоставляет глобальный объект up, позволяющий изменять поведение библиотеки:

// Настройка времени таймаута для всех AJAX-запросов
up.fragment.config.timeout = 10000;

// Подключение глобального обработчика ошибок
up.on('up:error', function(event) {
    alert('Произошла ошибка загрузки контента');
});

Также можно глобально задать анимацию переходов или обработку форм по умолчанию.

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

Unpoly легко интегрируется с библиотеками для валидации форм, визуальных эффектов и SPA-функционала. Благодаря своей структуре на основе фрагментов, он не конфликтует с существующими DOM-элементами, что позволяет внедрять динамические обновления без полной переработки фронтенда.

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

Оглавление