Структура объекта контекста

В Page.js объект контекста (context object) является ключевым элементом маршрутизации. Он содержит всю информацию о текущем маршруте, включая путь, параметры, состояние и методы управления навигацией. Понимание структуры этого объекта позволяет создавать гибкие и динамичные приложения на стороне клиента.

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

  1. path Представляет полный путь текущего маршрута, включая параметры запроса. Используется для анализа текущего URL.

    page('/user/:id', ctx => {
    console.log(ctx.path); // "/user/123"
});

  2. params Объект, содержащий все параметры маршрута, определённые через :param в шаблоне URL. Параметры доступны по имени.

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

  3. querystring Строка запроса, содержащая всё после знака ? в URL. Например, при ?page=2&sort=asc значение будет "page=2&sort=asc".

    page('/search', ctx => {
    console.log(ctx.querystring); // "page=2&sort=asc"
});

  4. title Свойство, позволяющее динамически изменять заголовок страницы.

    page('/about', ctx => {
    ctx.title = "О нас";
    document.title = ctx.title;
});

  5. state Содержит пользовательские данные, переданные при навигации через page.show(). Может использоваться для хранения информации о состоянии интерфейса.

    page.show('/dashboard', { user: 'admin' });
page('/dashboard', ctx => {
    console.log(ctx.state.user); // "admin"
});

Методы объекта контекста

  1. redirect(path) Позволяет программно перенаправлять на другой маршрут, сохраняя структуру маршрутизации.

    page('/old-page', ctx => {
    ctx.redirect('/new-page');
});

  2. save() и pushState() Эти методы используются внутренне для управления историей браузера, но могут быть полезны для сохранения состояния.

  3. handled Логическое свойство, указывающее, был ли маршрут уже обработан. Полезно при использовании промежуточных обработчиков (middleware).

Вложенные маршруты и middleware

Объект контекста передаётся через цепочку middleware, что позволяет последовательно изменять его свойства. Каждый обработчик может дополнять объект контекста, добавляя новые данные.

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

function fetchUser(ctx, next) {
    ctx.user = { id: ctx.params.id, name: 'John Doe' };
    next(); // передача управления следующему обработчику
}

function renderUser(ctx) {
    document.body.textContent = `Пользователь: ${ctx.user.name}`;
}

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

  • ctx передаётся по ссылке, изменения доступны всем последующим middleware.
  • next() используется для передачи управления следующему обработчику, без него цепочка прерывается.

Расширение объекта контекста

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

page('*', ctx => {
    ctx.isAuthenticated = Boolean(localStorage.getItem('token'));
});

Обработка ошибок и условная навигация

Свойства контекста позволяют реализовать условные маршруты, перенаправления и обработку ошибок без дублирования кода.

page('/admin', ctx => {
    if (!ctx.isAuthenticated) {
        ctx.redirect('/login');
    } else {
        document.body.textContent = "Добро пожаловать, администратор!";
    }
});
  • Использование ctx.redirect гарантирует корректное обновление истории.
  • Проверка состояния через собственные поля контекста делает код модульным и легко поддерживаемым.

Динамическая генерация ссылок

Объект контекста помогает формировать ссылки на основе текущего состояния приложения:

page('/profile/:id', ctx => {
    const editLink = `/profile/${ctx.params.id}/edit`;
    document.querySelector('#editButton').href = editLink;
});
  • ctx.params используется для вставки динамических значений в URL.
  • Обеспечивает единообразие навигации по приложению.

Итоговая структура объекта контекста

Сводка ключевых свойств и методов:

Свойство / Метод Тип Назначение
path string Полный путь маршрута
params object Параметры маршрута
querystring string Строка запроса
title string Заголовок страницы
state object Пользовательские данные
redirect(path) function Программное перенаправление
next() function Передача управления следующему middleware
handled boolean Флаг обработки маршрута

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

Оглавление