曾经花了一段时间去看RequireJS
源码,虽然就两千行左右的代码,但原谅我的愚笨,真的有点看不懂。想想,还是自己实现一个再说。
简单目标
实现类似requireJS的功能,涉及到的功能
// 定义模块,三个参数
define(id, deps, factory)
// 执行模块,两个参数
require(deps, factory)
简单分析
先上一个简单的例子,进行分析:
require(['main'], function(main) {
console.log('start~~~');
main.hello();
});
- 过程分析
通过deps
参数,很容易知道该文件依赖的脚本是main.js
,然后去加载依赖的脚本,加载完之后执行一遍并且将执行的结果作为回调函数factory
的参数,然后执行该匿名的回调函数即可。
问题分析
如何加载脚本
这个比较容易想到两个方式,一种用ajax请求,另一种用Dom元素添加让浏览器加载;由于ajax请求会有跨域问题,我们采用Dom加载的方式。
如何判断模块加载完毕
曾经我想用script的
onload
事件来判断对应的模块加载,但问题在于onload
只是说明了脚本已经加载,但是并没有执行。调整一下思路,定义模块的状态,在加载的时候,将状态标为加载中;记录模块的依赖数,当该模块的所有依赖全部加载完成,将执行回调函数作为该模块的对应输出,模块加载完成。如何暂存和执行回调函数
比如上面这个简单的例子,将回调函数作为模块
main
加载完毕后的回调函数即可;若依赖的模块有多个,每个依赖加载完后进行就判断依赖是否加载完毕,是就执行回调。注意,此时也意味着当前模块加载完毕,可以执行返回结果了。循环依赖问题
这么难的问题,留到后面再说吧!
数据结构
首先需要一个全部的模块缓存对象,记录所有已经加载的&正在加载的模块;将模块的数据结构设计成如下:
module[name] = { status: String, // 记录模块的加载状态'loading' or 'loaded' export: Object , // 记录该模块的输出结果 onload: Arrray[function] // 记录模块加载完成后的回调函数 }
简单实现
小女不才,实现主要参考了叶小钗博客的实现,读懂了他/她(不确定性别)的实现之后,