Установка и подключение

Подключение через CDN

Для быстрого старта с Page.js можно использовать CDN. Это позволяет подключить библиотеку без установки дополнительных пакетов и настройки сборщика модулей. Достаточно добавить следующий тег <script> в HTML-файл:

<script src="https://unpkg.com/page/page.js"></script>

После подключения объект page становится доступен глобально. Этот способ удобен для небольших проектов и прототипов, где не требуется модульная структура.

Установка через npm

Для проектов, использующих сборщики модулей (Webpack, Vite, Parcel и др.), предпочтительнее устанавливать библиотеку через npm:

npm install page

Или через Yarn:

yarn add page

После установки можно импортировать Page.js в проект следующим образом:

import page from 'page';

или при использовании CommonJS:

const page = require('page');

Инициализация библиотеки

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

page('/', () => {
  console.log('Главная страница');
});

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

page();

Ключевой момент: вызов page() в конце инициализирует роутер и запускает обработку текущего URL. Без этого маршруты работать не будут.

Использование History API

Page.js использует History API браузера для управления навигацией без перезагрузки страницы. Это позволяет:

  • Менять URL без полной перезагрузки;
  • Сохранять состояние приложения при навигации;
  • Использовать стандартные кнопки браузера «Назад» и «Вперед».

Для корректной работы достаточно, чтобы сервер отдавал один и тот же HTML-файл для всех маршрутов, иначе при прямом переходе на вложенный путь возникнет ошибка 404.

Поддержка ссылок

Для автоматической работы с <a>-тегами необходимо использовать метод page() в обработчике события click:

page('*', (ctx, next) => {
  document.querySelectorAll('a').forEach(link => {
    link.oncl ick = (e) => {
      e.preventDefault();
      page(link.getAttribute('href'));
    };
  });
  next();
});

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

Подключение в модульной структуре

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

  1. Импортировать page.
  2. Определить все маршруты.
  3. Вызвать page() для запуска маршрутизации.

Пример корректной структуры файла:

import page from 'page';
import homeView from './views/home.js';
import aboutView from './views/about.js';

page('/', homeView);
page('/about', aboutView);

page();

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

Проверка подключения

Чтобы убедиться, что Page.js подключен корректно:

  • В консоли браузера должен быть доступен объект page.
  • При вызове page('/some-path') должна выполняться соответствующая функция маршрута.
  • URL должен изменяться без перезагрузки страницы.

Резюме

Page.js можно подключать через CDN для быстрого прототипирования или устанавливать через npm/yarn для модульных проектов. Инициализация маршрутов и вызов page() обязательны для работы роутера. Библиотека использует History API для управления URL и поддерживает модульную структуру, что делает её удобной для современных SPA-приложений.

Оглавление