有关导入js模块和功能范围（本地/全局）的问题

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文件内的窗口来显式地使其可用（也如上所示）。模块在浏览器中的工作方式有点混乱！