在前端开发中，我们经常需要加载外部的 JavaScript 模块，以实现一些特定的功能。而在过去，我们通常使用 script 标签来实现这个目的，但是这种方式存在一些问题，比如不能很好地处理依赖关系、不能很好地控制加载顺序等等。随着 ECMAScript 的不断更新，我们现在可以使用 import() 动态加载 JavaScript 模块，这种方式可以很好地解决上述问题，并且具有更好的灵活性和可控性。
动态加载 JavaScript 模块的优势
使用 import() 动态加载 JavaScript 模块，有以下几个优点：
更好地处理依赖关系：使用
import()可以很好地处理模块之间的依赖关系，它可以自动加载所需要的依赖模块，同时保证加载顺序的正确性。更好地控制加载顺序：使用
import()可以很好地控制模块的加载顺序，我们可以根据需要动态加载模块，而不是一次性全部加载。更好的灵活性：使用
import()可以根据需要动态加载不同的模块，这种方式比传统的script标签更加灵活。
使用 import() 动态加载 JavaScript 模块
使用 import() 动态加载 JavaScript 模块非常简单，我们只需要调用 import() 函数，并传入模块的路径即可。例如，下面的代码可以动态加载一个名为 module.js 的模块：
import('./module.js')
.then(module => {
// 在这里可以使用 module 中导出的内容
})
.catch(error => {
// 加载模块失败，处理错误
});在上面的代码中，我们首先调用 import() 函数，传入模块的路径 './module.js'。import() 函数返回一个 Promise 对象，我们可以使用 then 方法来处理加载成功后的回调函数，或者使用 catch 方法来处理加载失败后的回调函数。在 then 方法中，我们可以使用 module 参数来访问模块中导出的内容。
需要注意的是，由于 import() 函数是异步加载模块的，所以我们不能在 import() 函数之后立即使用模块中导出的内容，而是需要在 then 方法中处理。如果我们需要在多个地方使用同一个模块中的内容，我们可以在 then 方法中将其存储到全局变量中，以便后续使用。
示例代码
下面是一个简单的示例代码，它演示了如何使用 import() 动态加载一个模块，并在加载完成后使用模块中导出的内容：
-- -------------------- ---- -------
-- ---- ---------
------ -------- ------- -
------------------- ---------
-
-- -----------
---------------------
------------ -- -
-- ---------- -----
---------------
--
------------ -- -
---------------------
---在上面的代码中，我们首先定义了一个名为 module.js 的模块，它导出了一个名为 hello 的函数。然后在主模块中使用 import() 动态加载这个模块，并在加载完成后调用模块中导出的函数 hello。
总结
使用 import() 动态加载 JavaScript 模块是一种更加灵活、可控、易于维护的方式。它可以很好地处理模块之间的依赖关系，控制模块的加载顺序，同时具有更好的灵活性和可控性。在实际开发中，我们可以根据需要灵活使用 import() 函数，以实现更加优雅、高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6614e87bd10417a22252bb18