不能直接 export weakmap 实例实现自动回收，因其弱引用仅依赖键对象生命周期；应封装为模块级单例，导出 getstate、updateloading 等函数统一管理状态。
不能靠 export 直接“共享” WeakMap 本身来实现自动回收状态，因为 WeakMap 的弱引用特性只在**键对象的生命周期内有效**，而模块导出的是一个强引用的变量。真正可行的方式是：**把 WeakMap 封装为模块级单例，并通过统一的访问函数暴露操作接口**，让各模块通过这些函数读写状态，从而复用同一份弱引用逻辑。
为什么不能直接 export WeakMap 实例？
WeakMap 本身不是“自动回收状态”的载体，它只是提供了一种不阻止 GC 的键存储机制。如果你写：
```js// state.js
export const nodeState = new WeakMap();
```
其他模块 import 后拿到的是对这个 WeakMap 对象的强引用——这没问题；但问题在于：只要这个 WeakMap 还活着，它内部的条目是否被清理，**完全取决于键（比如 DOM 节点）是否被 GC 回收，而不是模块是否卸载或 import 是否失效**。也就是说，export 本身不赋予任何内存管理能力，它只是让多个模块能访问同一个 WeakMap。
正确封装方式：导出纯函数，隐藏 WeakMap 实现
把 WeakMap 定义在模块作用域内，不暴露给外部，只导出一组操作函数。这样既保证单例性，又避免使用者误操作（如直接 set 新对象覆盖旧状态）。
```js// state.js
const elementState = new WeakMap();
export function getState(el) {
if (!elementState.has(el)) {
elementState.set(el, { loading: false, data: null });
}
return elementState.get(el);
}
export function updateLoading(el, value) {
const state = getState(el);
state.loading = value;
}
export function clearState(el) {
elementState.delete(el);
}
```
其他模块只需导入函数使用：
```js// component.js
import { getState, updateLoading } from './state.js';
function render(el) {
const state = getState(el);
updateLoading(el, true);
}
```
配合模块生命周期的关键细节
- DOM 节点必须是 WeakMap 的键 —— 它天然是对象，且一旦从文档中移除且无其他强引用，就会被 GC，对应条目自动消失
- 不要在事件监听器、定时器、闭包中长期持有节点引用，否则节点无法被回收，WeakMap 条目也就不会清理
- 如果状态需要跨组件复用（比如多个组件操作同一个按钮），确保它们都传入**同一个 DOM 节点引用**，而不是各自 querySelector 一次再传参 —— NodeList 中的节点引用可能滞后于真实 DOM 状态
- 不建议把 WeakMap 导出后让其他模块自行 set/get，容易绕过初始化逻辑，导致 state 为 undefined 或结构不一致
进阶：支持非 DOM 键的通用状态管理
若想让 WeakMap 也用于普通对象（如配置项、表单实例等），可加一层校验和抽象：
```js// shared-state.js
const instanceState = new WeakMap();
export function bindState(target, initialState = {}) {
if (typeof target !== 'object' || target === null) {
throw new Error('WeakMap key must be an object');
}
if (!instanceState.has(target)) {
instanceState.set(target, { ...initialState });
}
return instanceState.get(target);
}
```
这样各模块调用 bindState(myForm) 就能安全获得专属状态，且 myForm 被销毁时，状态自动清理。
