例子来自官方，我稍微改造了一下，如下：
// project.html<!DOCTYPE html><html> <head> <title>requirejs</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> </body></html>// scripts/main.jsdefine(function(util){ require("helper/util"); alert('main factory') return {a:1, b:2};})// scripts/helper/util.jsalert('util.js is loaded!')
就这样三个文件，运行结果 "util.js is loaded" -> "main factory"。当然，这太简单了，我要说的这才刚开始。
data-main 属性有一个值 "scripts/main"，注释也写了，表示当 require.js 加载完之后加载 scripts/main.js。
其实不仅如此，如果指定了这个属性，会把它的目录部分和文件部分拆开，即 scripts/ 和 main，之后会这么做：
cfg.baseUrl = 'scripts/';
cfg.deps = ['main'];
即配置一下 baseUrl 和 deps
接着，用这个配置对象去初始化默认Context，这个过程会判断默认Context 是否依赖别的模块，这里明显依赖 "main"，所以需要context.require(it)
怎么做的呢？很简单，它做了两件事：
1. 把需要加载的依赖放进一个数组
2. 遍历该数组，加载依赖，并轮询加载状态
append 的 script 节点需要提一下：
可以看到 RequireJS 为节点加了两个自定义属性，分别表示 contextName 和 moduleName
动态创建的 script 节点当脚本执行完后，会发出onload事件（IE 就是 onreadstatechange），RequireJS 这时会在事件处理函数中进行检测，加载的模块是否同时也存在依赖？来看一段代码：
/** * 这个方法是在 script 节点加载的脚本执行完之后才会执行。 * 1. 通过 event.target 或 event.srcElement 可以取到 script 节点 * 2. 获取节点的 data-requiremodule 属性时，如这里的 "main" * 所以 moduleName 就是 "main" * * @param {String} moduleName */completeLoad: function (moduleName) { var args; // 队列分为 全局队列 和 context队列 // // 一个被加载的模块，在它的define()中，会把该模块对应的[name, deps, callback]塞进队列 // 如果遵循一个文件一个模块的写法，队列里只有一个元素 // 如果一个文件写了多个模块，那队列里有多个元素 // // 现在的问题是：到底塞进哪个队列呢？ // 因为 IE 通过 interactive 状态可以知道当前执行的 script 节点， // 而 script 节点又绑定了 data-requirecontext 属性，所以可以拿到contextName // 综上：IE 加入 context队列，非IE加入 全局队列 // // 这句就表示把全局队列的元素加入context队列，并清空全局队列 // 这样便实现了浏览器的兼容 context.takeGlobalQueue(); // defQueue 即 context 队列 while (defQueue.length) { args = defQueue.shift(); if (args[0] === null) { // 如果[name, deps, callback]中name为null，即匿名模块 args[0] = moduleName; break; } else if (args[0] === moduleName) { //Found matching define call for this script! break; } else { // 如果一个文件出现多个define，才有可能进到这里，暂时可以无视这个分支 callDefMain(args); args = null; } } // callDefMain其实是main()的apply调用 // 它是定义模块的主函数，通过[name, deps, callback]构造模块 // 它会获取模块需要的依赖，如果是未加载的依赖，会加入context.paused数组 if (args) { callDefMain(args); } else { // 如果加载的文件没有写成模块的形式，进到这里 callDefMain([moduleName, [], null]); } // 每加载完一个，context.scriptCount就-1 // 对浏览器来说，这没什么问题，但这有一个副作用 // checkLoaded() 会通过scriptCount判断是否要轮询加载状态 // 为了避免这个开销, 这里先-1 if (req.isAsync) { context.scriptCount -= 1; } // 这个方法主要就是处理context.paused，即加载那些依赖 // 并会轮询是否完成加载，并在加载完成时，做一些事 resume(); if (!req.isAsync) { context.scriptCount -= 1; }}
本文仅作了解，更多的内容我会单独写文章讲解
用一个例子读懂 RequireJS
TAG:
