意外的令牌“導出”

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`...