通用弹窗组件需解耦结构、行为、样式，纯原生es6 class实现，支持自定义配置、回调及遮罩控制；核心含dom管理、状态标识、事件绑定与生命周期钩子；方法职责单一可覆盖，提供渲染、显隐、销毁及继承扩展接口。
弹窗类的核心设计思路
通用弹窗组件的关键是把“结构”“行为”“样式”解耦，同时保留足够灵活的扩展点。不依赖任何框架，纯原生 JavaScript 实现，用 ES6 Class 封装，支持自定义标题、内容、按钮、回调和遮罩层控制。
基础类结构与必需属性
一个可复用的弹窗类至少要管理 DOM 创建、显示/隐藏状态、事件绑定和生命周期钩子。以下是精简但完整的骨架：
关键属性说明：
- options：构造时传入的配置对象，含 title、content、confirmText、cancelText、showMask 等
- el：弹窗根元素（div.modal），由类内部动态创建
- isShown：布尔值，标识当前是否已打开
- onConfirm / onCancel / onClose：用户可选传入的回调函数
核心方法实现要点
重点不是堆功能，而是让每个方法职责单一、可覆盖、易测试：
- render()：生成完整 HTML 结构（含遮罩层、弹窗容器、头部、主体、底部按钮），用 innerHTML 或 document.createElement 拼接，避免 innerHTML 注入风险（对 content 做简单文本转义）
- show()：插入 DOM、添加 class 触发动画、绑定 esc 键和点击遮罩关闭逻辑、设置 isShown = true
- hide()：移除 class、延时 removeChild（配合 CSS 动画）、重置 isShown、触发 onClose 回调
- destroy()：彻底清理 DOM 和事件监听器，防止内存泄漏（尤其注意 window.addEventListener 的对应 remove）
支持继承与定制的开放接口
真正“通用”的弹窗必须允许子类或使用者安全地干预流程：
- 把 createHeader() / createBody() / createFooter() 设为实例方法，子类可重写以替换结构
- 暴露 beforeShow() / afterHide() 钩子，方便注入加载逻辑或埋点
- 按钮事件默认调用 this.confirm() / this.cancel()，这两个方法设为可被重写——比如子类中实现表单校验再关闭
- 支持传入 className 或 customStyle 直接透传到根元素，便于主题定制
这样设计后，一个提示弹窗、一个表单弹窗、一个图片预览弹窗，都可以基于同一个基类派生，代码复用率高，维护成本低。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
