jQuery Data vs. Attr?

Question

Was ist der Unterschied in der Verwendung zwischen $.data y $.attr bei Verwendung von data-someAttribute ?

Ich gehe davon aus, dass $.data wird in der jQuery-Datei $.cache und nicht das DOM. Wenn ich also Folgendes verwenden möchte $.cache für die Datenspeicherung zu verwenden, sollte ich $.data . Wenn ich HTML5-Datenattribute hinzufügen möchte, sollte ich Folgendes verwenden $.attr("data-attribute", "myCoolValue") .

Answer 1

Wenn Sie Daten vom Server an ein DOM-Element übergeben, sollten Sie die Daten auf dem Element festlegen:

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

Der Zugriff auf die Daten kann dann über .data() in jQuery:

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

Wenn Sie jedoch Daten in einem DOM-Knoten in jQuery speichern mit Daten, werden die Variablen auf dem Knoten gespeichert Objekt . Dies dient dazu, komplexe Objekte und Referenzen unterzubringen, da die Daten auf dem Knoten gespeichert werden Element als Attribut kann nur Zeichenkettenwerte aufnehmen.

_{Ich setze mein Beispiel von oben fort:}

$('#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

Auch die Namenskonvention für Datenattribute hat ein kleines verstecktes "Problem":

_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 Schlüssel mit Bindestrich 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"

Allerdings wird das Objekt, das von .data() wird der Schlüssel mit Bindestrich nicht gesetzt sein:

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

Aus diesem Grund schlage ich vor, die Bindestrich-Taste in Javascript zu vermeiden.

Für HTML verwenden Sie weiterhin die Form mit Bindestrich. HTML-Attribute sollten automatisch in ASCII-Kleinbuchstaben geschrieben werden. donc <div data-foobar></div> , <DIV DATA-FOOBAR></DIV> y <dIv DaTa-FoObAr></DiV> sont angeblich als identisch zu behandeln, doch sollte aus Gründen der besseren Kompatibilität die Kleinschreibung bevorzugt werden.

Le site .data() Methode führt auch einige grundlegende automatische Anpassungen 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 für die Instanziierung von Widgets und Plugins:

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

Wenn Sie den Originalwert unbedingt als Zeichenkette haben müssen, dann müssen Sie .attr() :

_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. Zum Speichern von Farbwerten habe ich die numerische Hex-Notation verwendet (z. B. 0xABC123), aber es ist erwähnenswert, dass <a href="http://bugs.jquery.com/ticket/11309" rel="noreferrer">hex wurde in jQuery-Versionen vor 1.7.2 falsch geparst </a>und wird nicht mehr in eine <code>Number</code> ab jQuery 1.8 rc 1.}

jQuery 1.8 rc 1 änderte das Verhalten von Auto-Casting . Vorher war jedes Format, das eine gültige Darstellung eines Number würde an Number . Jetzt werden numerische Werte nur dann automatisch übertragen, 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, stellen Sie sicher, dass Sie den Wert in eine Number zuerst, zum Beispiel mit einer unären + Betreiber.

_{JS (Forts.):}

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

Answer 2

Der Hauptunterschied zwischen den beiden besteht darin, wo die Daten gespeichert werden und wie auf sie zugegriffen wird.

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

$.fn.data speichert die Informationen in einem lächerlich obskur Ort. Sie befindet sich in einer geschlossenen lokalen Variablen namens data_user die eine Instanz einer lokal definierten Funktion Data ist. Diese Variable ist von außerhalb von jQuery nicht direkt zugänglich.

Datensatz mit attr()

• erreichbar von $(element).attr('data-name')
• erreichbar von element.getAttribute('data-name') ,
• wenn der Wert in Form von data-name auch erreichbar von $(element).data(name) y element.dataset['name'] y element.dataset.name
• bei der Inspektion auf dem Element sichtbar
• können keine Objekte sein

Datensatz mit .data()

• zugänglich seulement von .data(name)
• nicht erreichbar von .attr() oder irgendwo anders
• nicht öffentlich sichtbar auf dem Element bei der Inspektion
• können Objekte sein

Answer 3

Sie können verwenden data-* Attribut, um benutzerdefinierte Daten einzubetten. Die data-* Attribute gibt uns die Möglichkeit, benutzerdefinierte Datenattribute in alle HTML-Elemente einzubetten.

jQuery .data() Methode ermöglicht es Ihnen, Daten beliebigen Typs auf DOM-Elemente zu erhalten/zu setzen, und zwar auf eine Weise, die sicher vor zirkulären Verweisen und somit vor Speicherlecks ist.

jQuery .attr() Methode erhält/setzt den 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");