九、前端模块化

引言

前端开发中，代码的组织和管理一直是开发者面临的一大挑战。随着Web应用日益复杂，对代码结构和组织的需求也更为明显。这种背景下，模块化编程应运而生，开发者们可以将复杂的代码拆分为可管理和可重用的模块。在本文中，我们将通过实际代码示例，来探索前端模块化的发展历程及各种模块化方案的实现原理。

1. 前端模块化的发展历程
   

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