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

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

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

模块=等待导入（moduleFile）

表单

---

对于“全局类”，假设一个外部Javascript文件

MyClass.js

，如下所示：

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

---

一般来说，在使用模块时，您不希望全局性地执行操作。这是模块要点的一部分

如果您是动态导入，那么根据您所做工作的性质，它将是一个异步过程，这意味着有等待它完成的代码（例如，一个

then

处理程序或在

async

函数中使用

wait

）

您可以在

then

处理程序中（或在

async

函数中的

await

之后）写入全局，但这通常是一个坏主意，因为会有一段时间全局没有值（尚未）

或到全局模块：

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

（请注意，您从动态

import

收到的是模块名称空间对象。在您的情况下，您使用的是默认导出，可以通过MNO上的

default

属性访问该导出。）

不过，在这两种情况下，代码可能会在填充之前尝试使用它。更多：

相反，基本上，将需要该类的所有代码放在

then

处理程序中，或者在

await

之后放在

async

函数中

（请注意从MNO上的默认设置中进行分解以获取

MyClass

。）

---

另请参见：

通常，在使用模块时，您不希望全局执行操作。这是模块要点的一部分

如果您是动态导入，那么根据您所做工作的性质，它将是一个异步过程，这意味着有等待它完成的代码（例如，一个

then

处理程序或在

async

函数中使用

wait

）

您可以在

then

处理程序中（或在

async

函数中的

await

之后）写入全局，但这通常是一个坏主意，因为会有一段时间全局没有值（尚未）

或到全局模块：

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

（请注意，您从动态

import

收到的是模块名称空间对象。在您的情况下，您使用的是默认导出，可以通过MNO上的

default

属性访问该导出。）

不过，在这两种情况下，代码可能会在填充之前尝试使用它。更多：

相反，基本上，将需要该类的所有代码放在

then

处理程序中，或者在

await

之后放在

async

函数中

（请注意从MNO上的默认设置中进行分解以获取

MyClass

。）

---

---

另请参见：

Global-Global或module-Global？Hi@T.J.Crowder，我需要使用类，

let x=new-MyClass（）

。。。而

MyClass

必须位于全局名称空间。这通常是一个步法，因为负载是异步的，所以代码可以在填充之前尝试使用它。你为什么大喊大叫？这就是我们许多人对所有大写字母的理解。@HereticMonkey，对不起，我将我的“复制/粘贴”从代码编辑为文本。全局全局，或模块全局？嗨@T.J.Crowder，我需要使用类，

let x=new MyClass（）

。。。而

MyClass

必须位于全局名称空间。这通常是一个步法，因为负载是异步的，所以代码可以在填充之前尝试使用它。你为什么大喊大叫？这就是我们很多人对所有大写字母的理解。@HereticMonkey，对不起，我把我的“复制/粘贴”从代码编辑成了文本。嗨，我正在尝试HTML。。。。上一个建议（你的

（async）

）中的错误“未捕获的语法错误：意外的标记{@PeterKrauss-抱歉，这是一个输入错误。第一行应该是

（async（）=>{

现在它是一个类型错误（Firefox和Chorme），最简单的形式

（async（）=>{console.log（1）}）也有同样的问题。catch（Error=>{console.log（2，Error）}）

@PeterKrauss-我忘了dynamic

import

提供了一个模块名称空间对象。请参阅最新的编辑（和）。@PeterKrauss-可能没有那么长，但是的，它仍然只是一个建议，尽管它处于高级阶段（的第3阶段），这意味着它在浏览器中得到了实现，但请记住浏览器只是得到了静态导入支持。同时，您可以使用诸如和之类的工具将东西捆绑在一起，处理导入和导出。您好，我正在尝试HTML…上一个建议中出现错误（您的

（async）

）“未捕获的语法错误：意外的标记{”@PeterKrauss-抱歉，这是一个输入错误。第一行应该是

（async（）=>{

现在它是一个TypeError（Firefox和Chorme），最简单的形式

（async（）=>{console.log（1）}）也有同样的问题。catch（error=>{console.log（2，error）}）

@PeterKrauss-我忘了dynamic

import

提供了一个模块名称空间对象。请参阅最新的编辑（和）。@PeterKrauss-可能没有那么长，但是的，它仍然只是一个建议，尽管它处于高级阶段（的第3阶段），这意味着它在浏览器中得到了实现，但请记住浏览器只是得到了静态导入支持。同时，您可以使用和之类的工具将内容捆绑在一起，处理导入和导出。

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