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

每个模块都有自己的作用域。他们没有像“普通”脚本那样共享全局范围。这意味着hello仅可在main.js模块/文件本身内部访问。

如果您明确想创建全局变量，则可以通过在全局对象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模块中定义的函数

1 个答案: