在 jQuery 中使用“数据属性”而不是 $.data 有什么优势？

Question

我想知道将数据分配给 DOM 与不分配给 DOM 的优势是什么

即假设我们已经说过 HTML

<a id="foo" href="#">foo!</a>

//Set attr data-me so it's <a id="foo" data-me="yay" href="#">foo!</a>
$('#foo').attr('data-me', 'yay');

//Retrieve the data 'yay'
$('#foo').data('data-me');

除了直接赋值之外：

var myInput = $('#foo');    

//Add some data
$.data(myInput, 'data-me', 'yay');

//Retrieve the data 'yay'
$.data(myInput, 'data-me');

我的理解是后者更快MUCH，因此我看不到在不需要时在整个 DOM 中添加data-someAttr 的意义？

Answer 1

它们有不同的用途。是的，它们似乎可以用来实现相同的目标，但在底层存在差异。

1. 虽然可以在属性中保存simple values，但不能保存DOM节点，因为you will creatememory leaks。也不能保存对象、数组、函数等……

2. $.attr() 可能比$('selector').data() 快，但并不比低级方法jQuery.data() 快。第一个数据方法比第二个有更多的开销，但是第二个不具备第一个的所有功能。例如，it does not get the data out of the data- attributes。

因此，我认为最好在加载时使用data-属性，这样可以用$('selector').attr()提取数据，用$.data()处理应用程序状态。

Answer 2

我不是专家，这是肯定的……但在我看来，两个明显的区别是设置“数据”时的时间/环境，以及数据的结构（类型）被存储/访问。

考虑这种情况：

<a id="foo" data-me="some string data" href="#">foo!</a

这段 html 可能是在服务器端生成的。如果是这样，只有服务器端需要知道“data-me”值的来源。一个限制是属性必须是字符串，或者对象的字符串表示形式 (JSON)

var customData = 
{
    date:new Date(),
    otherProp:'some value',
    someFunc: function(a,b)
    {
        // function dody
    }
};
$('#foo').attr('data-me', customData)

从javascript(medium)中，在某个时刻，由某个事件(time)触发，可以使用jQuery将一个dom元素绑定到一个给定的对象（不一定是字符串）

所以后一种方式 ($('#foo').attr('data-me', customData)) 消除了“唯一字符串”的限制，并允许您绑定到任何类型的 js 对象的 dom 元素，偶函数。