Как я использую history.js на своем сайте

Я прочитал все сообщения об истории .js о stackoverflow, включая this, this и this и посмотрел исходный код, но как новичок в javascript/jquery я У меня возникли проблемы с выяснением того, как на самом деле реализовать поддержку html 5 и поддержку резервного копирования для поддержки html4-браузеров, таких как ie8/9. Поскольку я могу оценить преимущества UX в представлении согласованного URL как можно больше, как это решает глубокую привязку и позволяет закладок, которые я хочу реализовать, но я немного теряюсь при попытке фактически использовать это на своем сайте.

После добавления history.js script на мою страницу

Код для изменения, как я понял, это:

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

Является ли //Change our states, где весь новый код идет, поскольку этот код просто дает примеры элементов управления историей?

Или я должен писать свой собственный код вместо всего этого блока кода (я использую jquery, чтобы помочь мне в этот момент, учитывая мою новизну в кодировании).

Я читал эту статью о динамической загрузке контента и попытке реализовать на своем сайте (я могу заставить этот код работать, но я знаю что он не будет хорошо играть в ie8/9), но у меня возникают проблемы с попыткой выяснить, как сочетаться с history.js

Асло, во-вторых, я пытаюсь выяснить, как history.js играет с modernizr?

Является ли это заменой для modernizr.history(там, где он выполняет тестирование, и если нет поддержки .js возвращается к типичной загрузке страницы), или он будет работать следующим образом:

if (Modernizr.history) {
   //Code goes here that works if it HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
} else {
   //code from above goes here? with function(window, undefined){...etc...  ?
}

Ответы

Ответ 1

Простое добавление поддержки истории на ваш сайт никоим образом не поможет вам, если у вас действительно есть функции, которые используют его.

Что касается модернизации, это просто говорит вам, поддерживается ли история в текущем браузере, и если вы выполняете действие x else action y

Хорошо, так вот как будет работать история:

Рассмотрим history.js как макрорекордер. Клиент нажимает что-то, и вы нажимаете некоторые переменные, которые вы связываете с составленным или реальным URL:

Клиент нажимает на поиск, например:

function search(params) {
  // record your current UI position
  // data (to save), title (to set on page), url (to set on page)
  History.pushState({ params: params }, "Search", "?search");


   // now run whatever should happen because client triggered search()
}

И теперь, когда клиент нажимает кнопку "Назад", вы можете получить ранее сохраненное состояние, чтобы что-то сделать с ним. Поскольку клиент попадает в его подлокотник, он вызывает statechange. И поскольку вы подписаны на это событие, вы можете определить, какое состояние вы ранее сохранили, и вызвать функции для изменения пользовательского интерфейса соответственно.

// Bind to StateChange Event
History.Adapter.bind(window, 'statechange', function() {
  var State = History.getState();

  // returns { data: { params: params }, title: "Search": url: "?search" }
  console.log(State); 

  // or you could recall search() because that where this state was saved
  if (State.url == "?search") {
    search(data.params);
  }
});

Это в значительной степени подводит итог. Клиент запускает функцию, вы назначаете state/url, а когда клиент щелкает назад, вы просматриваете свое предыдущее состояние и запускаете функции в зависимости от того, хотите ли вы восстановить пользовательский интерфейс или другое.

Это может быстро стать сложным и сложным кодом, и я не понимаю, что еще нужно объяснить, поэтому, если вы просто не получили AHA! и теперь знаю, что делать, я бы просто забыл об этом сейчас.

Абсолютно ничего не происходит автоматически в отношении состояний saving/restoring, все остальное в вашем приложении должно быть закодировано вручную, чтобы учесть, что произойдет, если состояние изменится.

Также глубокая связь не имеет ничего общего с этими вещами. Ваше приложение должно иметь возможность инициализировать себя и отображать определенные элементы пользовательского интерфейса однозначно на основе вызова его напрямую через URL-адрес. История предназначена исключительно для управления состоянием, когда пользователи уже используют ваше приложение, поэтому вы можете контролировать, что происходит, когда они нажимают кнопку back/forward.

И все, что происходит через JS, даст вам нулевые преимущества в отношении поисковых систем, поскольку они не заботятся о js и будут просто индексировать необработанный текст вашей страницы. Поэтому, если вам нужна глубокая привязка к поисковой системе, вам нужен код на стороне сервера, который отображает ваш пользовательский интерфейс в определенном состоянии в зависимости от запрошенного URL.