2.3 require方法
require方法的作用是当依赖列表都加载完毕，执行用户回调。因此这里有个加载的过程，整个加载过程分为以下几步。
（1）取得依赖列表的第一个 ID，转换为 URL。无论是通过 basePath+ID+".js"，还是以映射的方式直接得到。
（2）检测此模块有没有加载过，或正在被加载。因此我们需要一个对象来保持所有模块的加载情况。当用户从来没有加载过此节点时，就进入加载流程。
（3）创建script节点，绑定onerror、onload、onreadychange等事件判定加载成功与否，然后添加href并插入DOM树，开始加载。
（4）将模块的 URL，依赖列表等构建成一个对象，放到检测队列中，在上面的事件触发时进行检测。
在mass的加载器，它支持允许第一个参数为字符串，然后内部按空格或逗号切分为ID数组，以及做去重处理，其他都一样。
我们看一下模块ID的转换规则：
http://wiki.commonjs.org/wiki/Modules/1.1.1。
mass在这基础上做了扩展。
（1）模块ID本来就是URL的简体，因此可以包含斜线（/），并以/划分为多项。
（2）模块ID应该是以符合变量的规则的字符串组成，第一个项可以是“.”或“..”。这些都是URL的基本的规则，表示当前目录与父目录。
（3）模块ID的未尾可以包含“.js”，但如果它是指向一个CSS文件，那么必须以CSS结尾。
（4）如果以“/”或“./”开头，表示它与加载它的模块在同一目录。
（5）如果以“..”开头，表示它在加载它的模块的上一级目录，如果存在多个“..”，就要向上找。
（6）如果模块ID是“mass”，不做转换与加载，这表示mass框架的种子模块，也就是加载器的所在模块。
（7）如果模块ID是“ready”，不做转换与加载，这用于延迟用户回调到DOM树建完后执行。避免出现domReady的回调函数与模块的回调函数出现套嵌。
（8）如果情况就直接在前面按上basePath——加载器所在的目录！
除了这些情况外，我们通常还用到映射，就是允许用户在事前用一个方法，把ID与完整的URL对应好，这样就直接拿。mass称之为别名机制。ID只是给用户用的，框架还是URL做加载或其他检测。此外，AMD还发展一种shim技术，shim就是垫片的意思，目的是让不符合AMD定义的JavaScript文件也能无缝切入我们的加载器系统。
如这个是普通的别名机制：
require.config({
alias: {
'lang': 'http://common.cnblogs.com/script/mass/lang.js',
'css': 'http://common.cnblogs.com/script/mass/css.js'
}
});
而对于jQuery或其插件，我们需要shim机制：
require.config({
alias: {
'jquery': {
src: 'http://common.cnblogs.com/scriptjquery.js',
exports: "$"
},
'jquery.tooltip': {
src: 'http://common.cnblogs.com/script/ui/tooltip.js',
exports: "$",
deps: ["jquery"]
}
}
});
下面是require的源码：
window.require = $.require = function(list, factory, parent) {
// 用于检测它的依赖是否都为2
var deps = {},
// 用于保存依赖模块的返回值
args = [],
// 需要安装的模块数
dn = 0,
// 已安装完的模块数
cn = 0,
id = parent || "callback" + setTimeout("1");
parent = parent || basepath;//basepath为加载器的路径
String(list).replace($.rword, function(el) {
var url = loadJSCSS(el, parent)
if (url) {
dn++;
if (modules[url] && modules[url].state === 2) {
cn++;
}
if (!deps[url]) {
args.push(url);
deps[url] = "司徒正美"; //去重
}
}
});
modules[id] = {//创建一个对象,记录模块的加载情况与其他信息
id: id,
factory: factory,
deps: deps,
args: args,
state: 1
};
if (dn === cn) { //如果需要安装的等于已安装好的
fireFactory(id, args, factory); //安装到框架中
} else {
//放到检测队列中,等待checkDeps处理
loadings.unshift(id);
}
checkDeps();
};
每require一次，相当于把当前的用户回调当成一个不用加载的匿名模块，ID是随机生成，回调是否执行，要待到deps对象里面所有值都为2。
require里有三个重要方法：loadJSCSS，它用于转换ID为URL，后面再调用loadJS, loadCSS，或再调用 require 方法；fireFactory，就是执行用户回调，我们的最终目的；checkDeps，检测依赖是否都安装好，安装好就执行fireFactory。
function loadJSCSS(url, parent, ret, shim) {
//1. 特别处理mass|ready标识符
if (/^(mass|ready)$/.test(url)) {
return url;
}
//2. 转化为完整路径
if ($.config.alias[url]) {//别名机制
ret = $.config.alias[url];
if (typeof ret === "object") {
shim = ret;
ret = ret.src;
}
} else {
if (/^(\w+)(\d)?:.*/.test(url)) { //如果本来就是完整路径
ret = url;
} else {
parent = parent.substr(0, parent.lastIndexOf('/'));
var tmp = url.charAt(0);
if (tmp !== "." && tmp !== "/") { //相对于根路径
ret = basepath + url;
} else if (url.slice(0, 2) === "./") { //相对于兄弟路径
ret = parent + url.slice(1);
} else if (url.slice(0, 2) === "..") { //相对于父路径
var arr = parent.replace(/\/$/, "").split("/");
tmp = url.replace(/\.\.\//g, function() {
arr.pop();
return "";
});
ret = arr.join("/") + "/" + tmp;
} else if (tmp === "/") {
ret = parent + url;//相对于兄弟路径
} else {
$.error("不符合模块标识规则: " + url);
}
}
}
var src = ret.replace(/[?#].*/, ""),
ext;
if (/\.(css|js)$/.test(src)) {
ext = RegExp.$1;
}
if (!ext) { //如果没有后缀名,加上后缀名
src += ".js";
ext = "js";
}
//3. 开始加载JS或CSS
if (ext === "js") {
if (!modules[src]) { //如果之前没有加载过
modules[src] = {
id: src,
parent: parent,
exports: {}
};
if (shim) {//shim机制
require(shim.deps || "", function() {
loadJS(src, function() {
modules[src].state = 2;
modules[src].exports = typeof shim.exports === "function" ?
shim.exports() : window[shim.exports];
checkDeps();
});
});
} else {
loadJS(src);
}
}
return src;
} else {
loadCSS(src);
}
}
注意，上面的modules[src]是以完整路径做ID的，它对应的对象没有state属性，表示其正在加载中。
loadJS与loadCSS方法就比较纯粹了，不过loadJS会做个死链检测checkFail。
function loadJS(url, callback) {
//通过script节点加载目标模块
var node = DOC.createElement("script");
node.className = moduleClass; //让getCurrentScript只处理类名为moduleClass的script节点
node[W3C ? "onload" : "onreadystatechange"] = function() {
if (W3C || /loaded|complete/i.test(node.readyState)) {
//factorys里面装着define方法的工厂函数(define(id?,deps?, factory))
var factory = factorys.pop();
factory && factory.delay(node.src);
if (callback) {
callback();
}
if (checkFail(node, false, !W3C)) {
$.log("已成功加载 " + node.src, 7);
}
}
} ;
node.onerror = function() {
checkFail(node, true);
};
//插入到head的第一个节点前，防止IE6下head标签没闭合前使用appendChild抛错
node.src = url;
head.insertBefore(node, head.firstChild);
}
checkFail方法主要是用于开发调试。有3个参数。node——script节点，onError——是否为onerror触发，fuckIE——对应旧版本IE的hack。思路是，JavaScript文件从加载到解析到执行需要一个过程，在interact阶段，我们的JavaScript代码已经有些部分可以执行了，这时我们将模块对象的state改为1，如果还是undefined，我们就可识别它为死链。不过，此hack对不是以AMD定义的JavaScript模块无效，因为将state改1的逻辑是由define方法执行的。如果判定是死链，我们就把此节点移除。
function checkFail(node, onError, fuckIE) {
var id = node.src;//检测是否死链
node.onload = node.onreadystatechange = node.onerror = null;
if (onError || (fuckIE && !modules[id].state)) {
setTimeout(function() {
head.removeChild(node);
});
$.log("加载 " + id + " 失败" + onError + " " + (!modules[id].state), 7);
} else {
return true;
}
}
checkDeps方法会在用户加载模块之前及script.onload后各执行一次，检测模块的依赖情况，如果模块没有任何依赖或state都为2了，我们调用fireFactory方法。
function checkDeps() {
loop: for (var i = loadings.length, id; id = loadings[--i]; ) {
var obj = modules[id], deps = obj.deps;
for (var key in deps) {
if (hasOwn.call(deps, key) && modules[key].state !== 2) {
continue loop;
}
}
//如果deps是空对象或者其依赖的模块的状态都是2
if (obj.state !== 2) {
loadings.splice(i, 1);//必须先移除再安装，防止在IE下DOM树建完后手动刷新页面，会多次执行它
fireFactory(obj.id, obj.args, obj.factory);
checkDeps();//如果成功,则再执行一次，以防有些模块就差本模块没有安装好
}
}
}
历经千辛万苦，我们终于到达fireFactory方法。它的工作是从modules中收集各模块的返回值，执行factory, 完成模块的安装。
function fireFactory(id, deps, factory) {
for (var i = 0, array = [], d; d = deps[i++]; ) {
array.push(modules[d].exports);
}
var module = Object(modules[id]),
ret = factory.apply(global, array);
module.state = 2;
if (ret !== void 0) {
modules[id].exports = ret;
}
return ret;
}