前端模块规范

前端模块规范是一套用于管理代码模块化组织的标准，通过将代码拆分为独立、可复用的模块，解决全局变量污染、依赖管理混乱和代码复用困难等问题。模块化允许开发者通过特定接口暴露或引入功能，实现代码的高内聚、低耦合。例如，ES6模块通过 import/export 语法实现依赖管理。

为什么要学习模块规范？

• 解决命名冲突与全局污染：传统开发中，全局变量易被覆盖（如多人定义同名变量），模块化通过闭包或作用域隔离规避此问题。例如，立即执行函数（IIFE）可封装私有变量。
• 依赖管理自动化：模块规范自动处理依赖加载顺序，避免手动管理 <script> 标签的繁琐和错误。例如，AMD规范通过 require 异步加载依赖模块。
• 提升可维护性与复用性：模块化代码结构清晰，功能独立，便于团队协作和后期维护。例如，CommonJS 的 module.exports 让模块功能明确暴露。- 适应工程化与大型项目：现代前端项目复杂度高，模块化是构建工具（Webpack、Vite）和框架（React、Vue）的基础支撑。ES6 模块的静态分析特性支持 Tree-Shaking 优化。

CommonJS

• 适用场景：Node.js服务端。
• 特点：同步加载，模块输出值的 拷贝 （修改不影响原模块）。
• 示例 ：Node.js中通过 require 加载本地文件模块。
• 语法：

// 导出
module.exports = { ... }; 

// 导入
const module = require('./module');

AMD（Asynchronous Module Definition）

• 适用场景：浏览器端异步加载。
• 特点：依赖前置，提前执行。
• 工具：RequireJS 是实现 AMD 的典型库。
• 语法：

define(['dep1', 'dep2'], function(dep1, dep2) {
  return { ... }; // 模块定义
});

require(['module'], function(module) { ... }); // 模块加载

CMD（Common Module Definition）

• 适用场景：浏览器端按需加载。
• 特点：依赖就近，延迟执行。
• 工具：SeaJS 是 CMD 的代表实现。
• 语法：

define(function(require, exports) {
  const dep = require('./dep'); // 按需引入
  exports.fn = () => { ... };
});

ES6模块（ECMAScript Modules）

• 适用场景：浏览器与服务器通用（现代前端开发主流）。
• 特点：静态分析、输出值的引用（实时反映模块内部变化）。
• 优势：支持 Tree-Shaking、编译时优化，与 Webpack 等工具深度集成。
• 语法：

// 导出
export const name = 'module';
export default function() { ... };

// 导入
import { name } from './module';
import Module from './module';

UMD（Universal Module Definition）

• 适用场景：兼容 AMD、CommonJS 和全局变量的跨环境模块。
• 特点：通过条件判断适配不同环境。
• 示例：

(function(root, factory) {
  if (typeof define === 'function' && define.amd) { // AMD
    define(['dep'], factory);
  } else if (typeof exports === 'object') { // CommonJS
    module.exports = factory(require('dep'));
  } else { // 全局变量
    root.module = factory(root.dep);
  }
})(this, function(dep) { ... });