在使用 ES 模块（type="module"）时，函数默认处于模块私有作用域，无法被 HTML 内联事件（如 onclick）直接访问；需显式挂载到 window 对象才能全局调用。
在使用 es 模块（`type="module"`）时，函数默认处于模块私有作用域，无法被 html 内联事件（如 `onclick`）直接访问；需显式挂载到 `window` 对象才能全局调用。
当你将 <script type="module"></script> 应用于 file2.js，整个文件会以模块方式执行：所有 const、function、let 声明都仅限于该模块作用域，不会自动暴露到全局 window 对象。因此，HTML 中的 onclick="call_this_function()" 会在全局环境中查找该函数，而它并不存在——导致 ReferenceError。
✅ 正确做法是：在 file2.js 末尾，将需要被 HTML 调用的函数显式挂载到 window：
// file2.js
import { addNumbers } from './file1.js';
const result = addNumbers(5, 3);
console.log('Imported function result', result); // 输出: 8
function call_this_function() {
console.log("function called");
}
// ✅ 关键修复：暴露函数至全局作用域
window.call_this_function = call_this_function;
// 可选：也可批量挂载，便于维护
// window.app = {
// call_this_function,
// // otherExposedFn: someFn
// };
同时，请注意 HTML 中脚本加载顺序与类型一致性：
<!-- index.html --> <button onclick="call_this_function()">Test Button</button> <!-- ✅ 必须使用 type="module" 加载模块文件 --> <script type="module" src="file2.js"></script><!-- file1.js 不需单独引入，已被 file2.js import 自动加载 -->
⚠️ 重要注意事项：
- 不要重复引入
file1.js为<script type="module"></script>—— 它会被file2.js的import自动解析和执行； - 避免滥用
window.xxx = ...：仅对真正需要 HTML 交互的入口函数做挂载，保持模块封装性； - 更现代的替代方案（推荐长期采用）：移除内联事件，改用
addEventListener在模块内绑定 DOM 事件：
// file2.js（推荐写法）
import { addNumbers } from './file1.js';
function call_this_function() {
console.log("function called");
}
// ✅ 解耦 HTML 与 JS：在模块内监听事件
document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('button');
if (btn) btn.addEventListener('click', call_this_function);
});
这样既避免污染全局命名空间，又符合模块化开发最佳实践，也更利于调试与测试。总结：ES 模块天然隔离作用域，window 挂载是快速修复手段，而基于 DOMContentLoaded + addEventListener 才是结构清晰、可维护性强的标准解法。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
