深入了解动态导入

我们在前面的章节中提到的导出和导入语句被称为“静态”。语法非常简单和严格。

首先，我们不能动态地生成import的任何参数。

模块路径必须是原语字符串，不能是函数调用。这不会工作:

import ... from getModuleName(); // Error, only from "string" is allowed

其次，不能有条件地或在运行时导入:

if(...) {
  import ...; // Error, not allowed!
}

{
  import ...; // Error, we can't put import in any block
}

这是因为import/export的目的是为代码结构提供一个主干。这是一件好事，因为代码结构可以被分析，模块可以被收集并通过特殊工具绑定到一个文件中，未使用的导出可以被删除(“树状震荡”)。这是可能的，因为进口/出口的结构简单和固定。

但我们如何动态地、按需地导入模块呢?

import() 表达式

import(module)表达式加载模块并返回一个promise，该promise解析为一个包含其所有导出的module对象。可以从代码中的任何地方调用它。

我们可以在代码的任何地方动态地使用它，例如:

let modulePath = prompt("Which module to load?");

import(modulePath)
  .then(obj => <module object>)
  .catch(err => <loading error, e.g. if no such module>)

或者，如果在异步函数中，也可以使用let module = await import(modulePath)。

例如，如果我们有以下模块say.js:

// ? say.js
export function hi() {
  alert(`Hello`);
}

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

那么动态导入可以像这样:

let {hi, bye} = await import('./say.js');

hi();
bye();

或者，如果say.js有默认的导出:

// ? say.js
export default function() {
  alert("Module loaded (export default)!");
}

然后，为了访问它，我们可以使用模块对象的default属性:

let obj = await import('./say.js');
let say = obj.default;
// or, in one line: let {default: say} = await import('./say.js');

say();

下面是完整的例子:

say.js

export function hi() {
  alert(`Hello`);
}

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

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

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>

注意

动态导入可以在常规脚本中工作，它们不需要script type="module"。

尽管import()看起来像一个函数调用，但它是一种特殊的语法，只是碰巧使用了圆括号(类似于`super()``)。

因此，我们不能将import复制到一个变量，也不能使用call/apply。它不是一个函数。

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。