HTML原生alert/confirm/prompt无法传参或返回结构化数据，因规范强制转字符串且无回调机制；现代项目应改用元素或Promise封装的自定义弹窗方案。
HTML 原生 alert()、confirm()、prompt() 无法传参——它们只接受字符串，且不返回结构化数据。真要传参、取值、联动业务逻辑，必须绕开这些阻塞式弹框，用自定义方案。
为什么 alert() 不能传对象或回调？
浏览器规范强制把所有参数转成字符串：alert({a: 1}) 显示的是 [object Object]；alert(() => {}) 显示的是 function () { }。它没有返回值设计，更不支持传入处理函数。鸿蒙 ArkWeb 甚至明确要求应用层通过 onAlert 接口接管，说明原生能力已不可靠。
- 传非字符串值会隐式调用
.toString()，丢失原始结构 - 点击“确定”后无法知道用户操作上下文（比如来自哪个按钮、哪条数据行）
- 在 Vue/React 等框架中直接调用会破坏响应式链路，状态无法同步
用 <dialog></dialog> + showModal() 传参的正确姿势
现代方案是用语义化 <dialog></dialog> 元素，手动注入数据并触发显示。关键不是“怎么塞参数”，而是“怎么确保参数可访问且不被 GC 掉”。
- 不要在
showModal()前用innerHTML拼接含变量的 HTML 字符串——容易 XSS，且后续难更新 - 推荐用
dataset或临时属性挂载：dialog.dataset.userId = "123" - 如果弹框内容由 JS 动态生成，优先用
textContent或安全的textContent替代innerHTML - 调用
showModal()前必须确保元素已插入 DOM：document.body.appendChild(dialog) - 避免在
fetch回调里直接调用showModal()，加一层setTimeout(() => dialog.showModal(), 0)确保在用户手势上下文中
父子页面间传参别再用 showModalDialog()
这个 IE 时代 API 已被所有现代浏览器废弃，Chrome 从 93 版本起彻底移除，调用直接报 Uncaught ReferenceError: showModalDialog is not defined。替代方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 用
window.open()打开新窗口，通过opener引用父页对象传递数据（注意同源限制） - 用 URL 参数传简单值：
window.open("child.html?userId=123&mode=edit")，子页用new URLSearchParams(window.location.search)解析 - 复杂数据建议走 localStorage + 事件监听，或封装成 Promise 化的通信函数（如
openDialog({ title: "编辑", data: row })）
警告提示的数据驱动陷阱
很多团队用 Vue 的 v-if 或 React 的 useState 控制警告横幅显隐，但没做防抖或变化比对，导致预算字段每变动 0.01 元就销毁重建一次 DOM。真正该关注的是：
- 是否每次
setState都触发了真实 UI 更新？用Object.is或深比较拦截无意义变更 - 关闭后是否清除了定时器、事件监听、
IntersectionObserver实例？否则内存泄漏+焦点劫持 - 是否设置了
aria-live="polite"和role="alert"？否则屏幕阅读器读不到警告内容 - 消失动画结束后，是否真的从 DOM 移除了节点？还是只设了
display: none？后者仍会被无障碍工具扫描到
传参本身不难，难的是让参数在生命周期内始终可追溯、可审计、不干扰主流程。别在弹框里写业务逻辑，让它只做一件事：清晰传达 + 安全收口。
