关于导入js模块和函数作用域（本地/全局）的问题

Question

您好，我是 js 新手，我试图在导入 js 模块时了解本地/全局范围。

下面是我正在运行的 html/js 文件。

下面是我的 html/js 文件，它不起作用。

请告诉我为什么我必须放置 document.querySelector~~~ 以及为什么第二个不起作用..

Answer 1

你的 main.js 应该是：

import {make_black} from "/static/sub.js";

window.make_black = make_black;

当您使用脚本标签将外部脚本导入为模块时，模块代码会运行，但无论如何都无法访问导出。您必须将它们显式添加到窗口中，如上面的示例所示。然后您将能够在 html onclick 属性中访问 make_black 。

如果您想从模块中导出某些内容，例如：

main.js

import {make_black} from "/static/sub.js";

export let mb = make_black;

然后访问 main.html 中的 mb 函数，您必须执行以下操作：

主要.html

<script type="module">
    import {mb} from "/static/main.js";
    // now you can use mb here, which is a reference to your make_black function
    // inside sub.js
</script>

如果您只是将外部脚本作为模块导入，则无法在其范围内访问其变量。您必须将它们导入到带有 type="module" 的脚本标签内（如上所示），或者通过将它们分配给 js 文件内的窗口来明确使它们可用（也如上所示）。模块在浏览器中的工作方式有点令人困惑！