在jQuery中使用’data-attribute’而不是$ .data有什么好处？

我想知道使用数据分配到DOM而不是DOM的优势是什么

即假设我们说过HTML

foo! //Set attr data-me so it's foo! $('#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');

我的理解是，后者的速度要快得多，因此我不能看到在不需要的时候在DOM中添加data-someAttr的意义吗？

它们用于不同的目的。是的，看起来他们可以用来实现同样的目标，但在引擎盖下却存在差异。

虽然您可以在属性中保存简单值，但您无法保存DOM节点，因为您将创建内存泄漏。你也不能保存对象，数组，函数等……
$.attr()可能比$('selector').data()更快，但它并不比低级方法jQuery.data()快。第一种数据方法比第二种方法具有更多的开销，但第二种方法不具备第一种数据方法的所有function。例如，它不会从data-属性中获取数据。

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

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

Concider这个场景：

 foo!

这个html的pice可能是在服务器端生成的。如果是这样，只有服务器端需要知道'data-me'值的来源。一个限制是属性必须是字符串，或对象的字符串表示（JSON）

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

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

所以后一种方式（$（'＃foo'）。attr（'data-me'，customData））删除了'only string'限制，并允许你绑定任何类型的js对象，甚至是函数的dom元素。