本文详解如何在 HTML 中安全导入和使用 ES 模块导出的函数，解决 ReferenceError: xxx is not defined 问题，强调模块作用域隔离特性，并提供无需挂载到 window 的现代、可维护的事件绑定方案。
本文详解如何在 html 中安全导入和使用 es 模块导出的函数，解决 `referenceerror: xxx is not defined` 问题，强调模块作用域隔离特性，并提供无需挂载到 `window` 的现代、可维护的事件绑定方案。
JavaScript 模块（ES Modules）默认运行在严格的作用域中：所有声明（包括 export 的函数）仅在模块内部可见，不会自动暴露给全局作用域或 HTML 内联事件处理器（如 onclick）。因此，直接在 <button onclick="greet('John')"> 中调用模块导出的 greet 函数必然失败——这不是语法错误，而是模块设计的有意约束，旨在提升代码封装性与可维护性。
✅ 正确做法是将 DOM 交互逻辑完全移入模块内部，通过标准 DOM API 绑定事件，而非依赖内联 JavaScript。以下是推荐的三步实践：
1. 保持模块纯净导出
module.js 专注功能封装，不污染全局：
// module.js
export function greet(name) {
console.log("Hello, " + name + "!");
}2. 在 HTML 中延迟加载模块，并确保 DOM 就绪
将 <script type="module"> 放置在 <body> 底部（或使用 defer），确保按钮元素已解析完成：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <title>ES Module Integration</title> </head> <body> <button id="greetBtn" data-name="John">Click to Greet</button> <!-- 模块脚本置于 body 底部，保证 DOM 可访问 --> <script src="./module.js" type="module"></script> </body> </html>
3. 在模块中完成事件绑定与函数调用
module.js 主动获取元素、监听事件并调用导出函数：
// module.js
export function greet(name) {
console.log("Hello, " + name + "!");
}
// 模块主逻辑：DOM 操作与事件绑定
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('greetBtn');
if (btn) {
btn.addEventListener('click', () => {
const name = btn.dataset.name || 'Guest';
greet(name); // ✅ 安全调用模块内函数
});
}
});⚠️ 关键注意事项
- ❌ 禁止使用内联事件处理器（如 onclick）调用模块函数——它们运行在全局作用域，无法访问模块私有变量；
- ✅ 推荐 addEventListener + DOMContentLoaded 或将脚本置于 </body> 前，避免 getElementById 返回 null；
- ? 若需复用多个按钮，可改用 document.querySelectorAll('[data-name]') 批量绑定；
- ? type="module" 脚本天然支持 await import() 动态导入，适合按需加载逻辑。
此方案完全规避了 window.greet = greet 的全局污染风险，符合现代前端工程最佳实践：关注点分离（HTML 结构、CSS 样式、JS 行为解耦）、作用域安全、可测试性强。模块即能力单元，DOM 即交互入口——二者通过显式、可控的方式桥接，才是可持续的集成之道。
