web-dev-qa-db-fra.com

jeu de données vs .data - Différence?

Je lis certaines valeurs dans les champs d'attribut de données. J'ai vu deux façons simples de lire les données comme indiqué ci-dessous:

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

OR

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

Ma question est laquelle de celles-ci a de meilleures performances ou sont-elles vraiment différentes?

J'ai une page avec de nombreux attributs de données auxquels j'accède et je voudrais utiliser la méthode qui a les meilleures performances.

Tout conseil sur la compréhension de la différence entre les deux serait apprécié. Bien que j'examine la performance en particulier s'il existe d'autres raisons d'utiliser l'une sur l'autre, je voudrais également le savoir.

javascriptjquerydatasetcustom-data-attribute
31
L84

dataset est une propriété native d'un élément qui contient les attributs de données, c'est un nouvel ajout (ish) et en tant que tel n'est pris en charge que dans IE11 +, Chrome 8 +, FF 6+ etc.

Une solution plus multi-navigateur serait d'obtenir directement l'attribut

webappData.getAttribute('data-rating');

data() est une méthode jQuery, et à part utiliser l'attribut de données HTML5 pour définir la valeur initiale si aucune n'existe en interne, elle n'a rien de commun avec l'ensemble de données.

data() stocke toutes les données que vous lui transmettez dans un objet interne créé par jQuery, donc cela échouerait par exemple

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

element.dataset.key // undefined

car les données ne sont pas du tout stockées dans les attributs, mais en interne par jQuery.
L'équivalent jQuery d'obtenir et de définir l'attribut de données serait attr()

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

Les méthodes natives sont probablement plus rapides, mais comme elles ne sont pas vraiment comparables à la data() de jQuery, cela n'a pas vraiment d'importance, mais pour obtenir l'attribut data, je pense que la méthode la plus rapide avec la meilleure prise en charge du navigateur serait

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