javascript - 关于导入js模块和函数作用域(local/global)的问题

Question

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

下面是我正在工作的 html/js 文件。

enter image description here

下面是我的 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 函数，您必须执行以下操作:

main.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 文件中的窗口显式使它们可用(也如上所示)。模块在浏览器中的工作方式有点令人困惑!