什么是 JavaScript 模块化？如何实现？

推荐答案

JavaScript 模块化是一种将代码分割成独立模块的编程方式，每个模块都有自己的作用域，避免全局变量污染，并且可以按需加载，提高代码的可维护性和复用性。

常见的模块化实现方式包括：

1. CommonJS：主要用于服务器端（如Node.js），使用 require 导入模块，module.exports 导出模块。
2. AMD（Asynchronous Module Definition）：适用于浏览器端，支持异步加载模块，使用 define 定义模块，require 加载模块。
3. ES Module：ES6 引入的官方模块化标准，使用 import 导入模块，export 导出模块，支持静态分析和 Tree Shaking。

本题详细解读

1. CommonJS

CommonJS 是 Node.js 默认的模块化规范，适用于服务器端开发。它的特点是同步加载模块，适合在服务器端使用。

• 导出模块：

  // moduleA.js
  const add = (a, b) => a + b;
  module.exports = add;

• 导入模块：

  // main.js
  const add = require('./moduleA');
  console.log(add(1, 2)); // 输出 3

2. AMD

AMD 是异步模块定义的缩写，主要用于浏览器端，支持异步加载模块，适合需要按需加载的场景。

• 定义模块：

  // moduleB.js
  define(['dependency'], function(dependency) {
    const multiply = (a, b) => a * b;
    return multiply;
  });

• 加载模块：

  // main.js
  require(['moduleB'], function(multiply) {
    console.log(multiply(2, 3)); // 输出 6
  });

3. ES Module

ES Module 是 ECMAScript 6 引入的官方模块化标准，支持静态分析和 Tree Shaking，是现代 JavaScript 开发的首选模块化方式。

• 导出模块：

  // moduleC.js
  export const subtract = (a, b) => a - b;

• 导入模块：

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

4. 模块化的优势

• 避免全局污染：每个模块都有自己的作用域，不会污染全局命名空间。
• 提高代码复用性：模块可以被多次引用，减少代码重复。
• 便于维护：模块化使代码结构更清晰，便于维护和调试。
• 按需加载：支持异步加载模块，减少初始加载时间，提升性能。