Поддержка кнопки истории AJAX без сумасшествия

Question

Я несколько раз использовал jQuery Address для поддержки кнопки возврата в небольших асинхронных приложениях.

Когда все запросы AJAX выполняют одно и то же (то есть, запрашивают страницу асинхронно и заменяют элемент HTML запросом), реализация может быть легкой.

Когда запросы AJAX могут делать разные вещи, скажем, открыть оверлей в одном случае и изменить содержимое всей страницы страницы в другом случае, вещи становятся грязными.

Я закончил с некоторым действительно дрянным кодом, потому что мне пришлось пройти через множество операторов if для анализа значения хеша (# / somepage / someotherpage).

Я всегда повторял про себя: должен быть лучший способ сделать это.

Кто-нибудь прошел через ту же проблему и может предложить решение?

Если нет, проверьте мою идею и скажите, что вы думаете.

Моя идея - создать объект, который эмулирует объект window.history, но только для истории AJAX, давайте назовем его «ajaxhistory». Каждый раз, когда страница запрашивается асинхронно, происходит что-то подобное:

ajaxhistory[i] = {
    url: 'here the url',
    type: 'overlay'
    otherusefulinfo: 'whatever'
}
i++

Так, например:

if(moving back or forward){
    if(currenturl == ajaxhistory[i-1].url){
        // i'm going back
        // i'm able to know what type of action i should take thanks to
        // ajaxhistory[i-1].type and ajaxhistory[i-1].otherusefulinfo
    }
 }

Мне нравится эта идея, потому что она сделает мой код намного проще для чтения, поддержки и изменения. Предположим, что я хочу добавить новую функциональность ... Я могу добавить новый тип, и я работаю с этим, в то время как обычно я должен редактировать много дрянных операторов if.

Что вы думаете? Будут ли проблемы с точки зрения производительности?

Answer 1

Посмотрите эту работу Бена Алмана

http://benalman.com/projects/jquery-bbq-plugin/

У него есть плагин, чтобы помочь поддержать кнопку назад.

Надеюсь, это полезно.

Bob

Answer 2

Вы можете использовать функцию html5:
window.history.pushState({type: 'overlay'}, title, url), где первым параметром является объект JS.

Вы можете получить доступ к этому объекту следующим образом:

window.onpopstate = function(event) {
  alert( event.state.overlay);
}

Для получения дополнительной информации,чек https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history