Ich weiß mehr darüber, wie jQuery Daten speichert.

Gibt es einen Vorteil, wenn man das eine oder andere macht:

$('#editCity').data('href', "xx");
var a = $('#editCity').data('href');

Oder

$('#editCity').attr('data-href', "xx");
var a = $('#editCity').attr('data-href');

Noch eine verwandte Frage.

Wenn ich das habe:

var modal = { x: 'xx', y: 'yy' };

Kann ich dies auch mit .data (..) speichern?

1
user1464139 9 Okt. 2012 im 17:42

3 Antworten

Beste Antwort

Das Speichern von Eigenschaftswerten direkt auf DOM-Elementen ist aufgrund möglicher Speicherlecks riskant. Wenn Sie jQuery trotzdem verwenden, ist der .data() -Mechanismus eine wunderbare und sichere Möglichkeit, die Informationen pro Element zu verfolgen. Es ermöglicht auch die Speicherung beliebiger JavaScript-Datenstrukturen, nicht nur von Zeichenfolgen.

edit - Wenn Ihr HTML-Markup data-foo Attribute enthält, werden diese beim Zugriff auf die Schlüssel implizit gelesen. Das heißt, wenn Ihr HTML so aussieht:

<div id="div1" data-purpose="container">

Dann in jQuery:

alert( $('#div1').data('purpose') ); // alerts "container"

Darüber hinaus führt jQuery auch eine "intelligente" Analyse der Attributwerte durch. Wenn ein Wert wie eine Zahl aussieht, gibt jQuery eine Zahl zurück, keine Zeichenfolge. Wenn es wie JSON aussieht, wird der JSON für Sie de-serialisiert.

Bearbeiten - Hier ist ein guter Trick: In der Chrome-Entwicklerkonsole (Ansicht "Konsole") können Sie JavaScript-Ausdrücke eingeben und auswerten lassen. Die Auswertung erfolgt immer im Kontext der Seite, an der Sie arbeiten. Wenn Sie ein Element in der Ansicht "Elemente" auswählen, verweist das JavaScript-Symbol $0 in der Konsole auf das ausgewählte DOM-Element. So können Sie die "Daten" -Karte jederzeit auf ein Element untersuchen, indem Sie zur Konsole gehen und Folgendes eingeben:

$($0).data("something");

Die Funktion .data() gibt, wenn sie ohne Parameter aufgerufen wird, alle Schlüssel / Wert-Paare zurück:

$($0).data();
1
Pointy 9 Okt. 2012 im 14:02

Der interessanteste Punkt bei der Datenfunktion ist, dass Sie jede Art von Objekt hinzufügen können, zum Beispiel Ihr modal. Und jQuery achtet, wie in der Dokumentation angegeben, darauf, Speicherlecks zu vermeiden, wenn sich das DOM ändert:

Mit der Methode jQuery.data () können wir Daten jeglichen Typs auf eine Weise an DOM-Elemente anhängen, die vor Zirkelverweisen geschützt und daher frei von Speicherlecks ist.

Bei Zeichenfolgen sind Speicherverluste nicht möglich, aber der Hauptunterschied besteht darin, dass die erste Lösung sauberer (kohärenter, wenn Sie andere Daten als Zeichenfolgen in anderen Teilen Ihrer Anwendung speichern), klarer (die Absicht ist offensichtlich) und nicht. t CSS-Berechnung erzwingen (DOM wird nicht geändert).

1
Denys Séguret 9 Okt. 2012 im 13:44

Sie haben beide Vorteile ... Das heißt, 99% der Zeit sollten Sie .data('whatever', value) verwenden

Vorteile der Verwendung von .data('whatever', value):

  • weniger geeignet, Speicherlecks zu verursachen, da das DOM nicht verwendet wird.
  • Das Abrufen von Daten aus dem Speicher ist etwas schneller als aus dem DOM.
  • Kann jede Art von Objekt einfügen, ohne es zuerst in JSON zu serialisieren.

Vorteile der Verwendung von .attr('data-whatever', value):

  • kompatibel mit .data('whatever')
  • Mit dieser Option können Sie das Element anhand des Werts auswählen: $('[data-whatever=foo]')
  • Sie können jedes Objekt darin ablegen, es muss jedoch serialisiert werden, wenn es sich um einen komplexen Typ handelt.
0
Ben Lesh 9 Okt. 2012 im 13:51