如何实现一个异步模块加载器

水深无声 2023-01-01 07:50 126阅读 0赞

![format_png][]

作者：youngwind

原文链接：https://github.com/youngwind/blog/issues/98

# 引言 #

异步是前端中的一个重点。

今天就结合模块，和大家讲分享一下：`如何实现一个简单的模块加载器`。

正文

#  #

最近参考 `require.js` 的API，自己动手实现了一个简单的异步模块加载器: `fake-requirejs`。

## 为什么要做这样一个东西呢？ ##

原因是：我一直觉得自己对模块化这方面的理解不够深入。

即便用了很长时间的 webpack，看了很多模块化相关的资料，比如:

*  模块化的发展历史
 *  amd
 *  commonjs 和 cmd规范之争

等等。

然而，我依然觉得自己的`理解流于表面`，所以决定自己动手实现一个。

## 目标的选择 ##

本来一开始的目标是`webpack`的，但是后来考虑到:

webpack是建立在模块化基础上的一个构建工具。

且webpack的实现也相当的复杂，而我希望能够刻意区分开`模块化`和`构建`这两个概念。

因为这有助于我集中有限的精力研究模块化这一个概念，所以后来决定实现`requirejs`，这是一个相对来说比较简单的异步模块加载器。

虽然现在使用它的人已经越来越少了，但是正因为其简单和纯粹，倒是非常适合现在的我。

注：请确保掌握了requirejs的基本用法再往下阅读。

刚开始敲代码的时候，我就在想如何实现`require`函数和`define`函数，但是后来我发现我错了，因为这陷入了面向过程编程的误区，正确的方式应该是`面向对象编程`。

所以，我重新进行了思考。

**问题：这里都有哪些类型的对象呢？**

答案：**至少有模块（Module）这一类对象**

那模块类对象有哪些数据呢?

Module.id       // 模块id
    Module.name     // 模块名字
    Module.src      // 模块的真实的uri路径
    Module.dep      // 模块的依赖
    Module.cb       // 模块的成功回调函数
    Module.errorFn  // 模块的失败回调函数
    Module.STATUS   // 模块的状态（等待中、正在网络请求、准备执行、执行成功、出现错误……）

又有哪些对应的操作这些数据的方法呢?

Module.prototype.init           // 初始化，用来赋予各种基本值
    Module.prototype.fetch          // 通过网络请求获取模块
    Module.prototype.analyzeDep     // 分析、处理模块的依赖
    Module.prototype.execute        // 运算该模块

## 依赖分析与处理 ##

顺着上面的思路一步步写，我碰到了一个难点：

**如何分析和处理模块的依赖？**

举个例子:

// 入口main.js
    require(['a', 'b'], function (a, b) {
        a.hi();
        b.goodbye();
    }, function () {
        console.error('Something wrong with the dependent modules.');
    });

我们的目标是：

当模块a和b都准备好之后，再执行成功回调函数；一旦a或b有任意一个失败，都执行失败回调函数。

这个跟使用`Promise.all`和`Promise.race`很像，但这一次我们是要实现它们。

怎么办呢?

我想了一个方法：`记数法, 分两步走`。

为`Module`原型新增`Module.depCount`属性，初始值为该模块依赖模块数组的长度。

假如 depCount === 0，说明该模块依赖的模块都已经运算好了，通过setter触发执行该模块。

某模块执行成功之后，`Module.STATUS === 5`，通过`setter`触发下一步。

通过对象mapDepToModule，查找到依赖与该模块的所有模块，那么让那些模块都执行depCount--。

注：对象`mapDepToModule`的作用是:

**映射被依赖模块到依赖模块之间的关系。**

结构如下图所示:

举个例子：

当模块a准备好之后，我们就遍历mapDepToModule\['a'\]对应的数组，里面的每一项都执行depCount--。

![format_png 1][]

下面是一些关键的代码:

Module.prototype.analyzeDep = function () {
        // ...
        let depCount = this.dep ? this.dep.length : 0;
        Object.defineProperty(this, 'depCount', {
            get() {
                return depCount;
            },
            set(newDepCount) {
                depCount = newDepCount;
                if (newDepCount === 0) {
                    console.log(`模块${this.name}的依赖已经全部准备好`);
                    this.execute();  // 如果depCount===0，执行该模块
                }
            }
        });
        this.depCount = depCount;
        // ...
    };
    
    Object.defineProperty(this, 'status', {
        get () {
            return status;
        },
        set (newStatus) {
            status = newStatus;
            if (status === 5) {
                 // 假如某个模块已经准备好了（STATUS===5），
                 // 那么找出依赖于这个模块的所有模块，让他们都执行depCount--
                let depedModules = mapDepToModule[this.name];
                if (!depedModules) return;
                depedModules.forEach((module) => {
                    setTimeout(() => {
                        module.depCount--;
                    });
                });
            }
        }
    })

虽然我们都说循环依赖是一种不好的现象，应该在设计之初尽量避免。

但是，随着项目越滚越大，谁又能保证一定不会出现？

所以:

**作为一个合格的模块加载器，必须解决循环依赖的问题。**

那么，让我们先来看看别人是怎么处理的吧。

*  Commonjs和ES6的循环依赖 http://www.ruanyifeng.com/blog/2015/11/circular-dependency.html
 *  seajs的循环依赖 https://github.com/seajs/seajs/issues/732
 *  requirejs的循环依赖 http://requirejs.cn/docs/api.html\#circular

http://www.ruanyifeng.com/blog/2015/11/circular-dependency.html

这里我们不讨论各种处理方式孰优孰劣，我们只关注:

**如何实现requireJS API文档中那样的功能？**

仔细观察下面的例子：

a 与 b 出现`循环依赖`:

// main.js
    require(['a','b'], function (a, b) {
        a.hi();
        b.goodbye();
    }, function () {
        console.error('Something wrong with the dependent modules.');
    });
    
    // a.js
    define(['b'],function (b) {
        var hi = function () {
            console.log('hi');
        };
    
        b.goodbye();
        return {
            hi: hi
        }
    });
    
    // b.js
    define(['require', 'a'], function (require) {
        var goodbye = function () {
            console.log('goodbye');
        };
        // 因为在运算b的时候，a还没准备好，所以不能直接拿到a，只能用require再发起一次新的任务
        require(['a'], function (a) {
            a.hi();
        });
    
        return {
            goodbye: goodbye
        }
    });

我们能看到：

模块b的回调函数中，并不能直接引用到a，需要使用`require`方法包住。

那么问题来了：

在原先的设计中， 每一个`define`是跟一个模块一一对应的，`require只能用一次`，用于主入口模块（如：main.js）的加载。

但是，现在在模块b的回调函数中，又出现`require(['a'])`，这显然是乱套了。

至此，我发现require不应该仅仅是用于主入口模块的加载，require应该对应更高层次的抽象概念：我将它命名为：任务（Task），这是一个有别于Module的新的类。

每一次调用require，相当于新建一个Task（任务）。

这个任务的功能是：`当任务的所有依赖都准备好之后，执行该任务的成功回调函数。`

有没有发现这个`Task`原型与`Module`很像？

它们都有依赖、回调、状态，都需要分析依赖、执行回调函数等方法。

但是又有些不同，比如Task没有网络请求，所以不需要`fetch`这样的方法。

所以，我让**Task继承了Module**，然后重写某些方法。

关键代码如下:

// before
    require = function (dep, cb, errorFn) {
        // mainEntryModule是主入口模块
        modules[mainEntryModule.name] = mainEntryModule;
        mainEntryModule.dep = dep;
        mainEntryModule.cb = cb;
        mainEntryModule.errorFn = errorFn;
        mainEntryModule.analyzeDep();
    };
    
    // after
    require = function (dep, cb, errorFn) {
        let task = new Task(dep, cb, errorFn);
        task.analyzeDep();
    };
    
    // 引入新的类: Task(任务)
    function Task(dep, cb, errorFn) {
        this.tid = ++tid;
        this.init(dep, cb, errorFn);
    }
    
    // Task类继承于Module类
    Task.prototype = Object.create(Module.prototype);

至此，我们就完成了一个简单的异步模块加载器。

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 2][]

![format_png 3][]

点个**在看**支持我吧

![format_png 4][]

[format_png]: /images/20221120/3d1e8b3cb2b141e289fd50abc7092d01.png
[format_png 1]: /images/20221120/370d0b67b5ab4d048c628bc57f1b604a.png
[format_png 2]: /images/20221120/9eb4b37270cc4ad7ba41fdc282942715.png
[format_png 3]: /images/20221120/554edb5dfd5a46b88c74e47057fb7f79.png
[format_png 4]: /images/20221120/4b28c9a365b1411bb28fb9e53d846586.png