如何使用ECMAScript模块化代码

ECMAScript（ES）模块化代码是一种将代码分割成独立、可重用的模块的方法。这有助于提高代码的可维护性和可读性。要在ECMAScript中使用模块化代码，您需要遵循以下步骤：

1. 使用import和export语句

   在ES6中，引入了import和export关键字，用于在模块之间导入和导出功能、对象或值。

2. 创建模块文件

   创建一个包含要导出功能、对象或值的JavaScript文件。例如，创建一个名为math.js的模块文件：

   // math.js
   function sum(a, b) {
     return a + b;
   }
   
   function multiply(a, b) {
     return a * b;
   }
   
   export { sum, multiply };
   

   在这个例子中，我们创建了两个函数sum和multiply，并使用export关键字将它们导出。

3. 导入模块

   要在其他JavaScript文件中使用模块中的功能，您需要使用import语句导入它们。例如，在名为app.js的文件中导入math.js模块：

   // app.js
   import { sum, multiply } from './math.js';
   
   const result1 = sum(2, 3);
   const result2 = multiply(2, 3);
   
   console.log('Sum:', result1); // 输出 "Sum: 5"
   console.log('Multiply:', result2); // 输出 "Multiply: 6"
   

   在这个例子中，我们使用import语句从math.js模块中导入sum和multiply函数，并在app.js文件中使用它们。

4. 使用默认导出

   您还可以使用默认导出功能。每个模块可以有一个默认导出。例如，修改math.js文件以包含一个默认导出：

   // math.js
   function sum(a, b) {
     return a + b;
   }
   
   export default sum;
   

   然后，在app.js文件中导入默认导出的sum函数：

   // app.js
   import sum from './math.js';
   
   const result = sum(2, 3);
   
   console.log('Sum:', result); // 输出 "Sum: 5"
   

5. 注意事项

   • 确保使用支持ES模块的浏览器或运行时环境。
   • 在HTML文件中，将<script>标签的type属性设置为module，以便浏览器可以识别和处理ES模块。

   <script type="module" src="app.js"></script>
   

遵循这些步骤，您可以在ECMAScript中使用模块化代码，从而提高代码的可维护性和可读性。