PJAX на RightJS - PullRequest
       14

PJAX на RightJS

1 голос
/ 23 марта 2012

Я просто читал вокруг и как-то заинтересовался RightJS.Я использовал jquery в качестве основного фреймворка для JavaScript, но теперь я хотел узнать что-то новое.Однако я хотел бы знать, что RightJS может делать PJAX.Мне известно, что, пока вы понимаете, как работает PJAX, вы можете реализовать его в любой среде.Тем не менее, я бы хотел, чтобы кто-нибудь помог мне разобраться, как это построить.

Ответы [ 3 ]

2 голосов
/ 27 марта 2012

По большей части PJAX состоит из:

  1. выполнить ajax-запрос для получения заданного html-страниц (Page может проверить заголовок, чтобы узнать, должен ли он возвращать полный html или только содержимое, которое будет изменяться)
  2. Добавьте возвращенный HTML в контейнер.
  3. Используйте API истории pushstate для обновления местоположения браузера.

Для того, чтобы все изящно ухудшилось, вам нужно применить PJAX-слушатели к внутренним ссылкам с помощью JavaScript, чтобы все ссылки нормально работали для людей с отключенной JS. Также следует выполнить проверку некоторых функций, чтобы убедиться, что пользовательский браузер поддерживает API pushstate и т. Д. (И если нет, оставьте все как обычные ссылки).

Я на самом деле сам реализовал нативную версию PJAX для JS, если вы хотите посмотреть, как этого добиться: https://github.com/thybag/PJAX-Standalone/blob/master/pjax-standalone.js

Кроме того, вы также можете просмотреть источник JJuery PJAX здесь: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

1 голос
/ 05 апреля 2012

Как и @Carl, я реализовал автономную реализацию навигации pushState + AJAX, см. HTMLDecor .

Философия PJAX такова:

  1. страница состоит из уникального контента + оформление сайта (баннеры, навигация, реклама, таблицы стилей и т. Д.).
  2. когда пользователь впервые заходит на сайт, отправьте полную страницу.
  3. когда пользователь переходит на новую страницу сайта, просто отправляйте уникальный контент, а не всю страницу. (Хотя PJAX можно настроить для извлечения уникального контента со всей страницы).

Философия HTMLDecor такова:

  1. страница состоит из уникального контента + <link> для оформления сайта + скрипт HTMLDecor.js.
  2. когда пользователь впервые посещает сайт, отправьте страницу (в основном, уникальный контент). В браузере HTMLDecor проверяет <link>, выбирает оформление сайта и объединяет его со страницей.
  3. когда пользователь переходит на новую страницу, эта страница уже является уникальным содержимым, поэтому отправляйте ее как есть. HTMLDecor обновит уникальное содержимое страницы и вызовет pushState(), чтобы обновить URL.

Другими словами, поместите весь декор сайта в отдельный файл и позвольте HTMLDecor.js объединить его с уникальным контентом в браузере. После этого поддержка pushState предоставляется бесплатно - вам не нужно ничего настраивать.

HTMLDecor.js - только 6 КБ при минимизации и сжатии, что мало по сравнению с большинством js-фреймворков. Вы можете (должны) оставить RightJS за пределами своих обычных страниц (которые должны содержать только уникальный контент) и размещать его только на странице оформления сайта.

Вероятно, все это имеет больше смысла, если вы видите демонстрацию HTMLDecor. Посмотрите на мой блог . Если вы просматриваете источник страницы, вы увидите, что объявление вверху страницы, панель навигации внизу и всплывающее окно с контактами не являются частью источника страницы. Все они добавлены с AJAX.

При переходе к одной из статей блога используется pushState + AJAX (если поддерживается в браузере), и вы видите, что реклама и панель навигации не обновляются.

Существует также статья, в которой представляет HTMLDecor более подробно.

0 голосов
/ 27 мая 2012

PJAX предназначен для сестренок, это официально

...