es6与es5的模块区别

ES6（ECMAScript 2015）和 ES5 在模块系统上有显著的区别，主要体现在语法、加载方式和功能上。以下是主要区别的详细介绍：

---

1. 语法差异

ES5 模块模式

ES5 没有官方的模块语法，通常使用以下模式模拟模块：

• CommonJS （主要用于 Node.js）：

  // 导出
  module.exports = { foo: 'bar' };
  // 导入
  const obj = require('./module');

• AMD （异步模块定义，用于浏览器）：

  define(['dependency'], function(dependency) {
    return { foo: 'bar' };
  });

ES6 模块

ES6 引入了官方的模块语法：

• 导出 ：

  // 命名导出
  export const foo = 'bar';
  export function hello() {};
  // 默认导出
  export default function() {};

• 导入 ：

  // 命名导入
  import { foo, hello } from './module';
  // 默认导入
  import myModule from './module';
  // 混合导入
  import myModule, { foo } from './module';

---

2. 加载方式

• ES5 ：
  • 同步加载（CommonJS）：适用于服务器端（如 Node.js）。
  • 异步加载（AMD）：适用于浏览器端，避免阻塞。
• ES6 ：
  • 静态加载：在编译时确定依赖关系，支持静态分析（如 Tree Shaking）。
  • 异步加载 ：通过 import() 动态导入（返回 Promise）。

---

3. 作用域

• ES5 ：
  • 模块内的变量可能污染全局作用域（如未使用 IIFE）。
• ES6 ：
  • 模块具有独立的作用域，自动启用严格模式（"use strict"）。
  • 变量和函数默认不暴露到全局。

---

4. 引用行为

• ES5 ：
  • CommonJS 导出的是值的拷贝（对于基本类型是复制，对于对象是浅拷贝）。
• ES6 ：
  • 导出的是值的引用（动态绑定），修改导出值会影响所有导入模块。

---

5. 循环依赖处理

• ES5 （CommonJS）：
  • 循环依赖可能导致部分模块未完全加载。
• ES6 ：
  • 静态分析能力更强，能更好地处理循环依赖。

---

6. 浏览器支持

• ES5：通过 RequireJS、Browserify 等工具在浏览器中使用。
• ES6 ：现代浏览器原生支持，可通过 <script type="module"> 直接使用。

---

7. 示例对比

ES5（CommonJS）

// math.js
module.exports = { add: (a, b) => a + b };
// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5

ES6

// math.js
export const add = (a, b) => a + b;
// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

---

总结

特性	ES5	ES6
语法	非官方（CommonJS/AMD）	官方（import/export）
加载方式	同步/异步	静态/动态（import()）
作用域	可能污染全局	独立作用域，严格模式
引用行为	值拷贝	动态绑定（引用）
循环依赖	处理较弱	处理更强
浏览器支持	需工具库	原生支持

ES6 模块系统更现代化、功能更强大，是当前前端开发的首选方案。