Qual è il modo migliore per memorizzare più valori per $ .data() di jQuery?

Question

Se si memorizzano più valori (10+) su un numero elevato di div, è più ottimale archiviarli tutti in un singolo oggetto o come valori separati?

singolo oggetto:

$("#div_id").data("data", {foo:1, bar:2}); 

Valori separati:

$("#div_id") 
    .data("foo", 1) 
    .data("bar", 2); 

Quali sono i compromessi di ogni metodo? Alcuni di questi attributi saranno accessibili frequentemente (durante i callback di eventi come il trascinamento, ad esempio).

Answer 1

Se entrambi gli approcci sono facili da utilizzare nel codice, andare a memorizzare un singolo oggetto. Evita l'overhead aggiuntivo di chiamare il metodo data() ogni volta che è necessario un valore. In questo modo, è possibile recuperare l'oggetto di mapping con una chiamata a data() e quindi recuperare i valori da questo oggetto tutte le volte che si desidera senza dover chiamare nuovamente data().

Il metodo data() utilizza gli oggetti per associare elementi a chiavi/valori sotto la cappa, pertanto non offre alcun miglioramento delle prestazioni rispetto alla gestione di un oggetto di mappatura.

Answer 2

probabilmente sarei fare qualcosa di simile:

var data = $("#div_id").data(); 
data.foo=1; 
data.bar=2; 

Answer 3

In 1.4 si può fare questo:

$('#somediv').data({ one : 1, two : 2, three : 3 }); 

Questo è un ottimo modo per inizializzare l'oggetto di dati. TUTTAVIA, in 1.4.2, tenere presente che l'utilizzo di questo modulo sostituirà QUALSIASI dato esistente su questo elemento. Quindi, se provi questo:

$('#somediv').data('one', 1); 

$('#somediv').data({ two : 2, three : 3 }); 

Eliminerai il valore di "uno".

(Su una nota personale, penso che sia un peccato perché jQuery fa già largo uso di fondere oggetti con la sua $ .extend. La sua non è chiaro per me perché non è stato utilizzato qui.)

UPDATE (suggerito da utente: @ricka, grazie):

1.4.3 e, si fonde i dati (http://api.jquery.com/data/#data-obj):

In jQuery 1.4.3 impostazione dei dati di un elemento oggetto con. dati (oggetto) estende il d ata precedentemente memorizzato con quell'elemento. jQuery stesso utilizza il metodo .data() per salvare le informazioni con i nomi 'eventi' e 'handle', e inoltre riserva qualsiasi nome di dati che inizia con un carattere di sottolineatura ('_') per uso interno.

Prima di jQuery 1.4.3 (a partire da jQuery 1.4) il metodo .data() sostituiva completamente tutti i dati, invece di estendere semplicemente l'oggetto . Se si utilizzano plug-in di terze parti, potrebbe non essere consigliabile sostituire completamente l'oggetto dati dell'elemento, poiché i plug-in possono anche impostare i dati.