闭包在事件委托中保存父级容器的计算数据，核心是利用函数作用域“捕获”外部变量（如容器尺寸、偏移量、子元素映射等），让事件处理函数在触发时仍能访问这些静态快照。
闭包在事件委托中保存父级容器的计算数据，核心是利用函数作用域“捕获”外部变量（如容器尺寸、偏移量、子元素映射等），让事件处理函数在触发时仍能访问这些静态快照。关键不是实时重算，而是委托前一次性计算并封闭。
提前计算并闭包封装容器信息
在绑定事件委托前，先获取并缓存父容器的布局数据，用闭包让回调函数记住这些值：
- 调用
getBoundingClientRect()获取容器位置和尺寸 - 遍历子元素，构建 ID → 索引 / 坐标等映射表
- 将这些数据作为外层函数参数或变量，返回内层事件处理函数
示例：
const container = document.getElementById('list');
// 一次性计算：容器视口位置 + 所有 item 的索引映射
const rect = container.getBoundingClientRect();
const itemMap = Array.from(container.children).reduce((map, el, i) => {
map[el.id] = i;
return map;
}, {});
<p>// 闭包捕获 rect 和 itemMap
container.addEventListener('click', function(e) {
if (e.target.matches('.item')) {
const targetRect = e.target.getBoundingClientRect();
// 使用闭包中的 rect 计算相对坐标
const relX = targetRect.left - rect.left;
const index = itemMap[e.target.id];
console.log(<code>点击第 ${index} 项，相对容器左偏移 ${relX}px</code>);
}
});用箭头函数自动继承外层作用域
箭头函数不绑定自己的 this 和作用域，天然适合闭包场景。把计算逻辑放在外层，事件回调用箭头函数引用即可：
立即学习“Java免费学习笔记（深入）”；
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 避免传统函数中
this指向问题 - 更简洁地复用闭包变量，无需额外 bind 或中间变量
示例：
const container = document.querySelector('.grid');
const gridInfo = {
cols: 4,
cellWidth: container.clientWidth / 4,
offsetX: container.offsetLeft
};
<p>container.addEventListener('mousemove', (e) => {
// 直接使用闭包中的 gridInfo
const col = Math.floor((e.clientX - gridInfo.offsetX) / gridInfo.cellWidth);
console.log(<code>鼠标位于第 ${col} 列</code>);
});避免闭包持有 DOM 引用导致内存泄漏
如果闭包中直接保存了大量 DOM 元素（如整个 children 列表），又未及时清理，可能阻碍垃圾回收。应只保存必要字段：
- 优先保存数值（
offsetTop、getBoundingClientRect()返回的对象）而非 DOM 节点本身 - 若需节点操作，改用事件目标
e.target动态查找，而非闭包里存一堆ref - 在容器销毁时，手动移除事件监听器，解除闭包对上下文的隐式引用
结合 dataset 或自定义属性减少运行时计算
对于可预知的静态数据（如每个子项的序号、分组 ID），建议在 HTML 中用 data- 属性声明，事件中直接读取，比闭包存对象更轻量且免维护：
- 渲染时写入：
<li data-index="5" data-category="news"> - 事件中用
e.target.dataset.index读取，无需闭包存储索引映射 - 闭包只保留真正动态但不变的数据（如容器滚动基准、缩放比例等）
不复杂但容易忽略：闭包保存的是“那一刻”的数据快照，适合布局固定或变化不频繁的场景；若容器尺寸频繁变动（如响应式重排），需配合 ResizeObserver 重新生成闭包或更新缓存。
