Хук page.start()

Хук page.start() является ключевой точкой инициализации маршрутизатора в библиотеке Page.js. Именно с его вызова начинается обработка маршрутов, перехват ссылок и управление историей браузера. До вызова page.start() маршруты могут быть объявлены, но ни один из них не будет активирован.

Функция запускает внутренний механизм прослушивания событий popstate и кликов по ссылкам, обеспечивая полноценную работу клиентского роутинга в одностраничных приложениях (SPA).

Основной синтаксис

page.start([options]);

Параметр options — необязательный объект конфигурации, позволяющий управлять поведением маршрутизатора при запуске.

Базовое использование

page('/', index);
page('/about', about);

page.start();

В данном примере:

  • маршруты регистрируются до вызова start
  • после вызова начинается обработка текущего URL
  • автоматически вызывается соответствующий обработчик маршрута

Поведение при запуске

После вызова page.start() происходит несколько важных действий:

  1. Инициализация текущего маршрута

    • Page.js анализирует текущий URL
    • находит соответствующий маршрут
    • выполняет связанные middleware-функции

  2. Подписка на изменения истории

    • добавляется обработчик события popstate
    • поддерживается навигация вперед/назад через браузер

  3. Перехват кликов по ссылкам

    • обрабатываются клики по <a> без перезагрузки страницы
    • переходы становятся «виртуальными»

Обработка текущего URL

По умолчанию page.start() немедленно вызывает маршрут, соответствующий текущему адресу:

// URL: /about
page('/about', () => {
  console.log('About page');
});

page.start(); // => выполнится обработчик /about

Это позволяет синхронизировать состояние приложения с URL при загрузке страницы.

Опции конфигурации

dispatch

page.start({ dispatch: false });

Отключает автоматический вызов маршрута при старте.

Используется, когда:

  • требуется отложенная инициализация
  • маршруты должны запускаться вручную

Пример:

page.start({ dispatch: false });

// позже
page.show('/home');

click

page.start({ click: false });

Отключает перехват кликов по ссылкам.

Применяется в ситуациях:

  • требуется кастомная логика обработки ссылок
  • интеграция с другими библиотеками маршрутизации

popstate

page.start({ popstate: false });

Отключает обработку событий popstate.

Это означает:

  • кнопки «назад» и «вперёд» браузера не будут вызывать маршруты
  • история не синхронизируется с приложением

hashbang

page.start({ hashbang: true });

Включает режим hash-based маршрутизации (#!):

example.com/#!/about

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

  • не требует серверной настройки
  • работает на статических хостингах
  • менее предпочтителен по сравнению с History API

Порядок вызова

Критически важно соблюдать последовательность:

  1. Объявление маршрутов
  2. Вызов page.start()

Неправильный порядок:

page.start();

page('/about', about); // маршрут не будет работать корректно

Правильный порядок:

page('/about', about);
page.start();

Повторный вызов page.start()

page.start() не предназначен для многократного вызова. Повторная инициализация может привести к:

  • дублированию обработчиков событий
  • некорректной работе маршрутизации

Если требуется переинициализация, необходимо:

  • явно управлять жизненным циклом приложения
  • либо избегать повторного запуска

Взаимодействие с page.stop()

Метод page.stop() останавливает маршрутизатор:

page.stop();

После этого:

  • удаляются обработчики событий
  • маршрутизация перестает работать

Для повторного запуска используется:

page.start();

Однако такой сценарий применяется редко и требует аккуратного управления состоянием.

Работа с History API

page.start() активирует использование History API:

  • pushState
  • replaceState
  • popstate

Это обеспечивает:

  • чистые URL без #
  • полноценную навигацию
  • поддержку серверного рендеринга (при корректной настройке)

Перехват ссылок

После запуска:

<a href="/about">About</a>

клик по ссылке:

  • не вызывает перезагрузку страницы
  • обрабатывается Page.js
  • вызывает соответствующий маршрут

Исключения:

  • ссылки с target="_blank"
  • внешние URL
  • ссылки с модификаторами (Ctrl, Cmd)

Отложенный запуск

Иногда требуется инициализация после загрузки данных:

fetch('/config.json')
  .then(res => res.json())
  .then(config => {
    setupRoutes(config);
    page.start();
  });

Такой подход используется:

  • при динамической конфигурации маршрутов
  • при загрузке пользовательских данных

Интеграция с SPA-архитектурой

page.start() играет роль «точки входа» в клиентскую навигацию:

  • синхронизирует URL и состояние приложения
  • запускает middleware-цепочки
  • управляет переходами между представлениями

В типичном SPA:

page('*', authMiddleware);
page('/', home);
page('/dashboard', dashboard);

page.start();

Взаимодействие с middleware

После вызова start() каждый маршрут выполняет цепочку middleware:

page('/user/:id',
  loadUser,
  renderUser
);

При старте:

  1. определяется маршрут
  2. создается context
  3. выполняются middleware по порядку

Ошибки и отладка

Типичные проблемы:

Маршруты не срабатывают

  • page.start() не вызван
  • вызван до объявления маршрутов

Перезагрузка страницы при клике

  • отключён click
  • ссылка не соответствует условиям перехвата

Некорректный маршрут при старте

  • ошибка в URL
  • отсутствует соответствующий маршрут

Практические рекомендации

  • вызывать page.start() один раз
  • размещать вызов после всех маршрутов
  • использовать опции только при необходимости
  • избегать смешивания с другими роутерами
  • внимательно управлять режимами (hashbang, popstate)

Минимальный шаблон приложения

import page from 'page';

page('/', () => {
  console.log('Home');
});

page('/about', () => {
  console.log('About');
});

page.start();

Расширенный пример с настройками

page('/home', home);
page('/profile', profile);

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

Внутренний механизм

При вызове page.start():

  1. Устанавливается базовый путь

  2. Инициализируется текущий контекст

  3. Добавляются слушатели:

    • window.onpopstate
    • document.onclick

  4. Выполняется начальный маршрут (если dispatch !== false)

Связь с серверной конфигурацией

При использовании History API необходимо:

  • настроить сервер на возврат index.html для всех маршрутов
  • иначе прямой переход по URL приведёт к 404

Пример (Express):

app.get('*', (req, res) => {
  res.sendFile('index.html');
});

Ограничения

  • не работает без History API (если не используется hashbang)
  • требует аккуратной настройки сервера
  • не предназначен для SSR без дополнительной логики

Поведение в разных режимах

Режим URL вид Требует сервер
History API /about Да
Hashbang #!/about Нет

Управление базовым путем

Перед вызовом start() можно задать базовый путь:

page.base('/app');
page.start();

Теперь все маршруты будут относиться к /app.

Роль в жизненном цикле приложения

page.start():

  • завершает этап конфигурации
  • запускает этап выполнения
  • связывает маршруты с пользовательскими действиями

Без него Page.js остаётся декларативной конфигурацией без фактической работы.

Сравнение с аналогами

В отличие от более сложных роутеров:

  • не требует конфигурационных файлов
  • не имеет встроенного состояния
  • полностью управляется вручную

page.start() — простой, но критически важный триггер, переводящий библиотеку из состояния «описания маршрутов» в состояние «активной навигации».

Оглавление