Question

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

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

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

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

 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)表格is suggested here。

对于“全局类”，假设外部Javascript文件MyClass.js如下：

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收到的是模块名称空间对象。在您的情况下，您使用的是默认导出，可通过MNO上的default属性访问此导出。）< / p>

尽管在这两种情况下，代码都可能在填充之前尝试使用它。更多：How do I return the response from an asynchronous call?

相反，基本上，将所有需要该类的代码放在then处理程序中，或放在async之后的await函数中。 Live Example

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

（请注意，要从MNO的默认设置中获取MyClass，以进行破坏。）

另请参阅：How can I use async/await at the top level?

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

1 个答案: