如何使用 type="module" 从另一个 javascript 文件调用函数 [重复]答案

【问题标题】：How do you call a function from another javascript file with the type="module" [duplicate]如何使用 type="module" 从另一个 javascript 文件调用函数 [重复]
【发布时间】：2020-07-08 20:00:37
【问题描述】：

如何通过 onclick 或普通 JavaScript 从模块 JavaScript 文件调用函数。

在下面的代码中，单击按钮会引发“exampleFunction is not defined”异常（使用最新的 FireFox 版本进行测试并希望与现代浏览器兼容）

exampleModule.js

export function exampleFunction(){
    alert('example Function');
}

examplePage.html

<html>
    <head>
        <script src="exampleModule.js" type="module"></script>
    </head>
    <body>
        <button onclick="exampleFunction();">button</button>
    </body>
</html>

【问题讨论】：

使用前需要将脚本导入文件。
这里只导入函数我们有同样的问题stackoverflow.com/questions/49338193/…
并且您需要将函数分配给全局对象 (window)，以便您可以使用属性中的 exampleFunction();。你也可以使用addEventListener()。
你会在这里找到答案 --> stackoverflow.com/questions/49338193/…

标签： javascript

【解决方案1】：

你可以在Module里面注册onclick Handler

var element = (get your element with any document.<> Method)
element.addEventListener("click" (e) =>{ /*Your Handler Function */})

【讨论】：

【解决方案2】：

尝试在全局上下文中使用这个函数，使用window

exampleModule.js

exampleFuction=function(){
    alert('example Function');
}
export exampleFunction // export as a module
window.exampleFunction = exampleFunction; // export to the global context

【讨论】：

仅对于像 onclick 这样的填充全局变量 Space 并且所有模块都加载异步的东西，所以它可能发生，当用户尝试单击时没有定义“exampleFunction”，所以会有一个错误