概述

前端模块化是现代前端开发的重要理念，它将复杂的应用拆分成独立、可复用的模块，便于维护和协作。

一、为什么需要模块化

1. 避免全局变量污染：早期 JavaScript 通过 script 标签直接引入，所有变量和函数都暴露在全局作用域，容易导致命名冲突。
2. 代码复用与维护：模块化使代码可复用，并能独立测试和更新。
3. 依赖管理：明确模块间的依赖关系，避免加载顺序错误。

二、模块化规范的发展

1. 早期：文件划分

• 方式：将不同功能的代码放在不同文件中，通过 script 标签按顺序引入。
• 问题：依赖关系不明确，全局变量冲突。

<!-- index.html -->
<script src="utils.js"></script>
<script src="main.js"></script>

2. 函数封装

• 方式：将代码封装在函数中，形成独立作用域。
• 问题：模块间通信困难，无法自动处理依赖。

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

// main.js
function init() {
  const result = add(1, 2); // 需确保utils.js已加载
}

3. IIFE(立即执行函数表达式)

• 方式：用闭包封装模块，通过参数暴露接口。

// module.js
const Module = (function() {
  const privateVar = '秘密';
  function privateMethod() { /* ... */ }
  
  return {
    publicMethod() { /* 可被外部访问 */ }
  };
})();

4. 现代规范：CommonJS、AMD、ES Modules

CommonJS (CJS)（服务器端）

• 特点：同步加载，适用于 Node.js。
• 语法：require() 和 module.exports。

// math.js
exports.add = (a, b) => a + b;

// main.js
const math = require('./math');
console.log(math.add(1, 2));

AMD（浏览器端）

• 特点：异步加载，依赖前置。
• 语法：define() 和 require()（如 RequireJS）。

// math.js
define([], function() {
  return {
    add: (a, b) => a + b
  };
});

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

ES Modules (ESM)（现代浏览器）

推荐学习使用，是ES6的组成部分

• 特点：JavaScript 原生支持，静态导入。
• 语法：import 和 export。

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(1, 2));

5. UMD规范

一种跨平台的 JavaScript 模块定义方式，它兼容多种模块系统（如 CommonJS、AMD）和全局变量，旨在让模块在不同环境（浏览器、Node.js）中都能正常工作。

三、模块化工具

• Webpack：打包工具，支持各种模块规范，处理资源依赖。
• Babel：将 ES Modules 转换为兼容旧浏览器的代码。
• Vite：基于 ES Modules 的快速构建工具，开发阶段无需打包。