javascript - 将数据与 HTML 元素相关联(不使用 jQuery)

Question

我需要将一些数据与 HTML 元素相关联，希望避免任何内存泄漏。显然，一个简单的解决方案是在元素上添加某种标识符，然后创建一个字典，将该标识符映射到我需要的数据。但是，这是在用户将添加到他们的页面的 javascript 库中，因此我无法控制何时添加或删除元素。

我想要做的是将数据与位于页面上的 HTML 元素相关联，同时允许在/如果删除该元素时对该数据进行 GC。有没有一种方法可以不涉及编写我自己的定期 GC 来清理孤立数据？向 HTML 元素添加属性是否安全？

Answer 1

属性方法

您可以使用自定义 data-* 属性将数据存储在元素中。

这有一个限制，你只能存储字符串，但你可以使用 JSON 来存储普通对象或数组(不是通过引用)。

为避免与其他代码发生冲突，最好在属性中包含您的库的名称。

它们可以直接在 HTML 中设置:

<div data-mylibrary-foo="bar"></div>

并且可以使用 JavaScript 读取或写入它们:

element.getAttribute('data-mylibrary-foo');        // read  (old way)
element.setAttribute('data-mylibrary-foo', 'bar'); // write (old way)
element.dataset.mylibraryFoo;                      // read  (new way)
element.dataset.mylibraryFoo = 'bar';              // write (new way)

它们也可以通过 CSS 使用一些属性选择器来读取。

属性方法

这比属性方法灵活得多，允许在元素中存储任意数据。

为避免与其他代码冲突，最好将所有属性包装在一个对象中，并使用您的库名称:

element.mylibrary = {};
element.mylibrary.foo = 'bar';

问题是 future 的 HTML 标准可能会将 mylibrary 定义为原生属性，因此可能会出现问题。

符号方法

ECMAScript 6 引入了 symbols , 可以用作属性。优点是每个符号都有唯一标识，因此您无需担心其他库或 future 标准使用与您的代码相同的属性。

var foo = Symbol("foo");
element[foo] = 'bar';

WeakMap 方法

ECMAScript 6 引入了 WeakMap s，它允许您以某种方式将数据与对象相关联，如果对象不再在其他任何地方被引用，它们将被垃圾收集。

与属性方法一样，它们允许您存储任意数据。

由于数据未存储在元素本身中，因此不存在冲突风险。

var allData = new WeakMap();
var data1 = allData.get(element1) || {}; // read
data1.foo = "bar";
allData.set(element1, data1);            // write