如何动态导入全局类构造函数？

Question

如此处（或此处）所示，我们可以在许多浏览器和 NodeJs 中使用外部类定义...但是加载外部类的最有用的方法是

import('./MyClass.js').then(({default: MyClass}) => {
   let x = new MyClass(); // using here!
   // ... but it is not global, is AN ISLAND IN A BLOCK
 }); // async loading 

...但它不是全局的，是异步块中的一个孤岛。那么，如何在全球范围内做到这一点呢？

测试全局替代方案和错误：

 const MyClass = () => import('/MyClass.js'); // ok, but...
 let x = new MyClass()
 // Uncaught TypeError: MyClass is not a constructor

 const MyClass = await import('/MyClass.js');  
 // Uncaught SyntaxError: await is only valid in async function

此处建议使用该module = await import(moduleFile)表格。

---

对于“全局类”，假设有一个 MyClass.js如下所示的外部 Javascript 文件：

export default class MyClass {
  constructor(x) {
    this.val=x? x: "Hello!"
    console.log("MyClass ok...")
  }
}

Answer 1

通常，当您使用模块时，您不想在全局范围内执行操作。这是模块要点的一部分。

如果您要动态导入，那么根据您所做的事情的本质，它将是一个异步过程，这意味着有代码等待它完成（例如，处理程序then或await在async函数中使用）。

您可以then在处理程序中（或await在函数之后）写入全局变量async，但这通常是一个坏主意，因为在一段时间内全局变量还没有值。

// **NOT** RECOMMENDED
import("/MyClass.js")
.then(cls => {
    window.MyClass = cls; // Or `global.MyClass = cls;` on Node.js
})
.catch(error => {
    // Handle error
});

或者到模块全局：

// **NOT** RECOMMENDED
let MyClass;
import("/MyClass.js")
.then(ns => {
    MyClass = ns.default;
})
.catch(error => {
    // Handle error
});

（请注意，您从动态收到的import是模块名称空间对象。在您的情况下，您使用的是默认导出，可以通过defaultMNO 上的属性访问该导出。）

不过，在这两种情况下，代码可能会在填充之前尝试使用它。更多：如何从异步调用返回响应？

相反，基本上，将需要该类的所有代码放在then处理程序中，或者async放在await. 实例

(async () => {
    const {default: MyClass} = await import("./MyClass.js");
    let c = new MyClass();
    // ...
})()
.catch(error => {
    // Handle/report error
    console.error(error);
});

MyClass（请注意MNO 上默认值的解构。）

另请参阅：如何在顶层使用 async/await？