import() 表达式

一、import(module)表达式加载模块并返回一个 promise，该 promise resolve 为一个包含其所有导出的模块对象。

我们可以在代码中的任意位置调用这个表达式。
我们可以在代码中的任意位置动态地使用它。 | 【示例】``javascript // say.js export function hi() { alert(Hello`); }

export function bye() { alert(Bye); }

export default function() { alert(“Module loaded (export default)!”); }

```javascript
// index.html
<!doctype html>
<script>
  async function load() {
    let say = await import('./say.js');
    say.hi(); // Hello!
    say.bye(); // Bye!
    say.default(); // Module loaded (export default)!
  }
</script>
<button onclick="load()">Click me</button>

结果：点击按钮”click me”，依次弹出Hello!， Bye!,Module loaded (export default)! | | —- |

| 【示例】我们使用document.querySelector()调用获取了对每个按钮的引用```javascript // in main.mjs let squareBtn = document.querySelector(‘.square’);

// 我们为每个按钮附加一个事件监听器，以便在按下时，相关模块被动态加载并用于绘制形状 squareBtn.addEventListener(‘click’, () => { import(‘/js-examples/modules/dynamic-module-imports/modules/square.mjs’).then((Module) => { let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, ‘blue’); square1.draw(); square1.reportArea(); square1.reportPerimeter(); }) }); ``` 1、由于promise履行会返回一个模块对象，因此该类成为对象的子特征，因此我们现在需要使用 Module访问构造函数。在它之前，例如 Module.Square( … )。 | | —- |

二、动态导入在常规脚本中工作时，它们不需要script type=”module”.
三、尽管import()看起来像一个函数调用，但它只是一种特殊语法，只是恰好使用了括号（类似于super()）。
因此，我们不能将import复制到一个变量中，或者对其使用call/apply。因为它不是一个函数。

😈 JavaScript大魔王

动态导入 / 动态加载模块

import() 表达式