面试之《commonjs，requirejs和es6 Module的区别》

设计理念

• CommonJS：是为服务器端环境设计的模块化规范，以同步加载模块为核心思想。服务器端读取文件速度快，同步加载不会造成明显性能问题，方便开发者在代码执行前就确定模块间的依赖关系，便于管理和维护。
• RequireJS（AMD）：为浏览器环境量身打造，遵循异步模块定义（AMD）规范。考虑到浏览器中网络请求的异步性，采用异步加载模块的方式，避免同步加载导致的页面阻塞，提升页面响应性能。
• ES6 Module：是 JavaScript 官方推出的标准化模块系统，旨在统一服务器端和浏览器端的模块化开发。它既考虑了代码的静态分析，又支持动态导入，为 JavaScript 提供了更规范、更强大的模块化方案。

语法格式

• CommonJS：使用 require() 函数引入模块，module.exports 或 exports 导出模块。

// 导出模块，math.js
const add = (a, b) => a + b;
module.exports = {
    add
};

// 引入模块，main.js
const math = require('./math');
console.log(math.add(1, 2)); 

• RequireJS（AMD）：用 define() 函数定义模块，require() 函数加载模块。

// 定义模块，math.js
define([], function () {
    const add = (a, b) => a + b;
    return {
        add
    };
});

// 加载模块，main.js
require(['math'], function (math) {
    console.log(math.add(1, 2)); 
});

• ES6 Module：使用 import 关键字引入模块，export 关键字导出模块，有默认导出和命名导出两种方式。

// 导出模块，math.js
export const add = (a, b) => a + b;
export default {
    add
};

// 引入模块，main.js
import { add } from './math.js';
import math from './math.js';
console.log(add(1, 2)); 
console.log(math.add(1, 2)); 

加载方式

• CommonJS：同步加载模块。执行 require() 函数时，会立即加载并执行被引入的模块，后续代码在模块加载完成前会被阻塞。

// 同步加载模块
const fs = require('fs'); 
const data = fs.readFileSync('file.txt', 'utf8');

• RequireJS（AMD）：异步加载模块。require() 函数发起异步请求加载模块，不阻塞后续代码执行，模块加载完成后执行回调函数并传入模块。

// 异步加载模块
require(['jquery'], function ($) {
    $('body').css('background-color', 'red');
});

• ES6 Module：静态加载模块（在编译阶段就确定模块依赖关系），默认是异步加载资源。在浏览器中，模块通过 <script type="module"> 标签引入，会在后台异步加载；在 Node.js 中，使用 .mjs 文件扩展名或在 package.json 中设置 "type": "module" 来启用。同时，ES6 还支持动态导入（import()），实现异步按需加载。

// 静态导入
import { add } from './math.js';
// 动态导入
import('./math.js').then((math) => {
    console.log(math.add(1, 2));
});

应用场景

• CommonJS：主要用于服务器端开发，如 Node.js 应用。服务器端文件系统读取速度快，同步加载不会成为性能瓶颈，便于管理模块依赖。
• RequireJS（AMD）：适用于浏览器端复杂 Web 应用，尤其是需要加载大量 JavaScript 文件的场景。通过异步加载避免页面阻塞，提升用户体验。
• ES6 Module：既适用于服务器端（Node.js 从版本 13.2.0 开始默认支持 ES Modules），也适用于浏览器端开发。随着现代浏览器对 ES6 支持的不断完善，越来越多的前端项目直接使用 ES6 Modules 进行模块化开发。

模块类型支持

• CommonJS：侧重于服务器端模块类型，如文件系统操作、数据库连接等，模块可直接访问服务器端资源和环境变量。
• RequireJS（AMD）：主要关注浏览器端模块，如 DOM 操作、AJAX 请求等，方便处理浏览器环境中的异步操作和资源加载。
• ES6 Module：具有更广泛的适用性，可用于各种类型的 JavaScript 应用，无论是服务器端还是浏览器端的模块都能很好地支持。

兼容性

• CommonJS：在 Node.js 环境中得到了广泛支持，但在浏览器环境中需要借助打包工具（如 Webpack）才能使用。
• RequireJS（AMD）：在旧版本浏览器和需要异步加载模块的场景中仍有一定应用，但随着 ES6 Modules 的普及，其使用场景逐渐减少。
• ES6 Module：现代浏览器和较新的 Node.js 版本都对其提供了良好的支持，但在一些旧版本浏览器中需要进行转译处理。