09 ES6的模块化语法

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

导出模块(Export)

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

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

    javascript 复制代码
    // math.js
    export default function add(x, y) {
      return x + y;
    }
  2. 命名导出 :可以导出多个命名成员,使用export关键字。

    javascript 复制代码
    // constants.js
    export const pi = 3.14;
    export const e = 2.71;
  3. 重命名导出:在导出时可以给变量或函数重命名。

    javascript 复制代码
    // utils.js
    export { pi as PI, e as E };
  4. 批量导出 :可以使用*来批量导出所有成员。

    javascript 复制代码
    // all.js
    export * from 'constants';

导入模块(Import)

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

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

    javascript 复制代码
    // main.js
    import add from './math';
    console.log(add(1, 2)); // 输出 3
  2. 命名导入:导入模块的命名成员。

    javascript 复制代码
    // main.js
    import { PI, E } from './constants';
    console.log(PI, E); // 输出 3.14, 2.71
  3. 重命名导入:在导入时可以给变量或函数重命名。

    javascript 复制代码
    // main.js
    import { PI as Pi, E as E } from './constants';
    console.log(Pi, E); // 输出 3.14, 2.71
  4. 批量导入 :可以使用* as语法来批量导入所有成员,并给它们指定一个对象。

    javascript 复制代码
    // main.js
    import * as Utils from './utils';
    console.log(Utils.pi, Utils.e); // 输出 3.14, 2.71
  5. 导入模块的默认成员:即使模块有命名导出,也可以导入其默认成员。

    javascript 复制代码
    // main.js
    import add from './math';

注意事项

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

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

相关推荐
秋秋_瑶瑶1 分钟前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice1 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip2 小时前
js上下文
前端·javascript
中草药z2 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
野犬寒鸦2 小时前
力扣hot100:搜索二维矩阵 II(常见误区与高效解法详解)(240)
java·数据结构·算法·leetcode·面试
不知名raver(学python版)2 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休2 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel2 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组2 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架