requireJs的模块加载和依赖机制的分析和简单实现。

requireJs的文件加载和依赖管理确实非常好用,相信大家都有这个体会。在此之前,我们的html文件头部总是要有一长串的script标签来引入js文件,并且还必须非常注意script标签的先后顺序。 

这篇文章对requireJs的核心功能做了简单实现,希望能帮助大家更好理解requireJs.

下面的思路是我参考了requireJs 0.0.7版本实现的。之前有尝试理解当前版本的requireJs的源码,不过最后发现,这特么不是短时间能搞的定的。 无奈之下找了github上先前较早的版本,那时还没有那么多配置项,代码结构更简单一点。

--------------------boom----------------

首先,假设我们有这样一个文件结构 

js/require.js

js/main.js

js/a.js  js/b.js  js/a1.js  js/a2.js js/b1.js   js/b2.js

index.html

我们的入口文件时main.js, 在入口文件中,我们调用了require函数

require(["a","b"],function(a,b){
    // do something.
});

我们看到上面的require函数中,回掉函数的执行依赖于a和b两个模块

然后我们的a.js文件像这样

define("a",["a1","a2"],function(a1,b1){
    //do something
});

可以看到a模块依赖于a1,a2模块。

a1模块像这样

define("a1",function(){
    //do something
});

 

同理b模块依赖于b1,b2模块,文件结构类似。

 

------------------boom--------------

 

先说说require和define函数的关系。 

require和define函数接收同样的参数,不同的是,define函数被建议在一个文件中使用一次,用它来定义模块。

require函数一般在入口文件或者顶层代码中使用,用来加载和使用模块。

其实在我看来,require函数可以看做是特殊的define函数,它用来定义一个顶层匿名模块,这个模块不需要被其他模块加载。

二者的区别这里有一些介绍 requirejs中define和require的定位以及使用区别?

 

requireJs中的执行流程

一,requrieJs首先找到data-main属性,然后根据属性值(通过新建一个script标签)加载并且解析入口文件。

  下面看入口文件中的 require(["a","b"],function(){})调用发生了什么?

二,在require函数中,我们先生成一个简单的模块对象,大概是这样的

{moduleName:"_@$1",deps:["a","b"],callback:function(){},callbackReturn:null,args:[]}

对这个模块对象属性的解释:

moduleName:模块名称。 前面我们说了,require函数可以看做是定义一个匿名的顶层模块对象。所以这里生成了一个内部名称"_@$1"

deps: 依赖数组; 包含当前模块依赖的模块。

callback:回调函数。 require中的那个回调函数。

callbackReturn:回调函数返回值    (其实貌似这里并不需要这个属性,我主要考虑到用这个属性来存储模块回调函数的返回值,这样当我们多次依赖这个模块时,可以直接返回这个值。)

args:数组,对应于依赖模块的传递回来的值

 

我们在全局设置一个context对象

  

context = {};

  context.topModule = "";  //存储requre函数调用生成的顶层模块对象名。

  context.modules = {}; //存储所有的模块。使用模块名作为key,模块对象作为value

  context.loaded = []; //加载好的模块   (加载好是指模块所在的文件加载成功)

  context.waiting = [];//等待加载完成的模块

 

我们在这里设置

    context.topModule = "_@$1";   //因为当前定义的是一个顶层匿名模块,所以生成一个内部模块名。

    context.modules 中添加_@$1模块,结果像这样

 {
"_@$1":{moduleName:"_@$1",deps:["a","b"],callback:function(){},callbackReturn:null,args:[]}
}

 

 

    context.waiting 中添加依赖的模块,结果像这样 ["a","b"];    //把依赖的模块添加到waiting中 (其实这里还可以优化为先判断依赖模块是否已经存在于context.loaded中)

然后我们遍历依赖数组 ["a","b"],分别创建script标签并加载,绑定好data-moduleName属性,和加载完成回调函数onscriptLoaded ,在遍历中大概像这样

  

var script = document.createElement("script");

  script.onload = onscriptLoaded; //脚本加载好后的回调函数。  这是个核心函数

  script.setAttribute("data-moduleName","a"); //为script元素添加data-moduleName属性,方便在回调函数中判断当前模块

  script.src = "js/a.js";

  document.getElementsByTagName("head")[0].appendChild(script);

 

到这里require函数就完成了。

三。假设上面的js/a.js加载好了,文件中执行了

define("a",["a1","a2"],function(a1,b1){
    //do something
});
我们看看define中做了哪些事。其实define函数和上面的require函数做了差不多相同的事,差别在于require自动生成了一个模块名。并且require中设置了context.topModule.

生成模块 {moduleName:"a",deps:["a1","a2"],callback:function(){},callbackReturn:null,args:[]}
修改全局context变量
  context.modules中添加当前模块 ,结果如下
{
"_@$1":{moduleName:"_@$1",deps:["a","b"],callback:function(){},callbackReturn:null,args:[]},
"a":{moduleName:"a",deps:["a1","a2"],callback:function(){},callbackReturn:null,args:[]} }

  context.waiting添加当前依赖数组。  --结果   ["a","b","a1","b1"]

然后接着根据依赖数组创建script标签,绑定data-moduleName属性,绑定回调函数onscriptLoaded

 

四。最后的关键函数onscriptLoaded

function onscriptLoaded(event){

  思路大概是这样。

  1.根据event对象我们可以得到加载完成的script元素,得到它的data-moduleName属性,这个属性就是模块名

  2.在全局context对象中,给 context.loaded数组中加上这个模块名。 context.waiting数组中减去这个模块名。

  3.接下来判断, 如果context.waiting数组不为空则返回。 

  4.否则如果context.waiting为空数组,表明所有的依赖都已经加载了。

  接下来就是重头戏。

  5.创建一个递归函数来执行模块回调函数,像这样

  

function exec(module) {  
    var deps = module.deps;  //当前模块的依赖数组
    var args = module.args;  //当前模块的回调函数参数
    for (var i = 0, len = deps.length; i < len; i++) { //遍历
     var dep = context.modules[deps[i]];           
           args[i] = exec(dep); //递归得到依赖模块返回值作为对应参数
    }
    return module.callback.apply(module, args); // 调用回调函数,传递给依赖模块对应的参数。
}
var topModule = context.modules[context.topModule]; //找到顶层模块。
exec(topModule); //开始执行递归函数

}  //onscriptLoaded结束

整个实现的思路就是,我们在define和require中定义模块时,所有的依赖的模块名都被添加到了context.waiting数组中。 每个依赖在加载时的script标签都绑定了onload事件,在事件回调函数中我们把当前模块名从context.waiting中删除,接着我们判断context.waiting是否为空,为空时意味着所有模块的文件都加载好了,此时就可以从顶层模块开始,使用一个递归函数来执行模块的回调函数。

 

最后

  我本来就只是想写出一个核心的思路,所以代码中很多地方还值得琢磨,可能并不正确,但整体的思路没错。

  注意这里我在使用define函数时,模块名参数我并没有省略,这是因为,在本片文章的实现思路中,我并没有更多的篇幅来解释怎么来实现define函数的省略模块名。 大概的思路可能是在define执行时,我们并不知道当前定义的模块的模块名,所以我们创建一个临时的模块名,然后全局中设置一个变量temp指向这个模块。 考虑到define函数执行完后,它所在的script标签的onload事件必然会紧接着触发,而且这个script标签上有data-moduleName绑定了正确的模块名,所以我们可以在onload事件回调函数中找到temp指向的模块,然后修改它的模块名。

 之前本来准备写篇关于requireJs api的详解,最后发现自己墨水有限,好多东西只可意会不能言传,最后放弃了。   如果关于这篇文章大家有什么好的意见和建议,请与我讨论,我们一起来完善这篇文章。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。