JavaScript 模块化是现代前端开发的核心概念之一，通过模块化可以实现代码的复用、维护和协作。以下是关键知识点梳理：

1. 模块化概念 🌐

模块化的核心是 将代码拆分为独立功能单元，每个模块负责单一职责。常见场景包括：

  • 工具函数封装（如 utils.js）
  • 组件化开发（如 components/header.js）
  • 业务逻辑隔离（如 services/api.js）

💡 模块化_概念 的核心是 高内聚低耦合，请参考 模块化开发最佳实践 进一步学习。

2. 常见模块系统 🛠️

JavaScript 支持多种模块化规范，以下是主流方案：

2.1 ES6 模块（推荐）

// 导出
export function sayHello() { ... }

// 导入
import { sayHello } from './module.js';
ES6_模块

2.2 CommonJS（Node.js）

// 导出
exports.sayHello = function() { ... }

// 导入
const { sayHello } = require('./module.js');
CommonJS_模块

2.3 AMD/RequireJS

define(['dependency'], function(dep) {
  return {
    init: function() { ... }
  };
});
AMD_模块

3. 模块化实践 ✅

建议遵循以下规范：

  • 使用 export default 作为默认导出
  • 通过 ./ 表示相对路径，../ 表示父路径
  • 遵守命名一致性（如 utils.js vs utility.js）

项目结构示例：

project/
├── modules/
│   ├── data.js
│   └── utils.js
├── components/
│   └── header.js
└── index.js
项目结构_示例

4. 扩展阅读 🔍

📌 模块化不仅是代码组织方式，更是构建可维护应用的基石。建议结合实际项目场景进行实践。