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

Question

我经常读这是不好的做法,因为它很难维护,但做的是:

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

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

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

快得多:jsperf

无论data我砍中不可见的类似Firebug调试器,所以从一个"知名度"点有使用任何一个没有什么区别.

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

Answer 1

有几个原因导致自定义属性.foo不可取:

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

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

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

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

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

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