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 attributesone single data不是使用multiple-attributes(可能not works在某些情况下browsers)。

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