这次要记录的是一个很简单的但是基本符合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 标签。

网友评论