JavaScript中的模块化发展历程

模块化是指将大型程序拆分成多个相互依赖的小文件，每个文件就是一个模块。JavaScript的模块化发展经历了以下几个重要阶段：

1. 全局函数模式（无模块化）

   • 早期通过script标签引入文件，所有变量和函数都暴露在全局作用域
   • 问题：全局命名冲突、依赖关系不明确、难以维护

   // module1.js
   var name = 'module1';
   function foo() { console.log(name); }
   
   // module2.js  
   var name = 'module2'; // 命名冲突！
   function bar() { foo(); } // 依赖不明确
   

2. 命名空间模式

   • 使用对象封装模块，减少全局变量污染
   • 问题：外部可以直接修改内部数据，安全性不足

   var myModule = {
     _count: 0, // 仍可被外部修改
     getCount: function() { return this._count; },
     setCount: function(n) { this._count = n; }
   };
   

3. IIFE模式（立即执行函数）

   • 利用闭包实现数据私有化，只暴露公共接口
   • 支持依赖注入，是现代模块化的基础

   var Module = (function() {
     var privateVar = 'secret';
     function privateMethod() { }
   
     return {
       publicMethod: function() { return privateVar; }
     };
   })();
   
   // 依赖注入版本
   var Module = (function($) {
     function init() { $('#app').hide(); }
     return { init: init };
   })(jQuery);
   

4. CommonJS规范

   • 主要用于服务器端（如Node.js），同步加载模块
   • 使用module.exports导出，require()导入

   // math.js
   function add(a, b) { return a + b; }
   module.exports = { add };
   
   // main.js  
   const math = require('./math.js');
   math.add(2, 3);
   

5. AMD规范

   • 异步模块定义，适合浏览器环境
   • 使用define定义模块，require加载模块

   // 定义模块
   define(['jquery'], function($) {
     function init() { $('#app').hide(); }
     return { init: init };
   });
   
   // 加载模块
   require(['module'], function(module) {
     module.init();
   });
   

6. ES6模块（现代标准）

   • 语言层面的模块支持，静态编译时确定依赖关系
   • 使用export导出，import导入

   // math.js
   export const PI = 3.14;
   export function circleArea(r) { return PI * r * r; }
   
   // main.js
   import { PI, circleArea } from './math.js';
   console.log(circleArea(5));
   

关键特性对比：

• CommonJS：动态加载，运行时确定依赖，适合服务端
• ES6模块：静态加载，编译时确定依赖，支持tree shaking
• AMD：异步加载，不阻塞页面，适合浏览器

现代开发中通常使用ES6模块，配合Webpack等打包工具实现跨环境兼容。