必须强约束配对addEventListener和removeEventListener，因其不配对是前端内存泄漏最高频、最隐蔽的根源，会导致闭包中this、state等无法回收，需用ESLint插件+CI卡点+AST自动修复三道防线管控。
为什么必须强约束配对
addeventlistener 和 removeeventlistener 不配对，是前端内存泄漏最高频、最隐蔽的根源之一。组件卸载后监听器仍挂在 window、document 或长期存活 dom 节点上，会持续持有闭包中的 this、state、props、大数组、canvas 上下文等，导致整块实例无法被垃圾回收。chrome devtools 中 performance.memory.usedjsheapsize 持续爬升、堆快照里反复出现重复的 handler 闭包，基本就是它在作祟。
ESLint 插件级规则配置
纯靠人工 review 几乎不可控，需用可执行、可拦截、可审计的机器规则。推荐组合使用以下两个社区成熟插件：
-
@typescript-eslint/no-misused-add-event-listener：检测 handler 是箭头函数、内联匿名函数、或未保存引用的绑定函数（如
el.addEventListener('click', this.handleClick.bind(this))），直接报错 - eslint-plugin-unicorn/prefer-add-event-listener：强制要求所有事件注册必须显式声明清理逻辑，支持自动修复为带 cleanup 的 useEffect / onUnmount 模式
在 .eslintrc.js 中启用：
rules: {
'@typescript-eslint/no-misused-add-event-listener': 'error',
'unicorn/prefer-add-event-listener': ['error', {
'ignore': ['once'],
'include': ['addEventListener', 'on', 'addListener']
}]
}团队落地三道防线
第一道：提交前本地拦截
在 husky pre-commit 钩子里运行 eslint --ext .ts,.tsx src/ --fix，失败则禁止 commit。搭配 lint-staged 只检查改动文件，不拖慢流程。
第二道：CI 卡点
GitHub Actions / GitLab CI 中增加 eslint step，任一违规即 fail，PR 不可合并。同时开启 --report-unused-disable-directives，清理历史 // eslint-disable 注释。
第三道：自动注入清理模板
用 AST 工具（如 jscodeshift）批量改造存量代码：把 window.addEventListener('resize', ...) 自动包裹进 useEffect(() => { ... return () => remove... }, [])（React）或 onMounted(() => { ... }); onUnmounted(() => { ... })（Vue）。一次跑完，全量收敛。
例外场景白名单管理
不是所有监听都要手动解绑。允许白名单绕过规则，但必须显式声明理由：
-
{ once: true }：浏览器原生保障只触发一次，无需 remove - 全局单例生命周期长于应用（如 SDK 初始化时绑定的
window.onerror）：需在注释中标明// eslint-disable-next-line @typescript-eslint/no-misused-add-event-listener -- global error handler, lives as long as app - 第三方库内部管理（如 Chart.js、MapLibre）：限定调用路径，例如只允许
chart.on(...)，禁用直接操作 DOM 的addEventListener
白名单本身纳入 ESLint 配置统一维护，禁止硬编码绕过。
