Свойства объекта Context

Объект Context в библиотеке Page.js представляет собой центральную сущность, которая передаётся в обработчики маршрутов и содержит всю информацию о текущем переходе. Он создаётся автоматически при каждом совпадении маршрута и используется для доступа к параметрам URL, данным запроса и состоянию навигации.

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

Основные свойства Context

ctx.path

Содержит путь URL без домена и протокола.

// URL: /users/42
ctx.path === '/users/42'

Используется для анализа текущего маршрута и построения логики переходов.

ctx.params

Объект с параметрами маршрута, извлечёнными из динамических сегментов.

page('/users/:id', (ctx) => {
  console.log(ctx.params.id);
});

При переходе на /users/42:

ctx.params = {
  id: '42'
}

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

  • Все значения представлены в виде строк
  • Имена параметров соответствуют шаблону маршрута
  • Отсутствующие параметры не добавляются

ctx.querystring

Строка запроса без символа ?.

// URL: /search?q=test&page=2
ctx.querystring === 'q=test&page=2'

Полезно при необходимости ручного разбора параметров.

ctx.query

Объект, содержащий разобранные GET-параметры.

ctx.query = {
  q: 'test',
  page: '2'
}

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

  • Автоматически парсится из querystring
  • Все значения — строки
  • Повторяющиеся параметры могут преобразовываться в массивы

ctx.hash

Содержимое якоря URL (часть после #).

// URL: /docs#section1
ctx.hash === 'section1'

Используется для навигации внутри страницы или управления состоянием интерфейса.

ctx.pathname

Путь без query-параметров и hash.

// URL: /products?category=books#top
ctx.pathname === '/products'

Удобен для сравнения маршрутов без учёта дополнительных данных.

Свойства, связанные с навигацией

ctx.state

Объект состояния, переданный через History API.

page('/profile', (ctx) => {
  console.log(ctx.state);
});

Может содержать произвольные данные:

page.show('/profile', { from: 'home' });

Результат:

ctx.state = {
  from: 'home'
}

Используется для передачи данных между маршрутами без изменения URL.

ctx.title

Заголовок документа, связанный с текущим маршрутом.

ctx.title = 'Профиль пользователя';

При наличии может быть применён к document.title.

ctx.canonicalPath

Полный путь с учётом querystring.

// URL: /search?q=test
ctx.canonicalPath === '/search?q=test'

Отличается от path, так как включает строку запроса.

Свойства, связанные с предыдущим состоянием

ctx.prev

Содержит предыдущий путь перед текущим переходом.

ctx.prev === '/home'

Используется для:

  • анимаций переходов
  • логики возврата
  • аналитики навигации

Методы объекта Context

ctx.push(path, state)

Программный переход на новый маршрут.

ctx.push('/dashboard');

С передачей состояния:

ctx.push('/dashboard', { ref: 'login' });

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

  • Добавляет запись в историю браузера
  • Вызывает соответствующие обработчики маршрута

ctx.save()

Сохраняет текущее состояние в истории.

Используется редко, в специфических сценариях:

ctx.save();

Дополнительные особенности Context

Мутируемость объекта

Context является изменяемым объектом, что позволяет расширять его в middleware:

page('*', (ctx, next) => {
  ctx.user = { name: 'Alice' };
  next();
});

В последующих обработчиках:

page('/profile', (ctx) => {
  console.log(ctx.user.name);
});

Использование в middleware-цепочке

Context передаётся по цепочке функций:

page('/admin',
  checkAuth,
  loadData,
  renderPage
);

Каждая функция получает один и тот же объект:

function checkAuth(ctx, next) {
  if (!ctx.user) return page.redirect('/login');
  next();
}

Связь с History API

Context тесно связан с History API браузера:

  • ctx.state → history.state
  • ctx.push() → history.pushState()

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

  • отсутствие перезагрузки страницы
  • управление историей переходов
  • поддержку кнопок “назад/вперёд”

Практические паттерны использования

Централизация данных маршрута

page('*', (ctx, next) => {
  ctx.isMobile = /mobile/i.test(navigator.userAgent);
  next();
});

Разделение логики и представления

page('/posts/:id',
  loadPost,
  renderPost
);

function loadPost(ctx, next) {
  ctx.post = fetchPost(ctx.params.id);
  next();
}

function renderPost(ctx) {
  display(ctx.post);
}

Обработка query-параметров

page('/search', (ctx) => {
  const query = ctx.query.q || '';
  performSearch(query);
});

Работа с hash-навигацией

page('/docs', (ctx) => {
  if (ctx.hash) {
    scrollToSection(ctx.hash);
  }
});

Ограничения и нюансы

  • Все параметры (params, query) представлены строками
  • Отсутствует встроенная валидация параметров
  • Объект создаётся заново при каждом переходе
  • Нельзя полагаться на сохранение ссылочной идентичности между переходами

Расширение Context

Возможна интеграция с другими библиотеками путём добавления свойств:

page('*', (ctx, next) => {
  ctx.api = apiClient;
  next();
});

Такой подход превращает Context в контейнер зависимостей для маршрутов.

Роль Context в архитектуре приложения

Объект Context выступает связующим звеном между:

  • URL и логикой приложения
  • маршрутизацией и состоянием
  • middleware и конечными обработчиками

Он обеспечивает:

  • единый источник данных о текущем маршруте
  • гибкость в обработке навигации
  • возможность масштабирования архитектуры SPA

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

Оглавление