Jquery.history.js VS jquery-hashchange

Ответ 1

EDIT - конец 2013 года

Также популярна другая хэш-библиотека под названием "sammy.js". Он имеет красивую карту маршрутизации на стороне клиента. Структура маршрутизации на стороне клиента используется для обработки событий hashchange, поэтому вы можете использовать ее для предоставления однопользовательских функций некоторым страницам. Подробнее см. https://github.com/quirkey/sammy/wiki/Presentations.

Кроме того, его вряд ли необходимо использовать обычные ссылки, в приведенных ниже примерах. Вы можете использовать кнопки, li, все, что хотите, как ссылки, реагирующие на ajax, до тех пор, пока вы можете привязать их к событию click. Используемые вами параметры маршрутизации могут храниться в атрибутах данных элементов, которые были нажаты, или в другом месте, которые можно идентифицировать через элемент с щелчком, т.е. в объекте словаря javascript. После срабатывания события щелчка вы можете получить необходимые значения маршрута и использовать состояние push html5, состояние jquery-bbq-push, hashbanging и т.д.

Обзор Библиотеки history.js и jquery-bbq используются для поддержания состояния при запуске ajax или на событиях на странице. Вы используете эти библиотеки для хранения информации о истории браузера &/или манипулируете URL-адресом, чтобы вы могли использовать кнопки вперед и назад на страницах для вызовов ajax, изменений вкладок, просмотра изображений, на самом деле все, что вы хотите связать с журналом истории к. Обе библиотеки имеют несколько аналогичные API для базового использования.

History.js Новая библиотека history.js использует стандарты браузера html5 для pushstate и popstate и отказывается от подхода hashchange, если браузер не поддерживает html5 pushstate. Pushstate позволяет вам нажимать ваш URL-адрес на панель браузера = изменить URL-адрес без перезагрузки страницы! Основной репозиторий https://github.com/browserstate/history.js

Чтобы использовать его, вы (a) включать файлы script, (b) связываться с событием "statechange" и (c) обрабатывать событие statechange и (d) запускать событие statechange, когда вы wnat - когда пользователь нажимает и т.д.

Примечания: Всякий раз, когда пользователь нажимает кнопку "вперед" или "назад", загорается событие изменения состояния. Внутри метода/обработчика привязки вы вызовете метод, который получает соответствующее состояние. (1) Метод /function History.getState() можно использовать для получения данных с вашего сервера на основе истории страниц, в которую вы вставляете. Вы можете хранить любые переменные в объекте State. обычно вы хотите сохранить URL-адрес. (0) Вам нужно заполнить состояние "История" каждый раз, когда кто-то нажимает ссылку (не на странице), для которой вы хотите отслеживать историю.

(0)

   $("#navbar").on("click","li[data-ajax-link='true']", function(e) {
        var url = $(this).data('uri');
        var target = $(this).data('target');
        var title = $(this).data('text');
        History.pushState({ url: url, target: target }, title, url);
    });

(1)

History.Adapter.bind(window, 'statechange', function() {
       updateContent(History.getState());
});

(2)

 var updateContent = function(State) {
        var url = State.data.url;
        var $target = $(State.data.target);
        ajaxPost(url, $target);
  };

BBQ

Библиотека Бен Альмана, т.е. jquery-bbq.js использует хеши для управления историей браузера. Он полностью совместим со старыми браузерами (поскольку hashchange похож на html4 tech).

Если вы решите изменить поведение по умолчанию для ссылки, когда вы нажимаете на ссылку, (4) вы можете перехватить обратную передачу ссылок, предотвратить действие по умолчанию и вызвать $.bbq.pushstate. Этот метод pushstate подталкивает элементы внутрь URL-адреса после отметки-хэша. (5) Это изменение хэша url вызывает событие hashchange, к которому вы привязываетесь. (5 cont'd) на событии hashchange, вы получите $.bbq.getState( "paramname" ), чтобы получить пассиметр lastet с параметром после хэша. Это полезно, потому что браузер будет обрабатывать хэши в обычной истории. Поэтому, когда кто-то нажимает вперед или назад, он загружает предыдущее или следующее состояние хэширования. Если вы используете это для того, чтобы ваше приложение сильно использовало ajax, вы бы сделали обратную передачу ajax, чтобы получить URL-адрес, который был ранее помещен в хэш. Для другого примера использования этого, посмотрите мой недавний ответ на JQuery BBQ: где хранить URL-адреса?

Использование примера истории использования BBQ

(4)

 $("a[data-custom-ajax-link='true']").click(function (e) {
    var target = $(this).data('target');
    var url = $(this).attr('href');
    $.bbq.pushState({ url: url, target: target });
    e.preventDefault();
});

(5)

$(window).bind("hashchange", function(e) {
    var url = $.bbq.getState("url");
    var $target = $($.bbq.getState("target"));
    var frame = $.bbq.getState("target");


    $.ajax({
        url: url,
        data : null,
        type: "POST",
        beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); },
        success: function (data) {
            $target.html(data);
        }
    });


});

Обратите внимание, что я только что рассказал об основах использования этих плагинов. Вы можете использовать эти плагины для управления использованием кнопок вперед и назад с вкладками, ссылками или аяксами.

Насколько "лучше", трудно сказать. History.js станет лучшей библиотекой, когда она будет полностью зрелой в течение ~.5 лет (ее все еще в бета-версии, но ее хорошая ставка на будущее, обратите внимание на большое количество открытых выпусков и веток на сайте github). JQuery-bbq находится на другой стороне спектра в течение 3 лет и не обновляется для соответствия jquery 1.9. Хорошей новостью является то, что у них очень похожая реализация и функции, поэтому не так уж плохо переключаться между ними.

History.js немного совместим в будущем. Посмотрите на его API (примерно на полпути вниз на https://github.com/browserstate/history.js

Для сравнения, API bbq находится на странице http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html. Там немного больше, чем просто часть истории.

Ответ 2

Вы не можете переопределять кнопки браузера назад и вперед, и это по дизайну в каждом браузере по соображениям безопасности.

Все эти сценарии - это изменение документа document.location или document.hash браузера, а затем отслеживание, когда используются кнопки браузера назад или вперед и захват текущего состояния хэша браузера.

Не поймите меня неправильно, это отличные сценарии, но они не позволят вам полностью переопределить ваши спины и кнопки вперед.