九、前端模块化
引言
前端开发中，代码的组织和管理一直是开发者面临的一大挑战。随着Web应用日益复杂，对代码结构和组织的需求也更为明显。这种背景下，模块化编程应运而生，开发者们可以将复杂的代码拆分为可管理和可重用的模块。在本文中，我们将通过实际代码示例，来探索前端模块化的发展历程及各种模块化方案的实现原理。
- 前端模块化的发展历程
1） 全局函数式编程
在早期的Web开发中，通常使用全局范围内声明函数和变量的方式来组织代码。例如：
var module1Data = 'module1 data';function module1Func(){ console.log(module1Data);}
这种方式存在的问题主要有命名冲突、函数间依赖关系不明显、维护困难等。
2） 命名空间模式
随着对代码组织方式的需求增加，开发者开始通过定义全局对象，将所有函数和变量封装在这个对象中，也就是命名空间模式。
var myApp = { module1Data: 'module1 data', module1Func: function(){ console.log(this.module1Data); }};
这种方式解决了全局命名冲突的问题，但是模块间的依赖关系依旧不明显，同时所有依赖都需要在命名空间对象中手动管理。
3） CommonJS
CommonJS模块规范是Node.js采用的规范，使用require函数加载模块，通过module.exports导出模块。
// a.js module.exports = 'Hello world'; // b.jsvar a = require('./a'); console.log(a); // 输出 'Hello world'
CommonJS使用同步加载方式，适用于服务器端，但由于网络请求的异步特性，不适合在浏览器环境使用。
require函数
require函数的主要任务是根据模块的文件路径读取模块文件，然后执行模块代码，最后返回模块的exports对象。
require函数的实现代码大致如下：
function require(modulePath){ // 读取模块代码 const code = fs.readFileSync(modulePath); // 包装模块代码 const wrapper = Function('exports', 'require', 'module', '__filename', '__dirname', `${code}\n return module.exports;`); const exports = {}; const module = { exports }; // 执行模块代码 wrapper(exports, require, module); // 返回模块的exports对象 return module.exports;}
其中，wrapper函数的参数exports和module就是模块的exports和module对象，这样我们就可以在模块中通过exports和module.exports来导出模块。
require函数在执行模块代码时，会先将模块代码包装到一个函数中，然后调用这个函数。这样做的好处是可以将模块代码隔离到一个函数作用域中，防止模块内的变量污染全局作用域。
带你读《现代Javascript高级教程》九、前端模块化（2）https://developer.aliyun.com/article/1349631?groupCode=tech_library
