Question

我有JS文件import.js（简体）：

let foo;

function fooBar () {

foo = bar;

}

window.onload = () => {
fooBar()
}

在我的html文件中，我有：

<script src=import.js type=module></script>

当我打开html文件时，在控制台上：

foo;
ReferenceError: foo is not defined

我知道这是由于仅在词法作用域的情况下才导入了模块-但是让导入的let /const变量作用于window / global的最佳方法是什么，以便我可以在窗口控制台上访问它？

Answer 1

因为您使用的是<script type="module">，所以可以使用import和export语法，并传输所需的内容，例如：

<script type="module">
  import obj from './import.js';
  // do stuff with obj.foo
</script>

在import.js导出的对象中，您为其分配了一个foo属性：

const exportObj = {};
function fooBar () {
  exportObj.foo = bar;
}
window.onload = () => {
  fooBar()
}
export default exportObj;

也就是说，由于它是 asynchoronusly 填充的，因此您可以考虑导出Promise：

<script type="module">
  import fooProm from './import.js';
  fooProm.then((foo) => {
    // do stuff with foo
  });
</script>

和

let foo;
function fooBar () {
  foo = bar;
}
export default new Promise((resolve) => {
  window.onload = () => {
    fooBar();
    resolve(foo);
  }
});

（尽管理想情况下，foo根本不会在较低的代码中重新分配）

Answer 2

删除type="module"即可。您没有导出任何内容，但是您将import.js视为导出模块的内容。就像使用其他脚本一样使用它即可：

<script src="import.js"></script>

允许全局范围让导入的Javascript文件中的变量

2 个答案: