为什么要使用 $.data() 而不是直接通过 JavaScript 设置对象？答案

【问题标题】：Why use $.data() instead of directly setting an object via JavaScript?为什么要使用 $.data() 而不是直接通过 JavaScript 设置对象？
【发布时间】：2013-11-27 08:14:35
【问题描述】：

我经常读到这是不好的做法，因为它很难维护，但是这样做：

document.getElementsByTagName("h1")[0].foo = {"key":"value"};

与使用推荐的 jQuery 替代方案相比：

$.data($(document.getElementsByTagName("h1")[0]), "foo", {"key":"value"});

速度快得多：jsperf

data 和我的 hack 在像 Firebug 这样的调试器中是不可见的，因此从“可见性”的角度来看，使用任何一个都没有区别。

问题：
为什么直接在元素上存储信息是不好的做法？

【问题讨论】：

如果两者都看不到，说明你看的不够仔细。
$('h1').eq(0).data('foo', {"key":"value"}) 不是更好的主意吗？
使用data() 的好处是，如果您在HTML 中使用data-* 属性，它就会被填充
@frequent - 直接设置属性要快得多，这并不奇怪，但使用 data() 设置它是安全的，并且可以避免循环引用和 DOM 错误，这也是它速度较慢的主要原因。
@RohanKumar - 没关系，jQuery 创建一个名为 $.cache 的对象，每个附加了 data() 的元素只获得一个带有 ID 的属性，然后将该 ID 用作在 $.cache 对象中键入以查找存储的任何数据，因此数据永远不会存储在元素本身上，它位于一个单独的对象中，从而避免内存泄漏和循环引用等。要使用 HTML5 数据属性，.data( ) 总是首先检查 getAttribute('data-') 以查看是否有任何数据直接附加到标记中的元素。

标签： javascript jquery store jquery-data

【解决方案1】：

不建议使用 .foo 等自定义属性的原因有两个：

在某些浏览器中，根据您分配给自定义属性的内容，您最终可能会在 DOM 和 JS 之间产生循环引用，这在某些情况下会导致内存泄漏。
元素属性命名空间是为浏览器和未来属性保留的。这就是为什么 HTML5 规范甚至建议所有自定义属性都以 data- 前缀作为前缀，以便将它们全部放在同一个名称中。因此，如果您开始向 DOM 元素随机添加属性，您现在或将来可能会与某些内容发生冲突。

jQuery 的.data() 创建一个 javscript 对象，并将使用.data() 创建的所有数据元素存储在 javascript 中。它使用一个自定义属性作为.data() 世界的索引，以便它可以找到属于特定DOM 元素的正确项目。它没有 DOM JS 循环引用的机会，并且您与 .data() 一起使用的键永远不会与 DOM 属性名称冲突。

仅供参考，使用.data() 的更常见方式是通过 jQuery 对象上的方法，例如：

$("h1").eq(0).data("foo", {"key":"value"})

native 方法比 jQuery 替代品更快的情况并不少见，因为 jQuery 做得更多是为了提供其扩展的功能集和跨浏览器兼容性，尽管 jQuery 通常是因为它的速度不被注意。您通常会使用 jQuery 来帮助实现跨浏览器兼容性，并使用它的功能来加快您的开发工作。性能优化通常仅在您隔离并分析了特定的性能问题时才进行，并且有时可以将某些 jQuery 替换为本机代码以加快特定操作。

【讨论】：

【解决方案2】：

如果是single element，我认为id selector 是最好的。

你可以用:first selector点赞，

$.data($("h1:first"), "foo", {"key":"value"});

并且使用data-* attribute，您可以在one single data 中使用set multiple attributes，而不是使用multiple-attributes（在某些browsers 中可能是not works）。

【讨论】：