意外的令牌“导出”

Question

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

export let k = 12;

或者

export { k }; let k = 12;

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

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

然后它显示意外的令牌'export'。下面的一个也给出了同样的错误

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

我在这里做错了什么？

Answer 1

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

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

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

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

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

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

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 => {
    // ...
});

或者在支持top-level await的环境中，如果没有k，导入模块不能做任何有用的事情，他们可以这样做：

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