JS `WeakMap` 的实际应用：DOM 元素私有数据关联，避免内存泄漏

嘿，大家好！我是老码农，今天咱们聊聊JS里一个挺酷的东西：WeakMap。这玩意儿，说起来高大上，但用好了，能帮你解决不少实际问题，特别是跟DOM元素打交道的时候。

咱们今天要聊的核心就是：用 WeakMap 来给 DOM 元素关联私有数据，并且避免内存泄漏。

啥是 `WeakMap` ？为啥需要它？

首先，咱们得搞清楚 WeakMap 是个啥。简单来说，它就是一个键值对的集合，跟 Map 很像。

特性	`Map`	`WeakMap`
键的类型	可以是任何类型	只能是对象
值的类型	可以是任何类型	可以是任何类型
垃圾回收	键被引用，不会被垃圾回收	键不被引用，会被垃圾回收
是否可迭代	可以通过 `for...of` 迭代	不可迭代，不能直接获取所有键值对
应用场景	存储需要长期维护的数据，缓存等	存储与对象生命周期相关的数据，私有数据等

看到没？关键的区别就在于垃圾回收。Map 里的键如果是个对象，只要 Map 存在，这个对象就不会被垃圾回收，即使你在代码里已经不再使用它了。但 WeakMap 不一样，如果 WeakMap 里的键（对象）在其他地方不再被引用，那么垃圾回收器就会把它回收掉，同时 WeakMap 里的对应键值对也会被自动清除。

这特性有啥用？想象一下，你在做一个复杂的网页应用，需要给大量的 DOM 元素添加一些额外的数据，比如状态、配置等等。如果你用普通的 Map 来存储这些数据，当 DOM 元素从页面上移除后，Map 里的数据依然存在，导致内存泄漏。时间一长，你的应用就会变得越来越慢。

WeakMap 就解决了这个问题。它允许你把数据跟 DOM 元素的生命周期绑定在一起，当 DOM 元素被移除时，对应的数据也会自动消失，避免内存泄漏。

实战：用 `WeakMap` 给 DOM 元素加私有数据

光说不练假把式，咱们直接上代码。假设我们需要给一个按钮添加一个点击计数器，用 WeakMap 来实现：

const buttonData = new WeakMap();

function handleClick(button) {
  let count = buttonData.get(button) || 0; // 初始值是 0
  count++;
  buttonData.set(button, count);
  console.log(`Button clicked ${count} times`);
}

// 创建一个按钮
const myButton = document.createElement('button');
myButton.textContent = 'Click Me';
document.body.appendChild(myButton);

// 添加点击事件监听器
myButton.addEventListener('click', () => handleClick(myButton));

// 模拟 DOM 元素被移除
// 假设一段时间后，按钮被从 DOM 树中移除
// document.body.removeChild(myButton);
// myButton = null; // 清除引用

// 移除按钮后，WeakMap 里的数据会被自动回收，避免内存泄漏

这段代码做了什么？

创建 WeakMap： buttonData 用来存储按钮和对应的点击次数。
handleClick 函数： 每次点击按钮，就从 WeakMap 里获取点击次数，加一，然后更新 WeakMap。
创建按钮： 创建一个按钮，并添加到页面上。
添加事件监听器： 给按钮添加点击事件监听器，每次点击都调用 handleClick 函数。

关键在于最后的部分。如果按钮从 DOM 树中移除，并且没有其他地方引用它，那么垃圾回收器就会回收这个按钮对象。由于 buttonData 是一个 WeakMap，它会自动清除掉与这个按钮相关的键值对，避免内存泄漏。

进阶：封装一个更通用的 DOM 数据存储工具

上面的例子很简单，但我们可以把它封装成一个更通用的工具，方便在项目中复用。

class ElementData {
  constructor() {
    this.data = new WeakMap();
  }

  set(element, key, value) {
    if (!this.data.has(element)) {
      this.data.set(element, {});
    }
    this.data.get(element)[key] = value;
  }

  get(element, key) {
    const elementData = this.data.get(element);
    return elementData ? elementData[key] : undefined;
  }

  has(element, key) {
    const elementData = this.data.get(element);
    return elementData ? elementData.hasOwnProperty(key) : false;
  }

  delete(element, key) {
    const elementData = this.data.get(element);
    if (elementData && elementData.hasOwnProperty(key)) {
      delete elementData[key];
      if (Object.keys(elementData).length === 0) {
        this.data.delete(element); // 如果元素没有其他数据，从 WeakMap 中移除
      }
      return true;
    }
    return false;
  }
}

// 使用示例
const elementData = new ElementData();

const myDiv = document.createElement('div');
document.body.appendChild(myDiv);

elementData.set(myDiv, 'status', 'active');
elementData.set(myDiv, 'id', 123);

console.log(elementData.get(myDiv, 'status')); // 输出: active
console.log(elementData.has(myDiv, 'id'));    // 输出: true

elementData.delete(myDiv, 'status');
console.log(elementData.get(myDiv, 'status')); // 输出: undefined
console.log(elementData.has(myDiv, 'status'));    // 输出: false

// 模拟 DOM 元素被移除
// document.body.removeChild(myDiv);
// myDiv = null;
// 移除元素后，ElementData 里的数据会被自动回收

这个 ElementData 类提供了一套更完善的 API，可以给 DOM 元素存储多个键值对。

set(element, key, value)： 给 DOM 元素设置指定 key 的值。
get(element, key)： 获取 DOM 元素指定 key 的值。
has(element, key)： 检查 DOM 元素是否含有指定 key。
delete(element, key)： 删除 DOM 元素指定 key 的值。

这个 ElementData 类内部使用了 WeakMap 来存储数据，保证了当 DOM 元素被移除时，数据也会被自动回收。

为什么要用 `WeakMap` 而不是 `data-*` 属性？

你可能会想，既然要给 DOM 元素存储数据，为什么不用 HTML5 提供的 data-* 属性呢？

data-* 属性确实可以用来存储数据，但它有一些局限性：

只能存储字符串： data-* 属性的值只能是字符串，如果需要存储复杂的数据类型，需要进行序列化和反序列化。
容易被篡改： data-* 属性可以直接在 HTML 中修改，也容易被 JavaScript 代码篡改，安全性较低。
没有垃圾回收机制： data-* 属性是 DOM 元素的一部分，即使 DOM 元素被移除，属性值依然存在，可能会导致内存泄漏。

WeakMap 就没有这些问题。它可以存储任何类型的数据，数据是私有的，不容易被篡改，而且具有垃圾回收机制，可以避免内存泄漏。

特性	`data-*` 属性	`WeakMap`
数据类型	只能存储字符串	可以存储任何类型
安全性	容易被篡改	数据私有，不容易被篡改
垃圾回收	没有垃圾回收机制	具有垃圾回收机制，避免内存泄漏
使用场景	存储简单的、公开的数据	存储复杂的、私有的数据，需要避免内存泄漏的场景

注意事项

在使用 WeakMap 时，需要注意以下几点：

WeakMap 的键必须是对象： 如果你尝试用原始类型的值作为键，会抛出 TypeError 错误。
WeakMap 不可迭代： 你不能直接通过 for...of 循环来遍历 WeakMap。
WeakMap 的值会被垃圾回收： 如果值是一个对象，并且没有其他地方引用它，那么它也会被垃圾回收。

总结

WeakMap 是一个非常强大的工具，可以用来给 DOM 元素关联私有数据，并且避免内存泄漏。掌握了 WeakMap 的使用，可以让你写出更健壮、更高效的 JavaScript 代码。

希望今天的分享对大家有所帮助！下次再见！

JS `WeakMap` 的实际应用：DOM 元素私有数据关联，避免内存泄漏

啥是 `WeakMap` ？为啥需要它？

实战：用 `WeakMap` 给 DOM 元素加私有数据

进阶：封装一个更通用的 DOM 数据存储工具

为什么要用 `WeakMap` 而不是 `data-*` 属性？

更多的应用场景

注意事项

总结

发表回复取消回复

啥是 WeakMap ？为啥需要它？

实战：用 WeakMap 给 DOM 元素加私有数据

进阶：封装一个更通用的 DOM 数据存储工具

为什么要用 WeakMap 而不是 data-* 属性？

更多的应用场景

注意事项

总结

发表回复 取消回复

啥是 `WeakMap` ？为啥需要它？

实战：用 `WeakMap` 给 DOM 元素加私有数据

为什么要用 `WeakMap` 而不是 `data-*` 属性？

发表回复取消回复