Организация маршрутов

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

Маршруты создаются с помощью метода page(path, callback), где path — строка маршрута, а callback — функция, выполняющая действия при совпадении URL. Например:

page('/about', () => {
  console.log('Страница "О нас" загружена');
});

Здесь каждый переход на /about вызовет указанный обработчик, не перезагружая страницу.

Параметры маршрутов

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

page('/user/:id', (ctx) => {
  console.log('ID пользователя:', ctx.params.id);
});

ctx.params содержит объект с ключами, соответствующими параметрам маршрута. Например, при переходе на /user/42 значение ctx.params.id будет равно "42".

Множественные обработчики

Для одного маршрута можно задавать несколько функций-обработчиков. Они выполняются последовательно, передавая управление следующей через next().

page('/dashboard', authMiddleware, dashboardView);

function authMiddleware(ctx, next) {
  if (!ctx.user) {
    page('/login');
  } else {
    next();
  }
}

function dashboardView(ctx) {
  console.log('Показ панели пользователя');
}

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

Wildcard и регулярные маршруты

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

page('/files/*', (ctx) => {
  console.log('Путь файла:', ctx.params[0]);
});

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

page(/\/product\/(\d+)/, (ctx) => {
  console.log('ID продукта:', ctx.params[0]);
});

Такой подход удобен для сложных URL и динамических сегментов.

Редиректы и навигация

Для изменения текущего маршрута без перезагрузки страницы применяется метод page.redirect(from, to):

page.redirect('/old', '/new');

Также можно программно инициировать переход через page(path):

page('/home'); // Переход на /home

Эти методы позволяют управлять навигацией внутри приложения централизованно, обеспечивая удобную маршрутизацию.

Объект контекста (ctx)

Объект ctx содержит всю информацию о текущем маршруте:

  • ctx.path — полный путь запроса.
  • ctx.params — параметры динамического маршрута.
  • ctx.querystring — строка запроса после ?.
  • ctx.hash — часть URL после #.
  • ctx.state — объект для хранения произвольных данных, доступных в обработчиках.

Использование ctx позволяет строить сложные маршруты с передачей состояния и параметров между обработчиками.

Группировка маршрутов

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

function adminRoutes() {
  page('/admin', adminDashboard);
  page('/admin/users', adminUsers);
}

adminRoutes();

Это позволяет логически объединять маршруты по функциональным зонам и улучшает читаемость кода.

Обработка ошибок и fallback

Для маршрутов, которые не совпали с существующими шаблонами, можно задать универсальный обработчик:

page('*', () => {
  console.log('Страница не найдена');
});

Такой механизм служит для реализации 404-страниц и обработки неизвестных URL.

Асинхронная загрузка контента

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

page('/posts/:id', async (ctx) => {
  const post = await fetch(`/api/posts/${ctx.params.id}`).then(res => res.json());
  renderPost(post);
});

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

Инициализация и запуск

После определения всех маршрутов необходимо вызвать page() без параметров, чтобы запустить обработку текущего URL и отслеживание изменений:

page();

Это обеспечивает корректную работу истории браузера, перехват кликов по ссылкам и управление состоянием навигации без перезагрузки страницы.

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

Оглавление