在使用 ES6 模块（type="module"）时，函数默认不挂载到全局作用域，导致 HTML 中 onclick 等内联事件无法访问；解决方法是显式将需调用的函数赋值给 window 对象，使其成为全局可访问变量。
在使用 es6 模块（`type="module"`）时，函数默认不挂载到全局作用域，导致 html 中 `onclick` 等内联事件无法访问；解决方法是显式将需调用的函数赋值给 `window` 对象，使其成为全局可访问变量。
ES6 模块具有严格的词法作用域隔离：即使你在 file2.js 中定义了 call_this_function()，只要该文件以 <script type="module"></script> 方式加载，其内部声明的所有变量、函数和类都仅在模块作用域内有效，不会自动暴露到全局 window 对象上。因此，HTML 中通过 onclick="call_this_function()" 这种内联方式调用时，浏览器会在全局作用域中查找该函数，自然抛出 ReferenceError。
✅ 正确做法是在 file2.js 末尾手动挂载函数到 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.myUtils = {
// call_this_function,
// addNumbers // 若需从 HTML 直接调用 addNumbers 也可一并暴露
// };同时，请注意 HTML 中的脚本引入顺序与类型必须匹配：
<!-- index.html --> <body> <button onclick="call_this_function()">Test Button</button> <!-- ✅ 两个 script 都需为 type="module"，且 file2.js 必须在 file1.js 之后加载（或确保依赖解析正确） --> <script type="module" src="./file1.js"></script> <script type="module" src="./file2.js"></script> </body>
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- ❌ 不要将
onclick逻辑写在模块外的普通<script></script>中（会因模块/非模块混用导致作用域断裂或 CORS 错误）； - ❌ 避免滥用
window.xxx = ...—— 仅暴露真正需要被 HTML 事件触发的函数，保持命名空间整洁； - ✅ 更现代、更推荐的做法是完全放弃内联事件，改用
addEventListener在模块内绑定事件（解耦更强、更安全）：
// file2.js（优化版）
import { addNumbers } from './file1.js';
function call_this_function() {
console.log("function called");
}
// ✅ 推荐：模块内完成 DOM 绑定，无需污染全局
document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('button');
if (btn) {
btn.addEventListener('click', call_this_function);
}
});对应 HTML 可简化为：
<button id="test-btn">Test Button</button> <script type="module" src="./file2.js"></script>
总结：ES6 模块的设计初衷就是避免全局污染，因此“让函数被 HTML 调用”的本质不是绕过模块机制，而是有意识地选择暴露接口（window.）或采用更规范的事件绑定模式（addEventListener）。后者更符合现代前端工程实践，兼顾可维护性与安全性。
