Как и @Carl, я реализовал автономную реализацию навигации pushState + AJAX, см. HTMLDecor .
Философия PJAX такова:
- страница состоит из уникального контента + оформление сайта (баннеры, навигация, реклама, таблицы стилей и т. Д.).
- когда пользователь впервые заходит на сайт, отправьте полную страницу.
- когда пользователь переходит на новую страницу сайта, просто отправляйте уникальный контент, а не всю страницу. (Хотя PJAX можно настроить для извлечения уникального контента со всей страницы).
Философия HTMLDecor такова:
- страница состоит из уникального контента +
<link>
для оформления сайта + скрипт HTMLDecor.js
.
- когда пользователь впервые посещает сайт, отправьте страницу (в основном, уникальный контент).
В браузере HTMLDecor проверяет
<link>
, выбирает оформление сайта и объединяет его со страницей.
- когда пользователь переходит на новую страницу, эта страница уже является уникальным содержимым, поэтому отправляйте ее как есть.
HTMLDecor обновит уникальное содержимое страницы и вызовет
pushState()
, чтобы обновить URL.
Другими словами, поместите весь декор сайта в отдельный файл и позвольте HTMLDecor.js
объединить его с уникальным контентом в браузере. После этого поддержка pushState предоставляется бесплатно - вам не нужно ничего настраивать.
HTMLDecor.js
- только 6 КБ при минимизации и сжатии, что мало по сравнению с большинством js-фреймворков.
Вы можете (должны) оставить RightJS за пределами своих обычных страниц (которые должны содержать только уникальный контент) и размещать его только на странице оформления сайта.
Вероятно, все это имеет больше смысла, если вы видите демонстрацию HTMLDecor. Посмотрите на мой блог . Если вы просматриваете источник страницы, вы увидите, что объявление вверху страницы, панель навигации внизу и всплывающее окно с контактами не являются частью источника страницы. Все они добавлены с AJAX.
При переходе к одной из статей блога используется pushState + AJAX (если поддерживается в браузере), и вы видите, что реклама и панель навигации не обновляются.
Существует также статья, в которой представляет HTMLDecor более подробно.