scopo dei dati in jquery? (rispetto all'aggiunta di campi personali agli oggetti Jquery)

Question

This la domanda è correlata alla mia e spiega che cos'è .data method in Jquery.

A parte il rapporto con HTML5 data-* attributi degli elementi (come <p class='foo_cl' data-bar='gee'>, per esempio) perché dovrei codice:

$('body').data("my_lab", {some:"object"}); // §1 

invece di

$('body').my_lab = {some:"object"};   // §2 

^{(io sono per lo più interessati nel caso dove il selettore di Jquery fornisce un oggetto, come per $('body') sopra)}

Il successivo (§2) sembra più leggibile e più breve, e credo che sarebbe più efficiente del precedente (§1). Naturalmente data è un selettore Jquery (ma potrei usare each per impostare il campo .my_lab, ecc ...)

E potrei anche pensare di cambiare l'elemento DOM con il brutto cercando

$('body')[0].my_lab = {some:"object"};  // §3 is ugly 

^{(che è forse un comportamento indefinito, vedi this)}

Naturalmente, v'è il potenziale problema di collisione il nome del campo my_lab con qualche campo esistente nell'attuazione JQuery; ma presumo che l'utilizzo di un suffisso comune (come my_) nei nomi dei campi dovrebbe essere sufficiente.

FWIW, sono interessato solo al recente Jquery (ad esempio Jquery 2.1.4) sul recente Firefox (ad esempio 38 o 42) su Linux.

In altre parole, perché aggiungere i miei campi in oggetti JQuery non dovrebbe essere disapprovato?

Answer 1

Facendo

$('body').my_lab = {some:"object"}; 

Si imposta il valore di un involucro jQuery specificato. Non sarebbe in grado di riaccedere i dati con un altro selettore:

$('body').my_lab = {some:"object"}; 
console.log($('body').my_lab); // will log undefined 

Questo è il motivo per cui utilizzando dati è sostanzialmente più affidabile

$('body').data('my_lab', {some:"object"}); 
console.log($('body').data("my_lab")); // will log {some: "object"} 

Per il 3 ° opzione: $("body")[0].attr = { my : "object" } parte:

Il jQuery il metodo dei dati previene potenziali perdite di memoria quando si manipola la dom/rimuovendo elementi dalla pagina (rimuovendo i dati e gli elementi associati) ed evita conflitti di attributi (come l'impostazione di attributi esistenti di domElement e altre cose sottili)

Quindi, in pratica, se si dispone di jQuery nell'app, non si ha alcun motivo per reinventare la rotellina eseguendo il binding manuale tra l'elemento dom e i dati javascript.