Режим hashbang

Режим hashbang (#!) в библиотеке Page.js применяется для реализации маршрутизации в одностраничных приложениях (SPA), когда сервер не настроен на поддержку pushState или невозможно управлять серверными URL. Этот режим использует фрагмент URL после символа # для определения маршрутов, что позволяет менять видимое состояние страницы без перезагрузки.

Основы работы hashbang

При использовании hashbang URL выглядит следующим образом:

http://example.com/#!/about
  • #!/ — служебная часть, указывающая Page.js, что дальше следует путь маршрута.
  • about — собственно путь, по которому будет срабатывать соответствующий обработчик.

В отличие от стандартного #-маршрута, hashbang обеспечивает совместимость с поисковыми системами и может быть легко распознан сторонними инструментами. Page.js автоматически парсит путь после #!/ и сопоставляет его с зарегистрированными маршрутами.

Включение режима hashbang

Для активации hashbang используется функция page с конфигурацией:

page({ hashbang: true });
  • Этот вызов включает обработку маршрутов через #!.
  • После активации все зарегистрированные маршруты будут отслеживаться по части URL после #!.

Пример настройки маршрутов с hashbang:

page({ hashbang: true });

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

page('/about', () => {
  console.log('Страница о проекте');
});

page();

После вызова page() библиотека начинает отслеживать изменение фрагмента URL и вызывать соответствующие обработчики.

Навигация между маршрутами

Hashbang-маршруты навигируются с помощью page.show(path):

page.show('/about');

При этом URL изменится на:

http://example.com/#!/about
  • Метод show принимает путь без #!.
  • Срабатывают все middleware и обработчики маршрута, связанные с указанным путем.

Также можно использовать стандартные HTML-ссылки:

<a href="#!/home">Главная</a>
<a href="#!/about">О проекте</a>

Page.js перехватывает клики и вызывает зарегистрированные функции без перезагрузки страницы.

Middleware и hashbang

Middleware в Page.js работают одинаково для hashbang и pushState. Пример:

function logger(ctx, next) {
  console.log('Переход на путь:', ctx.path);
  next();
}

page({ hashbang: true });
page(logger);

page('/home', () => {
  console.log('Отображение главной');
});

page('/about', () => {
  console.log('Отображение страницы о проекте');
});

page();
  • ctx.path содержит путь после #!/.
  • Middleware вызывается до обработчика конкретного маршрута, что позволяет реализовать авторизацию, логирование или асинхронные действия.

Особенности и ограничения

  1. Совместимость с сервером Сервер не получает части URL после #!, поэтому проблем с 404 не возникает. Это особенно важно для статических сайтов или приложений на GitHub Pages.

  2. SEO и индексирование Hashbang был исторически поддержан поисковыми системами через механизм _escaped_fragment_, однако современные рекомендации Google предпочитают pushState. Для SPA с hashbang рекомендуется использовать серверный рендеринг или pre-rendering для SEO.

  3. Работа с внешними ссылками Ссылки на hashbang-маршруты можно использовать как обычные ссылки. Если посетитель перейдёт по URL напрямую, Page.js автоматически обработает маршрут.

  4. Совместимость с другими библиотеками Hashbang не конфликтует с jQuery, React или Vue, если маршруты подключены после загрузки DOM и не используют глобальные обработчики кликов, изменяющие window.location.hash напрямую.

Пример SPA с hashbang

page({ hashbang: true });

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

page('/about', () => {
  document.body.textContent = 'Страница о проекте';
});

page('/contact', () => {
  document.body.textContent = 'Контакты';
});

page();

HTML:

<nav>
  <a href="#!/">Главная</a>
  <a href="#!/about">О проекте</a>
  <a href="#!/contact">Контакты</a>
</nav>
  • Переход между ссылками происходит без перезагрузки страницы.
  • URL динамически обновляется, сохраняя структуру #!/.

Настройка базового пути

Page.js позволяет задавать базовый путь даже для hashbang-маршрутов:

page.base('/app');
page({ hashbang: true });

page('/home', () => console.log('Home'));
page('/about', () => console.log('About'));

page();
  • Базовый путь добавляется перед обработкой маршрута.
  • URL будет вида: http://example.com/app/#!/home.

Вывод

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

Оглавление