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

Question

嗨，我是 js 新手，我正在尝试了解导入 js 模块时的 local/global 范围。

下面是我的 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;

当您使用脚本标签将外部脚本导入为模块时，模块代码为运行但无论如何都无法访问导出。您必须将它们显式添加到 window，如上例所示。然后您将能够在 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 文件内的 window 来明确使它们可用（也如上所示）。模块在浏览器中的工作方式有点令人困惑！

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

Question about importing js module and function scope(local/global)

javascript

scope

module