Настройка window и document

Page.js — это клиентская библиотека для маршрутизации в одностраничных приложениях (SPA) на JavaScript. Она работает напрямую с объектами window и document, управляя историей браузера и состояниями URL без перезагрузки страницы. Понимание того, как настраивать эти объекты для корректной работы Page.js, критически важно для стабильной работы маршрутизатора и интеграции с другими частями приложения.

Основные объекты и их роли

  1. window В контексте Page.js объект window используется для работы с историей браузера через методы pushState, replaceState и событие popstate. Page.js подписывается на события popstate и click для реализации маршрутизации без перезагрузки страницы.

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

    • window.history.pushState(state, title, url) — добавляет новую запись в историю. Page.js вызывает этот метод при переходе на новый маршрут.
    • window.history.replaceState(state, title, url) — заменяет текущую запись истории без добавления новой. Используется для корректировки URL при загрузке страницы.
    • window.addEventListener('popstate', callback) — позволяет отслеживать события возврата и перехода назад по истории. Page.js автоматически обрабатывает это событие для вызова соответствующего обработчика маршрута.

  2. document Page.js использует объект document для перехвата кликов по ссылкам. Это позволяет переходить между страницами приложения, не вызывая полной перезагрузки.

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

    • document.addEventListener('click', handler) — Page.js добавляет глобальный обработчик кликов для элементов <a> с относительными ссылками.
    • Проверка атрибутов ссылки: Page.js фильтрует ссылки с target="_blank", download, внешние URL и якоря, чтобы не вмешиваться в обычное поведение браузера.

Настройка базового URL

Page.js позволяет задать базовый путь для всех маршрутов приложения. Это важно, если приложение размещается не в корне сайта.

page.base('/app');
page('/home', () => { console.log('Home route'); });
page('/about', () => { console.log('About route'); });
page();

Объяснение:

  • page.base('/app') указывает, что все маршруты будут восприниматься относительно /app.
  • Вызов page() инициирует маршрутизацию, проверяя текущий URL относительно базового пути.

Настройка проксирования кликов

Для предотвращения полной перезагрузки страницы при переходах Page.js перехватывает клики по ссылкам. Можно управлять этим поведением:

page({ click: false }); // отключает глобальный обработчик кликов

Пояснение:

  • click: true (по умолчанию) — Page.js перехватывает клики по ссылкам <a> и вызывает соответствующие маршруты.
  • click: false — ссылки будут работать как обычные HTML-ссылки, что полезно при интеграции с другими библиотеками или при наличии сторонних плагинов.

Работа с объектом history

Для интеграции с серверным рендерингом или при необходимости ручного управления состояниями Page.js предоставляет методы:

  • page.redirect(path) — выполняет переход на другой маршрут с заменой текущего состояния.

  • page.replace(path) — заменяет текущий URL в истории без создания новой записи.

  • page.start(options) — запускает маршрутизацию и позволяет настроить:

    • dispatch — сразу вызвать обработчики маршрутов при старте (по умолчанию true).
    • click — перехват кликов (по умолчанию true).
    • hashbang — использовать #! для маршрутов.

Пример конфигурации:

page.start({
  dispatch: true,
  click: true,
  hashbang: false
});

Управление URL и хэшами

Page.js поддерживает работу как с обычными URL, так и с хэш-историей. При использовании хэшей:

page({ hashbang: true });
page('/home', () => console.log('Home'));
page();

Особенности:

  • URL будет иметь вид http://example.com/#!/home.
  • Это полезно для старых браузеров, где pushState не поддерживается.
  • При хэш-режиме Page.js перехватывает изменения window.location.hash вместо событий popstate.

Советы по безопасной настройке window и document

  1. Совместимость с другими обработчиками: Если приложение использует сторонние библиотеки для кликов или истории, рекомендуется отключать глобальный перехват кликов и вручную вызывать page.show(path) при необходимости.

  2. Асинхронные переходы: Page.js поддерживает асинхронные middleware. При настройке window и document важно учитывать, что обработчик popstate может вызвать middleware несколько раз, если маршрут инициируется программно.

  3. Избегание конфликтов с серверной маршрутизацией: При прямом вводе URL в браузере сервер должен корректно отдавать HTML для Page.js, иначе возникнет ошибка загрузки страницы.

Вывод

Настройка window и document в Page.js — это основа стабильной маршрутизации SPA. Ключевыми аспектами являются правильное управление историей браузера, перехват кликов, базовый путь для маршрутов и корректная работа с хэшами. Знание этих деталей позволяет строить приложения, где URL отражает состояние интерфейса, а переходы между страницами выполняются плавно и без перезагрузки.

Оглавление