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

Why use $.data() instead of directly setting an object via JavaScript?

本文关键字：对象 设置 JavaScript data 为什么      更新时间：2023-09-26

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

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

与使用推荐的 jQuery alterantive 相比：

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

只是快得多：JSperf

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

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

不

建议自定义属性（如 .foo）有几个原因：

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

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

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

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

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

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

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

你可以使用 ：first 选择器，比如，

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

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

相关文章：