Атрибуты ссылок и их обработка

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

Основные атрибуты ссылок

В HTML-ссылках важнейшими атрибутами для работы с Page.js являются:

  • href – основной адрес, на который ведет ссылка. Page.js перехватывает клики по ссылкам с этим атрибутом и предотвращает стандартное поведение браузера.
  • data-navigo / data-page (по соглашению проекта) – пользовательские атрибуты, которые могут использоваться для дополнительной логики обработки или идентификации маршрута.
  • target – определяет, открывается ли ссылка в новом окне (_blank) или в текущем. Page.js игнорирует ссылки с target="_blank" и не перехватывает их, оставляя стандартное поведение.
  • rel – может содержать значения вроде external, указывающие, что ссылка ведет за пределы приложения, и Page.js также пропускает такие ссылки.

Пример стандартной ссылки для SPA:

<a href="/about" class="nav-link">О нас</a>

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

Обработка кликов по ссылкам

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

  1. Отслеживание события click на документе.

  2. Проверка атрибутов ссылки:

    • Если href начинается с http:// или https:// и отличается от текущего хоста — переход игнорируется.
    • Если присутствует target="_blank" или rel="external" — переход игнорируется.

  3. Прерывание стандартного поведения браузера с помощью event.preventDefault().

  4. Вызов функции маршрута с путем из атрибута href.

Пример кода Page.js:

page('*', function(ctx, next) {
  console.log('Текущий путь:', ctx.path);
  next();
});

page();

Здесь Page.js автоматически перехватывает клики по ссылкам с корректным href и передает путь в объект ctx.path.

Специальные атрибуты для контроля поведения

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

  • data-no-page – отключает перехват клика Page.js.
  • data-reload – принудительно вызывает полную перезагрузку страницы, даже если путь совпадает с маршрутом SPA.
  • data-params – позволяет передавать дополнительные параметры в маршруты.

Пример использования:

<a href="/profile" data-params='{"userId": 42}'>Профиль</a>
page('/profile', ctx => {
  const userId = ctx.query.userId || JSON.parse(ctx.params.dataParams).userId;
  console.log('Пользователь с ID:', userId);
});

Управление поведением ссылок через JavaScript

Page.js позволяет программно управлять переходами без клика по ссылке. Для этого используется функция page.show(path, state, dispatch):

  • path — путь, на который нужно перейти.
  • state — объект состояния, который будет доступен через ctx.state.
  • dispatch — булевый флаг: если true, маршрут будет вызван, если false — URL изменится, но маршрут не вызовется.

Пример:

document.querySelector('#goto-about').addEventListener('click', () => {
  page.show('/about', { from: 'button' }, true);
});

Это позволяет эмулировать клики по ссылкам, учитывая все атрибуты и параметры маршрута.

Обработка динамических ссылок

Часто требуется генерировать ссылки динамически, основываясь на данных:

const users = [{id: 1, name: 'Анна'}, {id: 2, name: 'Иван'}];

users.forEach(user => {
  const link = document.createElement('a');
  link.href = `/users/${user.id}`;
  link.textContent = user.name;
  document.body.appendChild(link);
});

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

Советы по безопасной и корректной работе со ссылками

  • Всегда проверять, что внешние ссылки содержат rel="external" или target="_blank", чтобы не ломать SPA-навигацию.
  • Использовать data-* атрибуты для передачи дополнительных параметров без изменения URL.
  • Обрабатывать все события через делегирование, чтобы новые элементы, добавленные динамически, также корректно работали с Page.js.
  • При необходимости программных переходов использовать page.show() вместо прямой смены window.location.

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

Оглавление