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';

问题是未来的HTML标准可能会将mylibrary定义为本机属性，因此可能存在问题。

符号方法

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

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

WeakMap方法

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

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

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

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

Answer 2

JavaScript中的HTML元素只是一个JavaScript对象，因此您当然可以为其添加任意属性。 JavaScript会很好地处理垃圾收集。

data-属性是另一种选择，如果您的属性是字符串，则可能是更好的选择;它们的值将在DOM中可见（这可能是调试的好东西）。如果您的属性本身就是对象，那么您必须对它们进行字符串化（并反转该过程以检索它们的值）。

将数据与HTML元素关联（不使用jQuery）

2 个答案: