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

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

虽然您可以在属性中保存simple values，但您无法保存DOM节点，因为you will create memory leaks。你也不能保存对象，数组，函数等......
$.attr()可能比$('selector').data()更快，但速度不比低级方法jQuery.data()快。第一种数据方法比第二种数据方法具有更多的开销，但是第二种数据方法不具有第一种数据方法的所有功能。例如，it does not get the data out of the data- attributes。

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

Answer 2

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

Concider这个场景：

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

这个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元素，甚至功能。

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

2 个答案: