分类导航

开发史上最强模块加载工具

发布时间：2017年05月11日作者： IT网络文摘 (该文来自笔记，点击查看原文)

这次要记录的是一个很简单的但是基本符合AMD规范的浏览器端模块加载工具的开发流程。因为自从使用过require.js、webpack等模块化加载工具之后就一直对它的实现原理很好奇，于是稍微研究了一下。

实现的方法有许多，但简单实现的话大致都会实现出以下的两个方法：

1 实现模块的加载。从主模块说起，我们需要通过一个入口来加载我们的主模块的依赖模块，同时在加载完依赖之后，能够取得所依赖模块的返回值，并将它们传入主模块代码中，再去执行我们的主模块代码。函数入口类似于这样的形式：

require([ dependents ], function( ){    // 主模块代码})

至于如何去加载我们的依赖模块，这里一般可以有两种处理方式，一种是通过Ajax请求依赖模块，一种是为依赖模块动态创建 script 标签加载依赖模块，在这里我只选择第二种方式，不过如果你需要加载文本文件或者JSON文件的话，还是需要采用Ajax加载的方式，但这里为了简单处理我们不考虑这种情况。

所以我们会遍历主模块的依赖数组，对依赖模块的路径做简单的处理之后，动态创建 script 标签加载每一个依赖模块。所谓的加载模块，其本质便是通过网络请求将模块 Fetch 到本地。通过 script 标签加载资源有两个特点：

1.1 script 标签加载到JS代码之后会立即执行这一段代码。JSONP也利用了 script 标签的这个特点。

1.2 可以通过 script.onload 和 script.onerror 监听模块的加载状况。我们只需要缓存对应模块的返回值即可，所以可以监听 script 标签的 onload 事件，在模块缓存成功之后删除对应的 script 标签。