Jak właściwie używać history.js na mojej stronie

Question

czytałem wszystkie posty o history.js na StackOverflow tym, this, this i this i co wyglądało na source code ale jako nowicjusz do JavaScript/jQuery jestem mając problem z ustaleniem, jak właściwie zaimplementować obsługę html 5 historii i awarię obsługi przeglądarek html4, takich jak ie8/9. Jak mogę docenić korzyści UX z prezentacji spójnego adresu URL, jak to możliwe, jak to rozwiązuje głębokie łączenie i pozwala na tworzenie zakładek, które chcę zaimplementować, ale jestem trochę zagubiony, gdy próbuję faktycznie użyć tego na mojej stronie.

Po dodaniu history.js skryptu na mojej stronie

Kodeksu zmodyfikować jak undertand to:

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); 

Czy //Change our states gdzie wszystko idzie jak nowy kod ten kod po prostu daje przykłady kontrola historii?

Czy powinienem napisać własny kod zamiast całego bloku kodu (używam jquery, aby mi pomóc w tym momencie, biorąc pod uwagę moją nowość w kodowaniu).

Czytałem ten numer article o dynamicznym ładowaniu treści i próbowałem zaimplementować na mojej stronie (mogę uruchomić ten kod, ale wiem, że nie będzie on dobrze grać w ie8/9), ale mam problemy z próbą wymyślić, jak połączyć z history.js

Aslo, w drugiej kolejności, staram się dowiedzieć, w jaki sposób history.js gra z modernizr?

Czy to zamiennik modernizr.history (gdzie robi test i jeśli nie ma wsparcia dla js wraca do typowego ładowania strony) lub będzie ona działać tak:

if (Modernizr.history) { 
    //Code goes here that works if it's 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... ? 
} 

Answer 1

Wystarczy dodanie obsługa historii w twojej witrynie nie pomoże ci w żaden sposób, chyba że rzeczywiście posiadasz odpowiednie funkcje.

Jeśli chodzi o modernizację przechodzi po prostu informuje, czy historia jest obsługiwana w bieżącej przeglądarki, a jeśli wziąć działania x innego działania y

Ok, więc jest to w jaki sposób historia będzie działać:

Rozważyć history.js rodzaj jak rejestrator makr. Klient kliknie coś i wcisnąć kilka zmiennych, które kojarzy się z wykonanego w górę lub w rzeczywistym adresem URL:

klient kliknie wyszukiwanie na przykład zadzwonić:

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() 
} 

a teraz, gdy klient kliknie przycisk Wstecz , możesz uzyskać wcześniej zapisany stan, aby coś z nim zrobić. Ponieważ klient trafi w swój backbutton, wywoła on statechange. A ponieważ jesteś subskrybentem tego wydarzenia, możesz określić, jaki stan wcześniej zapisałeś i funkcje połączeń, aby odpowiednio zmienić interfejs.

// 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's where this state was saved 
    if (State.url == "?search") { 
    search(data.params); 
    } 
}); 

To dość podsumowuje. Klient uruchamia funkcję, przypisujesz numer state/url, a gdy klient kliknie wstecz, spojrzysz na swój poprzedni stan i uruchomisz funkcje w zależności od tego, czy chcesz przywrócić interfejs użytkownika, czy inny.

To wszystko szybko może stać się skomplikowanym i skomplikowanym kodem, a ja nie rozumiem, co jeszcze można wytłumaczyć, więc jeśli nie masz AHA! a teraz wiem, co robić, na razie zapomniałbym o tych rzeczach.

Nie ma tu absolutnie nic automatycznego dzieje się na stronie saving/restoring stwierdza, wszystko inne w aplikacji będzie trzeba zakodować ręcznie, aby wziąć pod uwagę, co się dzieje, gdy stan się zmienia.

Również głębokie łączenie nie ma nic wspólnego z tymi rzeczami. Twoja aplikacja musi mieć możliwość inicjowania i wyświetlania określonych elementów interfejsu użytkownika w sposób unikalny na podstawie wywoływania go bezpośrednio za pośrednictwem adresu URL. Historia służy wyłącznie do zarządzania państwem, gdy użytkownicy już korzystają z aplikacji, więc możesz kontrolować, co dzieje się po naciśnięciu przycisku back/forward.

Wszystko, co dzieje się za pośrednictwem JS, przyniesie zero korzyści w odniesieniu do wyszukiwarek, ponieważ nie dbają o js i po prostu indeksują nieprzetworzony tekst strony. Jeśli więc chcesz, aby precyzyjne linki do wyszukiwarki były kompatybilne, potrzebujesz kodu po stronie serwera, który wyświetli interfejs użytkownika do określonego stanu w zależności od żądanego adresu URL.