jQuery Data vs Attr?

Qual è la differenza nell'uso tra $.datae $.attrquando si usa data-someAttribute?

La mia comprensione è che $.dataè memorizzata in jQuery $.cache, non nel DOM. Pertanto, se voglio utilizzare $.cacheper l'archiviazione dei dati, dovrei usare $.data. Se voglio aggiungere attributi di dati HTML5, dovrei usare $.attr("data-attribute", "myCoolValue").

Se si stanno passando dati a un elemento DOM dal server, è necessario impostare i dati sull'elemento:

<a id="foo" data-foo="bar" href="#">foo!</a>

È quindi possibile accedere ai dati utilizzando .data()in jQuery:

console.log( $('#foo').data('foo') );
//outputs "bar"

Tuttavia, quando si memorizzano i dati su un nodo DOM in jQuery utilizzando i dati, le variabili vengono archiviate sull'oggetto nodo . Questo per accogliere oggetti complessi e riferimenti memorizzare i dati sul nodo elemento come attributo ospiterà solo valori stringa.

$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

Inoltre, la convenzione di denominazione per gli attributi dei dati ha un po 'di "gotcha" nascosto:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

La chiave sillabata funzionerà comunque:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

Tuttavia, l'oggetto restituito da .data()non avrà la chiave sillabata impostata:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

È per questo motivo che suggerisco di evitare la chiave sillabata in javascript.

Per HTML, continua a utilizzare il modulo sillabato. Attributi HTML dovrebbero ottenere ASCII in minuscolo automaticamente , così <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>e <dIv DaTa-FoObAr></DiV>si suppone essere trattati come identici, ma per la migliore compatibilità come minuscole dovrebbero essere preferiti.

Il .data()metodo eseguirà anche alcuni casting automatici di base se il valore corrisponde a un modello riconosciuto:

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

Questa capacità di cast automatico è molto conveniente per creare istanze di widget e plugin:

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

Se devi assolutamente avere il valore originale come stringa, dovrai usare .attr():

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

_{Questo è stato un esempio inventato. Per memorizzare i valori di colore, usavo la notazione esadecimale numerica (cioè 0xABC123), ma vale la pena notare che hex è stato analizzato in modo errato nelle versioni jQuery prima dell'1.7.2 e non è più analizzato in un NumberjQuery 1.8 rc 1.}

jQuery 1.8 rc 1 ha modificato il comportamento del casting automatico . In precedenza, veniva Numbereseguito il cast di qualsiasi formato che fosse una rappresentazione valida di a Number. Ora, i valori numerici vengono espressi automaticamente solo se la loro rappresentazione rimane invariata. Questo è meglio illustrato con un esempio.

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

Se si prevede di utilizzare sintassi numeriche alternative per accedere a valori numerici, assicurarsi di lanciare il valore su un Numberprimo, come con un +operatore unario .

+$('#foo').data('hex'); // 1000

La differenza principale tra i due è dove viene archiviato e come si accede.

$.fn.attr memorizza le informazioni direttamente sull'elemento in attributi che sono pubblicamente visibili al momento dell'ispezione e che sono disponibili dall'API nativa dell'elemento.

$.fn.datamemorizza le informazioni in modo ridicolmente oscuro luogo . Si trova in una variabile locale chiusa denominata data_userche è un'istanza di una funzione definita localmente Data. Questa variabile non è accessibile direttamente dall'esterno di jQuery.

Set di dati con attr()

• accessibile da $(element).attr('data-name')
• accessibile da element.getAttribute('data-name') ,
• se il valore era in forma data-nameanche accessibile da $(element).data(name)eelement.dataset['name'] eelement.dataset.name
• visibile sull'elemento al momento dell'ispezione
• non possono essere oggetti

Set di dati con .data()

• accessibile solo da.data(name)
• non accessibile da .attr() o altrove
• non visibile pubblicamente sull'elemento al momento dell'ispezione
• possono essere oggetti

È possibile utilizzare l' data-*attributo per incorporare dati personalizzati. Gli data-*attributi ci danno la possibilità di incorporare attributi di dati personalizzati su tutti gli elementi HTML.

jQuery .data() metodo consente di ottenere / impostare dati di qualsiasi tipo su elementi DOM in modo sicuro da riferimenti circolari e quindi da perdite di memoria.

.attr()Metodo jQuery ottiene / imposta il valore dell'attributo solo per il primo elemento nel set corrispondente.

Esempio:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");