Глобальные настройки

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

Определение глобальных настроек

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

up.setDefaults({
  animation: 'fade', // анимация перехода
  cache: true,       // использование кэша
  method: 'GET',     // HTTP-метод по умолчанию
  focus: true        // автофокус на первый элемент после загрузки
});

Ключевые моменты:

  • animation — задает тип анимации при замене контента. Поддерживаются значения 'fade', 'slide', 'none' и пользовательские функции.
  • cache — включает или отключает кэширование ранее загруженных фрагментов страницы.
  • method — HTTP-метод, используемый при всех запросах Unpoly, если не указан явно в конкретной ссылке или форме.
  • focus — автоматическая установка фокуса на первый интерактивный элемент после подгрузки нового контента.

Настройка целевого контейнера

Unpoly позволяет глобально определять контейнер, в который будут подгружаться новые фрагменты HTML. Это делается через параметр target:

up.setDefaults({
  target: '#main-content'
});
  • target может быть CSS-селектором или DOM-элементом.
  • Все вызовы up.visit() и обработка ссылок будут по умолчанию использовать указанный контейнер.

Управление историей браузера

Библиотека интегрируется с History API, обеспечивая сохранение состояния страницы при асинхронной загрузке. Глобальные настройки для истории задаются с помощью параметра history:

up.setDefaults({
  history: true
});
  • Если history установлено в false, изменения URL и состояние истории не будут сохраняться.
  • Можно использовать объект с более тонкой настройкой:
up.setDefaults({
  history: {
    replace: false, // использовать pushState вместо replaceState
    scroll: true    // сохранять прокрутку страницы
  }
});

Настройки кэширования

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

up.setDefaults({
  cache: {
    enabled: true,
    maxSize: 50,        // максимальное количество элементов в кэше
    expire: 300000      // время жизни фрагмента в миллисекундах
  }
});
  • enabled — включение или отключение кэширования.
  • maxSize — ограничение на количество хранимых фрагментов.
  • expire — срок жизни фрагмента в кэше.

Настройка обратных вызовов (Callbacks)

Unpoly поддерживает глобальные обработчики событий для всех переходов и обновлений контента. Настройка выполняется через объект up.setDefaults:

up.setDefaults({
  onBeforeRequest: (request) => {
    console.log('Запрос будет отправлен:', request.url);
  },
  onSuccess: (response) => {
    console.log('Контент успешно загружен');
  },
  onError: (response) => {
    console.error('Ошибка загрузки:', response.status);
  }
});
  • onBeforeRequest — вызывается перед отправкой любого запроса Unpoly.
  • onSuccess — срабатывает после успешного получения и внедрения HTML.
  • onError — вызывается при ошибке запроса.

Настройка глобальных заголовков и методов HTTP

Для интеграции с серверной логикой часто требуется указывать заголовки по умолчанию. Это делается через параметр headers:

up.setDefaults({
  headers: {
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST'
});
  • headers — объект с ключами и значениями заголовков.
  • method — HTTP-метод по умолчанию, который будет использоваться, если в конкретной ссылке или форме метод не задан.

Глобальные эффекты анимации

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

up.setDefaults({
  animation: (fromEl, toEl) => {
    fromEl.style.opacity = 0;
    toEl.style.opacity = 1;
  }
});
  • Параметры функции: fromEl — элемент, который заменяется; toEl — новый элемент.
  • Позволяет создавать кастомные визуальные эффекты на уровне всего приложения.

Управление формами и ссылками

Unpoly позволяет глобально настраивать поведение для всех форм и ссылок:

up.setDefaults({
  submit: {
    confirm: true, // требовать подтверждение перед отправкой
    disable: true  // отключать кнопку после отправки
  },
  link: {
    track: true    // отслеживать клики для аналитики
  }
});
  • submit — глобальные правила для форм, включая валидацию и блокировку повторных отправок.
  • link — настройки для всех ссылок Unpoly, например, автоматическая аналитика или отслеживание переходов.

Итоговая структура глобальных настроек

Пример комплексной конфигурации:

up.setDefaults({
  target: '#main-content',
  animation: 'fade',
  cache: { enabled: true, maxSize: 100, expire: 600000 },
  history: { replace: false, scroll: true },
  method: 'POST',
  headers: { 'X-CSRF-Token': csrfToken },
  focus: true,
  onBeforeRequest: request => console.log('Запрос к', request.url),
  onSuccess: response => console.log('Контент обновлен'),
  onError: response => console.error('Ошибка:', response.status)
});

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

Оглавление