wake-up-neo.net

jQuery Data vs Attr?

Was ist der Unterschied in der Verwendung zwischen $.data und $.attr, wenn data-someAttribute verwendet wird?

Mein Verständnis ist, dass $.data in jQueries $.cache gespeichert ist, nicht im DOM. Wenn ich $.cache für die Datenspeicherung verwenden möchte, sollte ich $.data verwenden. Wenn ich HTML5-Datenattribute hinzufügen möchte, sollte ich $.attr("data-attribute", "myCoolValue") verwenden.

496
John B

Wenn Sie Daten vom Server an ein DOM-Element übergeben, sollten Sie die Daten für das Element festlegen:

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

Auf die Daten kann dann mit .data() in jQuery zugegriffen werden:

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

Wenn Sie jedoch Daten auf einem DOM-Knoten in jQuery mit Daten speichern, werden die Variablen auf dem Knotenobjekt gespeichert . Dies dient zur Aufnahme komplexer Objekte und Referenzen, da die Daten im Knotenelement als Attribut nur Zeichenfolgenwerte enthalten.

Fortsetzung meines Beispiels von oben:
$('#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

Die Namenskonvention für Datenattribute hat auch etwas verstecktes "gotcha":

HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

Der mit Bindestrich versehene Schlüssel funktioniert weiterhin:

HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

Für das von .data() zurückgegebene Objekt ist jedoch kein getrennter Schlüssel festgelegt:

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

Aus diesem Grund empfehle ich, den mit Bindestrich versehenen Schlüssel in Javascript zu vermeiden.

Verwenden Sie für HTML weiterhin das mit Bindestrich versehene Formular. HTML-Attribute sollen automatisch in ASCII-Kleinbuchstaben umgewandelt werden , also werden <div data-foobar></div>, <DIV DATA-FOOBAR></DIV> und <dIv DaTa-FoObAr></DiV> angenommen als identisch zu behandeln, aus Gründen der Kompatibilität sollte jedoch die Kleinbuchstabenform bevorzugt werden.

Die .data() -Methode führt auch ein grundlegendes Auto-Casting durch, wenn der Wert einem erkannten Muster entspricht:

HTML:
<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>
JS:
$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

Diese Auto-Casting-Funktion ist sehr praktisch, um Widgets und Plugins zu instanziieren:

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

Wenn Sie den ursprünglichen Wert unbedingt als Zeichenfolge haben müssen, müssen Sie .attr() verwenden:

HTML:
<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>
JS:
$('#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

Dies war ein erfundenes Beispiel. Ich habe zum Speichern von Farbwerten die numerische Hexadezimalnotation (z. B. 0xABC123) verwendet, aber es ist erwähnenswert, dass hex wurde in jQuery-Versionen vor 1.7.2 falsch analysiert und nicht mehr in ein Number ab jQuery 1.8 rc 1.

jQuery 1.8 rc 1 hat das Verhalten beim automatischen Casting geändert . Vorher wurde jedes Format, das eine gültige Darstellung eines Number war, in Number umgewandelt. Jetzt werden numerische Werte nur dann automatisch umgewandelt, wenn ihre Darstellung gleich bleibt. Dies lässt sich am besten anhand eines Beispiels veranschaulichen.

HTML:
<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>
JS:
                              // 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"

Wenn Sie vorhaben, alternative numerische Syntaxen für den Zugriff auf numerische Werte zu verwenden, müssen Sie den Wert zuerst in Number umwandeln, z. B. mit einem unären + -Operator.

JS (Forts.):
+$('#foo').data('hex'); // 1000
739
zzzzBov

Der Hauptunterschied zwischen den beiden besteht darin, wo sie gespeichert sind und wie darauf zugegriffen wird.

$.fn.attr speichert die Informationen direkt auf dem Element in Attributen, die bei der Überprüfung öffentlich sichtbar sind und auch über die native API des Elements verfügbar sind.

$.fn.data speichert die Informationen an einem lächerlich undurchsichtigen Ort. Es befindet sich in einer geschlossenen lokalen Variablen namens _data_user_, die eine Instanz einer lokal definierten Funktion Data ist. Auf diese Variable kann nicht direkt von außerhalb von jQuery zugegriffen werden.

Datensatz mit attr()

  • zugänglich von $(element).attr('data-name')
  • zugänglich von element.getAttribute('data-name'),
  • wenn der Wert in der Form _data-name_ war, kann auch über $(element).data(name) und _element.dataset['name']_ und _element.dataset.name_ darauf zugegriffen werden.
  • sichtbar auf dem Element bei der Inspektion
  • können keine Objekte sein

Datensatz mit .data()

  • zugriff nur über .data(name)
  • nicht zugänglich von .attr() oder anderswo
  • bei der Inspektion auf dem Element nicht öffentlich sichtbar
  • können Objekte sein
101
Travis J

Sie können das data-* -Attribut verwenden, um benutzerdefinierte Daten einzubetten. Mit den Attributen data-* können benutzerdefinierte Datenattribute in alle HTML-Elemente eingebettet werden.

mit der Methode jQuery .data() können Sie DOM-Elemente auf eine Weise abrufen/festlegen, die vor Zirkelverweisen und damit vor Speicherverlusten geschützt ist.

jQuery .attr() Methode holt/set Attributwert nur für das erste Element in der übereinstimmenden Menge.

Beispiel:

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

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