3

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

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

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

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

快得多：jsperf

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

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

4

2 回答 2

5

.foo不建议使用诸如此类的自定义属性有几个原因：

  1. 在某些浏览器中，根据您分配给自​​定义属性的内容，您最终可能会在 DOM 和 JS 之间出现循环引用，这在某些情况下会导致内存泄漏。

  2. 元素属性命名空间保留供浏览器使用和将来的属性使用。这就是为什么 HTML5 规范甚至建议所有自定义属性都以前缀作为data-前缀，以将它们全部放在同一个名称中。因此，如果您开始向 DOM 元素随机添加属性，您现在或将来可能会与某些内容发生冲突。

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

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

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

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

于 2013-11-14T11:03:07.100 回答
1

如果是为了single element那一个id selector最好的，我想。

您可以使用:first 选择器，例如，

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

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

于 2013-11-14T10:57:39.197 回答