Identificatore di frammento di URL - semplificare la gestione dello stato (javascript)

Question

Ho un'applicazione Web che fa ampio uso dell'identificatore di frammento per gestire lo "stato".

examplesite.com/#$mode=direct$aa;map=t;time=2003;vid=4;vid=7 

Un certo numero di domande:

1) Che cosa è un buon modo di assegnare i vari "location.hash nome del valore coppie" alle variabili per tenere traccia dello stato?

1a) Devo creare un oggetto che tenga traccia dello stato in js o dichiari le variabili globali per ogni coppia di valori nome?

1b) Ci sono dei buoni plugin jquery per semplificare questo?

1c) Se voglio tenere traccia di qualcosa chiamato "colore" - dovrebbe sempre essere aggiunto al frammento (#) e qual è il modo corretto di verificare se è definito; il codice qui sotto può essere migliorato?

var color; 

var hashString = location.hash; 
var nvPairs = hashString.split(";"); 
var nvPair = new Array(); 

for (i = 0; i < nvPairs.length; i++) 
{ 
    var keyValuePair = nvPairs[i].split("="); 
    nvPair[keyValuePair[0]] = keyValuePair[1]; 
} 

if (nvPair['color']) color = nvPair['color'];  

1d) Come alcuni nomi sono usati due volte ("vid" nell'esempio di cui sopra) - come potrei facilmente negozio è variabili separate?

2) Ci sono 4 diversi "hash" Voglio prestare particolare attenzione a:

examplesite.com/ (senza hash)
examplesite.com/#example=5 (contiene "esempio")
examplesite.com/#time=2003;vid=4;vid=7;modified=5 (contiene "modificato")
examplesite.com/#time=2003;vid=4; vid = 7 (non contiene "modificato" o "esempio")

Come si scrive una struttura di controllo che estrae le variabili dall'hash quando l'applicazione carica e controlla le condizioni di cui sopra?

3) Come può essere memorizzato lo stato/i precedenti e come attivare un cambiamento di stato quando si preme il pulsante indietro?

Answer 1

vorrei solo usare un oggetto contenente array, invece di un array. Il codice dovrebbe essere simile:

var color; 

var keyValuePair, 
    hashString = location.hash, 
    nvPairs = hashString.split(";"), 
    nvPair = {}; 

for (var i = 0; i < nvPairs.length; ++i){ 
    keyValuePair = nvPairs[i].split("="); 
    if (keyValuePair[0] in nvPair) 
     nvPair[keyValuePair[0]].push(keyValuePair[1]); 
    else 
     nvPair[keyValuePair[0]] = [keyValuePair[1]]; 
} 

if ('color' in nvPair) color = nvPair['color'][0]; 

Answer 2

Credo che il barbecue da Ben Alman può aiutare: http://benalman.com/projects/jquery-bbq-plugin/

Answer 3

Un po 'in ritardo su questo, ma jQuery 1.9 causa problemi sul plug-in di Ben ($.browser)

Un biforcuta corretto versione può essere trovato qui:
https://github.com/georgekosmidis/jquery-hashchange

E un plugin per aiutare gestire le modifiche hash qui:
https://github.com/georgekosmidis/jquery-hashhandle

Maggiori informazioni su questo qui:
http://mycodepad.wordpress.com/2013/12/19/jquery-making-ajax-applications-crawlable/