ES6模块详解 💡

ES6（ECMAScript 2015）规范引入了模块系统，彻底改变了JavaScript代码的组织方式。以下是关键知识点：

1. 模块基础概念

  • 模块导出：使用 export 声明变量、函数或类，例如：

    export const PI = 3.14;
    模块导出

  • 模块导入：通过 import 引入其他模块内容，例如：

    import { PI } from './math.js';
    模块导入

  • 默认导出：使用 export default 指定单一主要输出：

    export default function() { /* ... */ }

2. 核心特性

  • 静态分析：模块边界在编译时确定，提升性能
  • 命名空间：模块内所有变量自动成为命名空间成员
  • 按需加载：支持动态导入 import() 实现懒加载
  • 兼容性：需注意与CommonJS等旧规范的差异

3. 使用示例

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

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

4. 注意事项

  • 浏览器支持需配合打包工具（如Webpack、Rollup）
  • 避免模块循环引用
  • 使用 export * from '...' 可批量导出

如需深入了解ES6模块的高级用法，可访问 /zh-CN/docs/es6_modules_guide 查看完整教程。