Question

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

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

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

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

速度快得多：jsperf

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

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

Answer 1

有一些原因导致.foo等自定义属性不可取：

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

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

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

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

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

Answer 2

如果适用于single element，那么id selector最好，我认为。

您可以使用:first selector之类的，

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

使用data-* attribute您可set multiple attributes one single data而不是multiple-attributes（not works browsers {{1}} }}）。

为什么使用$ .data（）而不是通过JavaScript直接设置对象？

2 个答案: