直接在HTML中使用ES6模块中定义的函数 [英] Use functions defined in ES6 module directly in html
问题描述
我正在尝试完成一个非常简单的事情：我在javascript模块文件上有一些代码，然后将其导入到另一个javascript文件中（不导出任何内容），并且我想在其中调用一些已定义的函数
I am trying to accomplish a pretty simple thing: I have some code on a javascript module file and I import it on another javascript file (that doesn't export anything) and I want to call some of the defined functions in that file from the HTML directly.
让我们来看一下发生的事情的一些代表和最小示例（实际上测试了代码，并给出了我遇到的完全相同的问题）。真正的对象，并没有比这复杂得多）：
Let's se some representative and minimal example of what's happening to me (actually tested the code and gives the exact same issue I'm experiencing with the real one, which is not really much more complex than this one):
-
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>
没有导入（并将所有函数定义放在单个 .js 文件中），我可以直接从HTML调用函数。但是，一旦介绍了这些模块，我将不再能够：它只是说未定义 hello（）函数。
Without the import (and putting all the function definitions on a single .js file) I can call the function directly from the HTML. However, once I have introduced the modules I am no longer able to: it simply says that the "hello()" function is not defined.
我是完全陌生的ES6模块（实际上是前端javascript），所以我完全知道我刚才所说的只是缺乏知识（或理解），但是对于我做错了什么以及如何解决它，我将不胜感激。我可以将代码保存在不同的文件中，并可以使用它。
I am completely new to ES6 modules (and to front-end javascript in fact), so I am fully aware all I just said is just lack of knowledge (or understanding), but I would appreciate any comment on what am I doing wrong and how to solve it so I can have my code in different files and be able to use it. Thank you all in advance!
推荐答案
每个模块都有自己的作用域。他们没有像普通脚本那样共享全局范围。这意味着 hello 仅可在 main.js 模块/文件本身内部访问。
Each module has its own scope. They are not sharing the global scope like "normal" scripts do. That means hello is only accessible inside the main.js module/file itself.
如果您明确要创建全局变量，则可以通过在全局对象 window ：
If you explicitly want to create a global variable, you can achieve that by creating a property on the global object, window:
function hello()
{
console.log(mod());
}
window.hello = hello;
话虽如此，避免全局变量是一种好习惯。相反，您可以在创建按钮后重新构造HTML以加载模块，并通过JavaScript绑定事件处理程序：
Having said that, it's good practice to avoid global variables. Instead you can restructure the HTML to load the modules after the button was created and bind the event handler via 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模块中定义的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
