在前端开发中，模块化是一个非常重要的概念。以前在 JavaScript 中，我们通常使用 RequireJS 或者类似的第三方库来实现异步加载模块的方式，但是现在，ES6 已经在标准中加入了模块化的支持，这让我们有了更加灵活和可靠的方法来进行模块化设计，而且不需要依赖第三方库。
本文将介绍如何在不依赖第三方库的情况下，使用 ES6 模块化实现异步加载。我们将从以下几方面来阐述如何实现异步加载：
- 异步加载模块的需求分析
- ES6 模块化异步加载的实现
- 示例代码演示
1. 异步加载模块的需求分析
在前端开发中，我们需要在不同场景下异步加载不同的模块。比如，在某些情况下，我们需要加载一个支持可视化交互的图表模块，而在另一些情况下，我们需要加载一个支持表单验证的模块。由于这些模块可能会很大，所以一次性把所有的模块加载进来显然不是最好的选择。
所以，我们需要实现一个能够按需异步加载模块的方法。这个方法需要具备以下的特点：
- 能够根据需要异步加载模块
- 能够防止模块的重复加载
- 能够支持按需加载模块
- 能够支持多个模块同时加载
有了这些需求之后，我们就可以开始实现异步加载模块的方法了。
2. ES6 模块化异步加载的实现
ES6 模块化提供了两种异步加载模块的方法：
- 动态
import()方法 System.import()方法
这里，我们主要介绍第一种方法：动态 import()。
动态 import() 方法是 ES6 新增的语法，它可以动态地加载一个模块，并返回一个 Promise 对象。这个语法的形式如下：
import('module-name')
.then((module) => {
// do something with module
})这种方式可以很好地实现异步加载，但是它仍然存在一个问题，即：它只能在 mdn 中使用，而不能直接在浏览器中使用，因为浏览器还没有完全支持这个方法。所以，我们需要一些额外的方法来实现异步加载模块。
在这里，我们可以使用回调的方式来实现异步加载模块。下面是一个简单的示例：
-- -------------------- ---- -------
--------- -------- -
--- --------- - --- ------------ ---
---- ---------- --
-------- ---------- ---------- --------- -
-- --------------------- - --------------
------------------------------
- ---- - ---------
---------------- - -------- - ------
-------------- -- ----------------
---------- -- -
--- ------ - --------- ----
--- ------- - --- ------------------ ---------- ------
--------------- ----------------
------------------- - ---------------
-------------------------
---
-
-
---------- - ------------ ------------
-----------这段代码中，我们定义了 loadModule 方法。它的作用是根据 moduleId 参数加载模块，并在加载完成后执行回调函数。
首先，它会检查 moduleMap 中是否已经有了指定 moduleId 的模块。如果有，它会直接使用已经加载好的模块对象执行回调函数。
如果没有加载过，它会通过 fetch 方法请求指定 moduleId 的模块代码。请求成功后，它会使用 new Function() 构造函数动态生成一个函数对象，再使用这个函数对象来运行模块代码，最终将模块的 exports 对象保存到 moduleMap 中，并执行回调函数。这样，我们就实现了一个简单的按需异步加载模块的方法。
3. 示例代码演示
下面是一个使用上面介绍的 loadModule 方法实现按需异步加载模块的示例：
-- -------------------- ---- -------
------------------------- -------- -------- -
--------------------------
---
------------------------- -------- -------- -
--------------------------
---
------------------- -- -
------------------------- -------- -------- -
--------------------------
---
-- ------这里我们在调用 loadModule 方法时传入了需要加载的模块 ID 和一个回调函数，在回调函数中使用加载好的模块对象执行一些操作。
我们可以看到，这里调用了两次 loadModule('moduleA') 方法，第一次加载完成后，我们使用 setTimeout 设置了一个定时器延迟了 5 秒，再次请求加载 moduleA 模块。由于第二次请求时已经加载过了，所以会直接使用之前已经保存在 moduleMap 中的模块对象，避免了重复加载。这样就实现了我们的异步加载模块需求。
总结
在以往，我们通常使用 RequireJS 或者类似的第三方库来实现异步加载模块的方式，但是现在，ES6 模块化提供了内置的动态加载模块的支持。本文中我们介绍了如何使用 ES6 动态 import() 方法实现按需异步加载模块的方法，还通过一个示例代码演示了如何使用这种方法来加载模块。
通过这种方式，我们可以很方便地实现模块的动态加载，避免了一次性加载过多的模块，从而提高了前端应用的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e260eadd4f0e0ff737688