至高建设集团 网站商城网站建设制作

在ES6中，我们可以使用 export 和 import 关键字来定义和使用自定义模块。

定义模块

导出（export）

1. 命名导出（Named Exports）：

   使用 export 关键字来导出模块中的变量、函数、类等。例如：

   // mathUtils.js
   export const sum = (a, b) => a + b;
   export const subtract = (a, b) => a - b;
   

   这里我们导出了 sum 和 subtract 函数。

2. 默认导出（Default Export）：

   使用 export default 关键字可以导出模块的默认值，一个模块只能有一个默认导出。例如：

   // utils.js
   const multiply = (a, b) => a * b;
   export default multiply;
   

   这里我们默认导出了 multiply 函数。

使用模块

导入（import）

使用 import 关键字来引入其他模块导出的内容。

1. 命名导入（Named Imports）：

   引入命名导出的变量、函数等。例如：

   // app.js
   import { sum, subtract } from './mathUtils';console.log(sum(5, 3)); // 输出 8
   console.log(subtract(5, 3)); // 输出 2
   

2. 默认导入（Default Imports）：

   引入默认导出的内容。例如：

   // app.js
   import multiply from './utils';console.log(multiply(5, 3)); // 输出 15
   

3. 混合导入（Mixing Named and Default Imports）：

   可以同时导入命名导出和默认导出。例如：

   // app.js
   import multiply, { sum } from './utils';console.log(sum(5, 3)); // 输出 8
   console.log(multiply(5, 3)); // 输出 15
   

注意事项

• export 和 import 必须在顶层作用域使用，不能嵌套在函数或条件语句中。
• 导入路径可以是相对路径或者绝对路径。
• 模块的导出和导入是静态的，意味着在编译阶段就确定了导入模块的内容。

使用ES6模块系统能够帮助我们更好地组织和管理JavaScript代码，提高代码的可维护性和可重用性。