在 html 中直接使用 ES6 模块中定义的函数

Question

我正在尝试完成一件非常简单的事情：我在 javascript 模块文件中有一些代码，然后将其导入另一个 javascript 文件（不导出任何内容），然后我想直接从 HTML 调用该文件中的一些已定义函数。

让我们举一些发生在我身上的具有代表性的最小示例（实际测试了代码并给出了我在真实问题中遇到的完全相同的问题，实际上并不比这个问题复杂多少）：

module.js:

const mod = () => 'Hello there!';
export { mod };

main.js:

import { mod } from './module.js';

function hello()
{
    console.log(mod());
}

main.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="module" src="module.js"></script>
        <script type="module" src="main.js"></script>
    </head>

    <body>
        <button name="next-button" onclick="hello()">Obi-Wan abandons the high ground to salute you</button>
    </body>
</html>

没有 import（并将所有函数定义放在一个 .js 文件中）我可以直接从 HTML 调用函数。但是，一旦我引入了模块，我就不能再这样做了：它只是说 "hello()" 函数未定义。

我是 ES6 模块的新手（实际上是前端 javascript），所以我完全知道我刚才所说的只是缺乏知识（或理解），但我将不胜感激关于我做错了什么以及如何解决它的任何评论，这样我就可以将我的代码放在不同的文件中并能够使用它。提前谢谢大家！

Answer 1

每个模块都有自己的范围。他们不像 "normal" 脚本那样共享全局范围。这意味着 hello 只能在 main.js module/file 本身内部访问。

如果你明确想要创建一个全局变量，你可以通过在全局对象上创建一个属性来实现，window:

function hello()
{
    console.log(mod());
}
window.hello = hello;

另见 Define global variable in a JavaScript function

话虽如此，但最好避免使用全局变量。相反，您可以重组 HTML 以在创建按钮后加载模块，并通过 JavaScript:

绑定事件处理程序

<!DOCTYPE html>
<html>
    <body>
        <button name="next-button">Obi-Wan abandons the high ground to salute you</button>
        <script type="module" src="module.js"></script>
        <script type="module" src="main.js"></script>
    </body>
</html>

和

import { mod } from './module.js';

function hello()
{
    console.log(mod());
}
document.querySelector('button').addEventListener('click', hello);

在 html 中直接使用 ES6 模块中定义的函数

Use functions defined in ES6 module directly in html

html

javascript

es6-modules