如何在HTML中调用从JavaScript模块导出的函数？

核心原因是JS模块拥有独立的作用域，你导出的test函数默认不会暴露到全局作用域中，所以HTML里的onclick="test()"找不到这个函数。下面是几种可行的解决方法：

方法一：手动挂载到全局作用域（快速但不推荐） #

在你的index.jsm文件里，把test函数挂载到window对象上，这样全局就能访问到它：

export function test() {
  // 这里写你的函数逻辑
}

// 将函数挂载到全局window对象
window.test = test;

之后HTML里的按钮onclick="test()"就能正常调用了。不过这种方式会污染全局作用域，大型项目里不建议使用。

方法二：在模块中绑定事件（推荐，符合规范） #

放弃HTML里的onclick属性，直接在JS模块中获取按钮元素，用addEventListener绑定点击事件，既不污染全局，也符合模块的作用域规则。

示例步骤： #

1. HTML中的按钮（给它加个ID方便获取）：

<button id="testButton">触发test函数</button>

2. 在index.jsm中绑定事件：

export function test() {
  console.log("test函数被调用了");
}

// 获取按钮元素并绑定点击事件
const testBtn = document.getElementById('testButton');
testBtn.addEventListener('click', test);

如果是在其他模块文件中使用，先导入test再绑定：

import { test } from './index.jsm';

const testBtn = document.getElementById('testButton');
testBtn.addEventListener('click', test);

总结 #

优先选择方法二，它遵循了ES模块的设计原则，避免全局变量污染，也更利于代码的维护和管理。

内容的提问来源于stack exchange，提问作者derdilla