意外的令牌“导出”

Question

我正在尝试将变量从 index.js 导出到 profile.js。 当我在文件顶部导出时，例如

export let k = 12;

或者

export { k }; let k = 12;

它工作得很好。 但是，当我在 DOMContentLoaded 事件之后导出时，例如

document.addEventListener('DOMContentLoaded', function(){ export let k = 12; })

然后它显示Unexpected token 'export' 。 下面的一个也给出了同样的错误

if (true){ export let k = 2; }

我在这里做错了什么？

Answer 1

我应该怎么做才能在 DOMContentLoaded 之后导出变量

你不能。 export和import只能出现在模块的顶层。

您可以做的是导出变量，并在处理程序中设置其值：

export let k;
document.addEventListener('DOMContentLoaded', function(){ k = 12; })

如果其他模块导入k ，它们将获得一个只读绑定，这意味着如果它们在DOMContentLoaded之前使用它，它们将获得您提供的任何初始值（上面的undefined ，因为let k;声明中没有初始化器)，但如果他们在DOMContentLoaded之后使用它，他们将看到处理程序分配的值。

也就是说，如果您的模块提供的信息仅在某个时间点之后可用，您可以考虑导出 promise，如下所示：

let kPromiseResolve;
export const kPromise = new Promise(resolve => {
    kPromiseResolve = resolve;
});
document.addEventListener('DOMContentLoaded', function(){ kPromiseResolve(12); })

然后使用它的模块会做：

import { kPromise } from "./your-module.js";
kPromise
.then(k => {
    //  ...use `k`...
})
.catch(error => {
    // ...
});

或者在支持顶级await的环境中，如果导入模块在没有k的情况下无法做任何有用的事情，他们可以这样做：

import { kPromise } from "./your-module.js";
const k = await kPromise;
// ...use `k`...