我需要将某些数据与HTML元素相关联，以希望避免任何内存泄漏。显然，一个简单的解决方案是在元素上抛出某种标识符，然后创建一个将该标识符映射到我需要的数据的字典。但是，这位于用户将添加到其页面的javascript库中，因此我无法控制何时添加或删除元素。
我想要做的是将数据与HTML元素在页面上相关联，同时允许/当元素被删除时对这些数据进行GC处理。有没有一种方法可以完成，而无需编写我自己的定期GC来清理孤立的数据？向HTML元素添加属性是否安全？
最佳答案
属性方法
您可以使用自定义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定义为 native 属性，因此可能会出现问题。符号方法
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
关于javascript - 将数据与HTML元素关联(无jQuery)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28650570/