数据集与 .data - 区别？

Question

我正在读取数据属性字段中的一些值。我见过两种读取数据的简单方法，如下所示：

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

或

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

我的问题是，其中哪些性能更​​好，或者它们真的不同？

我有一个页面，其中包含许多要访问的数据属性，我想使用性能最佳的方法。

任何有关理解两者之间差异的指导都将不胜感激。当我特别关注性能时，如果有其他原因需要使用其中一个，我也想知道这一点。

Answer 1

dataset 是包含数据属性的元素的本机属性，它是一个新的（ish）添加，因此仅在 IE11+、Chrome 8+、FF 6+ 等中受支持。

更跨浏览器的解决方案是直接获取属性

webappData.getAttribute('data-rating');

---

data()是一个jQuery方法，除了使用HTML5数据属性来设置初始值如果内部不存在，它与数据集没有任何共同之处。

data() 将您传递的任何数据存储在由 jQuery 创建的内部对象中，因此这会失败

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

element.dataset.key // undefined

因为数据根本不存储在属性中，而是由 jQuery 内部存储。
获取和设置数据属性的 jQuery 等效项是 attr()

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

---

本机方法可能更快，但由于它们无法与 jQuery 的 data() 相比，这并不重要，但对于获取数据属性，我认为具有最佳浏览器支持的最快方法是

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