Come posso effettivamente usare history.js sul mio sito

Question

Ho letto tutti i post su history.js su StackOverflow tra cui, this, this e this e al guardato la source code, ma come un nuovo arrivato a JavaScript/jQuery Sono avere problemi a capire come implementare effettivamente il supporto per la cronologia html 5 e il fallback per supportare i browser html4 come ie8/9. Come posso apprezzare i vantaggi di UX dal presentare quanto più possibile URL coerenti, come questo risolve il deep linking e consente il bookmarking che voglio implementare, ma mi sento un po 'perso quando cerco di usarlo sul mio sito.

Dopo aver aggiunto history.js script per la mia pagina

Il codice da modificare come ho undertand che è:

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

È il //Change our states dove tutto nuovo codice va come questo codice dà solo esempi della controlli di cronologia?

O dovrei scrivere il mio codice al posto di questo intero blocco di codice (io uso jquery per aiutarmi a questo punto, data la mia novità nella codifica).

Stavo leggendo questo article sul caricamento di contenuti dinamici e cercando di implementare sul mio sito (posso far funzionare questo codice ma so che non funzionerà bene in ie8/9), ma sto avendo problemi a provare a capire come combinare con history.js

Come, in secondo luogo, sto cercando di capire come history.js gioca con modernizr?

E 'un sostituto di modernizr.history (dove si fa il test e se non v'è alcun supporto per js scende di nuovo alla pagina tipica di carico) o sarebbe funzionare in questo modo:

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

Solo l'aggiunta di il supporto per la cronologia del tuo sito non ti aiuterà in alcun modo, a meno che tu non abbia effettivamente delle funzioni che fanno uso di esso.

Per quanto riguarda modernizzare va solo ti dice se la storia è supportata sul browser corrente e se si prende l'azione x altra azione y

Ok quindi questo è come la storia potrebbe funzionare:

Considerare history.js un po 'come un registratore di macro. Un client scatta qualcosa e si spingono alcune variabili che si associa con una composta o un URL reale:

client scatta una ricerca, ad esempio, si chiama:

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

E ora, quando il cliente fa clic sul pulsante Indietro , è possibile ottenere lo stato precedentemente salvato per fare qualcosa con esso. Poiché il client colpisce il suo pulsante di risposta, attiverà statechange. E dal momento che sei iscritto a quell'evento, puoi determinare quale stato hai precedentemente salvato e chiamare le funzioni per modificare l'interfaccia utente di conseguenza.

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

Questo praticamente lo riassume. Il client attiva una funzione, assegni uno state/url e, quando il client fa clic, osserva lo stato precedente ed esegui le funzioni in base a se desideri ripristinare l'interfaccia utente o altro.

Questo può diventare tutto rapidamente il codice complicato e difficile e non vedo che altro c'è da spiegare, quindi a meno che non appena ricevuto l'AHA! e ora so cosa fare, per ora mi dimentico di questa roba.

Per gli stati saving/restoring non esiste assolutamente nulla di automatico, per cui è necessario codificare a mano tutto il resto dell'applicazione per tenere conto di ciò che accade se uno stato cambia.

Anche il deep linking non ha nulla a che fare con queste cose. L'applicazione deve avere la capacità di inizializzarsi e visualizzare specifici elementi dell'interfaccia utente in modo univoco in base alla chiamata direttamente tramite un URL. La cronologia è esclusivamente per la gestione dello stato quando gli utenti utilizzano già la tua applicazione, quindi puoi controllare cosa succede quando colpiscono il pulsante back/forward.

E tutto ciò che accade tramite JS, darà a zero benefici per quanto riguarda i motori di ricerca sono interessati in quanto non si preoccupano js e sarà solo indicizzare il testo grezzo di voi pagina. Quindi, se vuoi un deep link compatibile con i motori di ricerca, hai bisogno del codice side server che ti mostra l'interfaccia utente in uno stato specifico a seconda dell'URL richiesto.