本文详解如何在 HTML 中通过原生 ES 模块导入 JavaScript 函数，避免因模块作用域导致的 ReferenceError: xxx is not defined 错误，并提供不污染全局命名空间的专业解决方案。

本文详解如何在 html 中通过原生 es 模块导入 javascript 函数，避免因模块作用域导致的 `referenceerror: xxx is not defined` 错误，并提供不污染全局命名空间的专业解决方案。

在现代前端开发中，使用 <script type="module"> 是组织和复用 JavaScript 逻辑的标准方式。但一个常见误区是：<strong>模块内导出的函数默认不会自动挂载到全局作用域（如 window），因此无法通过 HTML 内联事件处理器（如 onclick="greet('John')"）直接调用——这正是 ReferenceError: greet is not defined 的根本原因。</script>

模块脚本拥有独立的词法作用域，所有声明（包括 export 的函数）仅对其他模块可见，而 HTML 内联事件属于全局执行上下文，二者天然隔离。强行通过 window.greet = greet 暴露函数虽能“修复”错误，却违背模块化设计原则，带来命名冲突、内存泄漏与调试困难等隐患。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

✅ 正确做法是：将交互逻辑完全交由模块控制，实现 HTML 与 JS 的职责分离。以下是推荐的工程化实践：

1. 重构 HTML：移除内联 JS，用语义化属性传递数据

  <meta charset="UTF-8"><title>ES Module Integration</title><!-- 使用 data-* 属性解耦数据与行为 --><button id="greetBtn" data-name="John">Click to Greet</button>

  <!-- 模块脚本置于 body 底部，确保 DOM 已就绪 -->
  <script src="./module.js" type="module"></script>

⚠️ 注意：<script type="module"> 默认为 defer 行为，但仍建议置于 </script>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！