ES6 中的 import() 和 export() 动态导入导出模块-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，JavaScript 也迎来了了许多新的特性，其中 ES6 中的 import() 和 export() 动态导入导出模块便是其中一个重要的特性。本文将带领大家详细了解其用法，并分享一些实际示例。

什么是 import() 和 export()

在 ES6 之前，我们通常使用 require() 和 module.exports 进行模块的导入和导出。而 ES6 中则推出了 import 和 export 语法，简化了模块的导入导出方式。

其中，import 主要用于从模块中导入绑定（变量、函数、类等），而 export 则用于从模块中导出绑定。

import() 的使用

import() 是一个函数，可以在代码运行时动态地进行导入。这种方式与静态导入不同，静态导入是在代码加载前就将模块加载完成并绑定，而动态导入则在代码执行时才进行。

基本语法

import(module)
  .then((module) => {
    // module 代表加载的模块
  });

其中 module 是一个字符串，表示需要加载的模块的路径。在执行完 import() 后，返回的是一个 Promise 对象，可以使用 then() 方法来获取模块中导出的对象。

示例

动态加载模块

// 定义模块
export const add = (a, b) => a + b;

// 导入模块
const math = await import('./math.js');

// 使用模块导出的对象
console.log(math.add(1, 2)); // 输出 3

动态加载具体的函数、类等

-- -------------------- ---- -------
-- ----
------ ----- --- -
  ----------------- ------ -
    --------- - -----
    ---------- - ------
  -

  ------ -
    ------------------ -- ---- -- ---------------
  -
-

------ -------- ------ -- -
  ------ - - --
-

-- ---------------
----- - --- - - ----- -----------------------
----- - --- - - ----- --------------------

-- ---------
----- ----- - --- ------------- ------- -----------
-------------
------------------ ---- -- -- -

export() 的使用

export() 允许我们动态地将模块中的绑定（函数、类等）导出，并且与静态导入不同，动态导出可以在代码执行后改变原来导出的对象。

基本语法

export {
  // 给导出对象命名
  <identifier> [as <name>],
  // 动态导出的对象
  ...
};

其中 identifier 代表需要导出的对象的名称，name 则代表导出对象的新名称。

示例

-- -------------------- ---- -------
-- ------
------ ------- ----- --- -
  ----------------- ------ -
    --------- - -----
    ---------- - ------
  -

  ------ -
    ------------------ -- ---- -- ---------------
  -
-

-- ------
------ -
  ----
  ---------
  ---------
  ------
- ---- ------------

最佳实践

ES6 中的 import() 和 export() 可以帮助我们动态地加载和导出模块，但是它们的使用也需要注意以下几点：

在 import() 之前必须有 await 或者 .then()，否则代码执行会出错。
import() 返回的是一个 Promise 对象，因此需要使用 then() 或者 async/await 语法来获取模块。
在模块导出之前，必须导出默认对象，否则动态导出会出错。

// 错误示范
export const add = (a, b) => a + b;

// 正确示范
export default {
  add: (a, b) => a + b
};

总结

ES6 中的 import() 和 export() 为前端开发者提供了更加灵活的动态导入导出模块的方式，可以满足更多的业务需求。但是在使用时需要遵守一定的规范，否则会造成一些不必要的错误。希望本文可以帮助大家更好地使用这两个语法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64ee20ccf6b2d6eab383d53e