RequireJS源码解读（二）

（续上节）
上面讲了如何处理全局序列和context化全局序列
以及执行全局序列中的依赖项。
检查依赖项

   //Mark all the dependencies as needing to be loaded.
                    context.nextTick(function() {
                        //Some defines could have been added since the
                        //require call, collect them.
                        intakeDefines();

                        requireMod = getModule(makeModuleMap(null, relMap));

                        //Store if map config should be applied to this require
                        //call for dependencies.
                        requireMod.skipMap = options.skipMap;

                        requireMod.init(deps, callback, errback, {
                            enabled: true
                        });

                        checkLoaded();
                    });

最后返回的是 return localRequire;

回到 context.require(deps, callback, errback);

4. 监听页面加载

传入的参数是load加载事件
脚本加载的回调，用于检查加载状态。

 onScriptLoad: function(evt) {
                //Using currentTarget instead of target for Firefox 2.0's sake. Not
                //all old browsers will be supported, but this one was easy enough
                //to support and still makes sense.
                if (evt.type === 'load' ||
                    (readyRegExp.test((evt.currentTarget || evt.srcElement).readyState))) {
                    //Reset interactive script so a script node is not held onto for
                    //to long.
                    interactiveScript = null;

                    //Pull out the name of the module and the context.
                    var data = getScriptData(evt);
                    context.completeLoad(data.id);
                }

var data = getScriptData(evt) 这个函数 构造完毕之后，将返回一个对象

此时data就是{ node：script对象，id : ‘main’ }

5.获取加载对象

开始加载

 completeLoad: function(moduleName) {
                var found, args, mod,
                    shim = getOwn(config.shim, moduleName) || {},
                    shExports = shim.exports;

                takeGlobalQueue();

                while (defQueue.length) {
                    args = defQueue.shift();
                    if (args[0] === null) {
                        args[0] = moduleName;
                        //If already found an anonymous module and bound it
                        //to this name, then this is some other anon module
                        //waiting for its completeLoad to fire.
                        if (found) {
                            break;
                        }
                        found = true;
                    } else if (args[0] === moduleName) {
                        //Found matching define call for this script!
                        found = true;
                    }

                    callGetModule(args);
                }
                context.defQueueMap = {};

                //Do this after the cycle of callGetModule in case the result
                //of those calls/init calls changes the registry.
                mod = getOwn(registry, moduleName);

运行到这里，callGetModule()就是调用module了吧

     function callGetModule(args) {
            //Skip modules already defined.
            if (!hasProp(defined, args[0])) {
                getModule(makeModuleMap(args[0], null, true)).init(args[1], args[2]);
            }
        }

传入的args ：args = [“main”, Array[0], undefined]
args[1]和args[2]到底是来干嘛的？

5.1 创造ModuleMap对象

首先makeModuleMap(args[0], null, true)).init(args[1], args[2]
从下图可以看到args[1]是当前加载项的父节点， args[2]->applyMap?:

转化为绝对路径

最后将main.js转化为url路径，可能在这里没什么用，但是在这种定义了baseURL或者重命名模块中，这个normolize显得非常有用的

最后得到的对象：

5.2 getModule

5.3 Module.init

5.4 checkLoaded()

checkLoaded()会调用onScriptLoad()，出现了新的./@r5.js 是a.js吗

然而不是a.js，第二次遍历加载出了a.js

又见到熟悉的@r5.js，这次它变成了Module

6 加载第一个script：a.js

 req.load = function(context, moduleName, url) {
        var config = (context && context.config) || {},
            node;
        if (isBrowser) {
            //In the browser so use a script tag
            node = req.createNode(config, moduleName, url);

            node.setAttribute('data-requirecontext', context.contextName);
            node.setAttribute('data-requiremodule', moduleName);

6.1 检测是否是浏览器

 isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document),

6.2 创建node

    req.createNode = function(config, moduleName, url) {
        var node = config.xhtml ?
            document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
            document.createElement('script');
        node.type = config.scriptType || 'text/javascript';
        node.charset = 'utf-8';
        node.async = true;
        return node;
    };

传入的参数：
这个path是在main.js中定义的

require.config({
    path: {
        "a": "a",
        "b": "b"
    }
})

deps=[‘main’]，应该main默认就为依赖项吧，因为之前在

createNode()就是构造一段script，而且指定了charset-set 和async(异步加载)；

 node.setAttribute('data-requirecontext', context.contextName);
            node.setAttribute('data-requiremodule', moduleName);

这两句话为node添加了新的属性

为node绑定新的事件

 node.addEventListener('load', context.onScriptLoad, false);
 node.addEventListener('error', context.onScriptError, false);

加载事件和error事件都绑定为context的对象了

其实node就是script，但是require这里为它添加了两个新的属性和新的load处理事件，我觉得requireJS的精妙之处就在这里吧。

继续循环看是否有加载项

这个时候a.js并没有加载，又出现了.@r5，我猜测b.js要出来了

然而我们看到的是，removeScript(“a”)，要移除a了？但是a都没有加载啊

不对，这里是要加载a.js，然而报错了，应该是因为我们debug超出了requireJS的时间。

.@r6 .@r8出现了

先写到这里，requireJS的原理确切是很复杂，经常会对一些全局变量进行修改啥的。
到这里onScriptLoad()就结束了