webentwicklung-frage-antwort-db.com.de

Datensatz vs .data - Unterschied?

Ich lese einige Werte in Datenattributfeldern. Ich habe zwei einfache Möglichkeiten zum Lesen der Daten gesehen:

var webappData = document.getElementById('web-app-data'),
    rating = webappData.dataset.rating;

OR

var effectData = $('.effects-list li'),
    creative = effectData.filter('[data-creative]').data("creative");

Meine Frage ist, welche von diesen hat eine bessere Leistung oder unterscheiden sie sich wirklich?

Ich habe eine Seite mit vielen Datenattributen, auf die ich zugreife, und möchte die Methode mit der besten Leistung verwenden.

Jede Anleitung zum Verständnis des Unterschieds zwischen den beiden wäre dankbar. Während ich die Leistung speziell betrachte, wenn es andere Gründe gibt, eine über die andere zu verwenden, möchte ich dies auch wissen.

31
L84

dataset ist eine native Eigenschaft eines Elements, das die Datenattribute enthält. Es handelt sich um einen neuen (ish) Zusatz und wird daher nur in IE11 +, Chrome 8 unterstützt +, FF 6+ usw.

Eine browserübergreifendere Lösung wäre, das Attribut direkt abzurufen

webappData.getAttribute('data-rating');

data() ist eine jQuery-Methode, die, abgesehen von der Verwendung des HTML5-Datenattributs zum Festlegen des Anfangswerts, nichts mit dem Dataset gemeinsam hat, wenn intern keiner vorhanden ist.

data() speichert alle übergebenen Daten in einem von jQuery erstellten internen Objekt, sodass dies beispielsweise fehlschlagen würde

$(element).data('key', 'value');

element.dataset.key // undefined

da die Daten gar nicht in den Attributen gespeichert werden, sondern intern von jQuery.
Das jQuery-Äquivalent zum Abrufen und Festlegen des Datenattributs wäre attr()

$(element).attr('data-key', 'value');

Die nativen Methoden sind wahrscheinlich schneller, aber da sie nicht wirklich mit jQueries data() vergleichbar sind, spielt es keine Rolle, aber um das Datenattribut zu erhalten, würde ich denken, dass die schnellste Methode mit der besten Browserunterstützung wäre

var rating = webappData.getAttribute('data-rating');
64
adeneo