09 ES6的模块化语法

ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，其中引入了许多新特性，包括模块化语法。ES6的模块化语法允许开发者将代码分割成独立的模块，每个模块可以包含变量、函数和其他资源，并且可以在不同的文件中进行导入和导出。

导出模块（Export）

在ES6中，可以使用export关键字来导出模块中的成员。有几种不同的导出方式：

1. 默认导出：每个模块只能有一个默认导出，使用default关键字。

   // math.js
   export default function add(x, y) {
     return x + y;
   }
   

2. 命名导出：可以导出多个命名成员，使用export关键字。

   // constants.js
   export const pi = 3.14;
   export const e = 2.71;
   

3. 重命名导出：在导出时可以给变量或函数重命名。

   // utils.js
   export { pi as PI, e as E };
   

4. 批量导出：可以使用*来批量导出所有成员。

   // all.js
   export * from 'constants';
   

导入模块（Import）

使用import关键字来导入模块的成员。同样有几种不同的导入方式：

1. 默认导入：导入模块的默认成员。

   // main.js
   import add from './math';
   console.log(add(1, 2)); // 输出 3
   

2. 命名导入：导入模块的命名成员。

   // main.js
   import { PI, E } from './constants';
   console.log(PI, E); // 输出 3.14, 2.71
   

3. 重命名导入：在导入时可以给变量或函数重命名。

   // main.js
   import { PI as Pi, E as E } from './constants';
   console.log(Pi, E); // 输出 3.14, 2.71
   

4. 批量导入：可以使用* as语法来批量导入所有成员，并给它们指定一个对象。

   // main.js
   import * as Utils from './utils';
   console.log(Utils.pi, Utils.e); // 输出 3.14, 2.71
   

5. 导入模块的默认成员：即使模块有命名导出，也可以导入其默认成员。

   // main.js
   import add from './math';
   

注意事项

• 模块文件通常使用.js扩展名。
• 模块路径可以是相对路径或绝对路径，也可以是npm包名。
• 使用import和export时，模块必须在文件的顶层声明，不能在函数或代码块内部。
• 模块加载是惰性的，只有在实际使用时才会加载。

ES6的模块化语法使得JavaScript代码更加模块化和可维护，是现代JavaScript开发中不可或缺的一部分。

原文地址：https://blog.csdn.net/gt8011/article/details/140599764

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！