面试题：ES6模块与CommonJS模块有什么异同？

ES6 模块（ECMAScript 2015 模块）和 CommonJS 模块是两种不同的模块化规范，它们在设计哲学、语法、加载机制等方面存在显著的差异。

以下是 ES6 模块与 CommonJS 模块的主要异同点：

相同点

• 模块化编程：两者都提供了模块化的编程方式，允许开发者将代码分割成独立的文件或模块，从而提高代码的可维护性和复用性。
• 导出和导入功能：两者都支持从一个模块中导出函数、变量或对象，并在另一个模块中导入这些导出的内容。

不同点

1. 语法

• CommonJS：

  • 使用 require 来导入模块。

  • 使用 module.exports 或 exports 来导出模块内容。

  • 示例：

    // 导出
    module.exports = {
      add: function(a, b) { return a + b; },
      subtract: function(a, b) { return a - b; }
    };
    
    // 导入
    const math = require('./math');
    console.log(math.add(2, 3)); // 输出 5

• ES6 模块：

  • 使用 import 和 export 关键字来定义模块的导入和导出。

  • 支持命名导出和默认导出。

  • 示例：

    // 导出
    export function add(a, b) { return a + b; }
    export function subtract(a, b) { return a - b; }
    
    // 默认导出
    export default function multiply(a, b) { return a * b; }
    
    // 导入
    import { add, subtract } from './math';
    import multiply from './math'; // 导入默认导出
    console.log(add(2, 3)); // 输出 5
    console.log(multiply(2, 3)); // 输出 6

2. 加载机制

• CommonJS：

  • 基于同步加载，适用于 Node.js 环境，因为服务器端不需要考虑页面加载时间。
  • 模块在加载时会被立即执行，并且只加载一次，后续的 require 调用会返回缓存的结果。

• ES6 模块：

  • 基于异步加载，适合浏览器环境，可以更好地处理按需加载和并行加载。
  • 支持动态 import()，它返回一个 Promise，在模块加载完成后解析为该模块的对象。
  • 模块具有"实时绑定"特性，即如果模块内部的导出值发生了变化，导入的地方也会看到最新的值。

3. 执行上下文

• CommonJS：

  • 模块在其自己的作用域中执行，每个模块都有自己的 this，指向当前模块对象。

• ES6 模块：

  • 模块代码总是在严格模式下执行，无论是否显式声明了 "use strict";。
  • this 在顶层模块代码中是 undefined，而不是全局对象。

4. 单例模式

• CommonJS：

  • 模块是单例的，即每次 require 都会返回同一个实例，这有利于性能优化。

• ES6 模块：

  • 也是单例的，但它们的导出是实时绑定的，这意味着导出的值可以在运行时发生变化，而这些变化会反映到所有导入的地方。

5. 浏览器兼容性

• CommonJS：

  • 主要用于 Node.js 环境，不被浏览器直接支持。为了在浏览器中使用 CommonJS 模块，通常需要使用构建工具如 Webpack 或 Browserify 进行打包。

• ES6 模块：

  • 现代浏览器原生支持 ES6 模块，可以直接通过 <script type="module"> 标签在 HTML 中引入。此外，也可以通过动态 import() 语句按需加载模块。

6. 生态系统和工具链

• CommonJS：

  • 由于历史原因，Node.js 的生态系统主要基于 CommonJS 模块。尽管 ES6 模块也在逐渐普及，许多现有的库和框架仍然使用 CommonJS 规范。

• ES6 模块：

  • 随着前端开发的发展，越来越多的项目开始采用 ES6 模块。现代的构建工具和包管理器（如 Webpack, Rollup, Parcel）都提供了对 ES6 模块的良好支持。

总结

• CommonJS 更适合服务器端开发，特别是 Node.js 环境，因为它提供了同步加载和简单的模块系统。
• ES6 模块 更加现代化，支持更丰富的特性和更好的性能优化，尤其适合浏览器端开发。随着 JavaScript 生态系统的演进，ES6 模块正在成为主流的选择。

在选择使用哪种模块系统时，应根据具体的项目需求、目标平台以及团队的技术栈来决定。对于新的项目，推荐优先考虑 ES6 模块，以利用其更多的特性和更好的社区支持。