我的模块加载系统 v22
时隔差不多两个月，积累了许多改进，升级到v22。主要改进点如下：
- 进行瘦身，移除本地储存
- IE6789的HTML5新标签支持列表，添加一个 m标签
- loadJS内容方法，在动态插入script节点，发现最新的firefox Nightly做了些改动，如果head还没有解析完就插入节点，那么新script会触发onerror事件。补救措施，针对firefox使用html.insertBefore(node, head)。chrome不支持head.insertBefore(node, null)，第二参数必须是节点，因此firefox外浏览器统一使用 head.insertBefore(node, head.firstChild)。
- getCurrentScript方法进行增强，现在支持对chrome取正在解析的节点，详见源码。如此一来，除safari外，都能立即确认模块ID与script节点的对应关系。
- 修正parseURL转"mass.draggable"为url出错的BUG。
- 升级$.log，让它支持更古老的opera。
- 升级$.error，对异常进行包装，防止中文乱码。
现在详解一下getCurrentScript引入的新hack，利用e.stack截取正在解析的节点的src，从而得到节点。首先随便搞个错误，比如a.b.c()。在opera12的控制台下，我们通过try catch截获的输出如下：
getCurrentScript([arguments not available])@http://113.93.50.63/mass.js:424 <anonymous function: $.define>([arguments not available])@http://113.93.50.63/mass.js:606 @http://113.93.50.63/data.js:4
chrome为：
ReferenceError: a is not defined
at getCurrentScript (http://113.93.50.63/mass.js:403:13)
at window.define.$.define (http://113.93.50.63/mass.js:585:60)
at http://113.93.50.63/data.js:4:1
firefox为
getCurrentScript@http://113.93.50.63/mass.js:403 $.define@http://113.93.50.63/mass.js:585 @http://113.93.50.63/query.js:4
IE10为
ReferenceError: “a”未定义 at getCurrentScript (http://113.93.50.63/mass.js:403:13) at define (http://113.93.50.63/mass.js:585:9) at Global code (http://113.93.50.63/data.js:4:1)
因此，我们只要截取最后一个@或at ，与表示行号的数字前的冒号之间的URL就是正在解析的节点的src了。具体实现看文章最后的源码。
有关我框架的介绍与用法可参看这里（FQ，github）
加载器的使用可见v19的介绍，纯正的AMD用法，没有什么不同。
require("ready",function(){
/*待到domReady完成，执行回调*/
$.log("将日志打印到页面上",true)
})
源码
!
function(global, DOC) {// by 司徒正美
var $$ = global.$ //保存已有同名变量
var rmakeid = /(#.+|\W)/g; //用于处理掉href中的hash与所有特殊符号，生成长命名空间
var NsKey = DOC.URL.replace(rmakeid, ""); //长命名空间（字符串）
var NsVal = global[NsKey]; //长命名空间（mass对象）
var W3C = DOC.dispatchEvent //IE9开始支持W3C的事件模型与getComputedStyle取样式值
var html = DOC.documentElement; //HTML元素
var head = DOC.head || DOC.getElementsByTagName("head")[0]; //HEAD元素
var loadings = []; //正在加载中的模块列表
var parsings = []; //储存需要绑定ID与factory对应关系的模块（标准浏览器下，先parse的script节点会先onload）
var mass = 1; //当前框架的版本号
var postfix = ""; //用于强制别名
var cbi = 1e5; //用于生成回调函数的名字
var all = "lang_fix,lang,class,interact,data,support,query,support,node_fix,node,attr_fix,attr,css_fix,css,event_fix,event,ajax,fx"
var moduleClass = "mass" + (new Date - 0);
var class2type = {
"[object HTMLDocument]": "Document",
"[object HTMLCollection]": "NodeList",
"[object StaticNodeList]": "NodeList",
"[object IXMLDOMNodeList]": "NodeList",
"[object DOMWindow]": "Window",
"[object global]": "Window",
"null": "Null",
"NaN": "NaN",
"undefined": "Undefined"
}
var toString = class2type.toString,
basepath
/**
* 命名空间
* @namespace 可变的短命名空间
* @param {String|Function} expr CSS表达式或函数
* @param {Node|NodeList|Array|Mass} context ？ 上下文对象
* @return {Mass}
*/
function $(expr, context) { //新版本的基石
if($.type(expr, "Function")) { //注意在safari下,typeof nodeList的类型为function,因此必须使用$.type
return $.require(all + ",ready", expr);
} else {
if(!$.fn) $.error("必须加载node模块");
return new $.fn.init(expr, context);
}
}
//多版本共存
if(typeof NsVal !== "function") {
NsVal = $; //公用命名空间对象
NsVal.uuid = 1;
}
if(NsVal.mass !== mass) {
NsVal[mass] = $; //保存当前版本的命名空间对象到公用命名空间对象上
if(NsVal.mass || ($$ && $$.mass == null)) {
postfix = (mass + "").replace(/\D/g, ""); //是否强制使用多库共存
}
} else {
return;
}
/**
* 糅杂，为一个对象添加更多成员
* @param {Object} receiver 接受者
* @param {Object} supplier 提供者
* @return {Object} 目标对象
* @api public
*/
var has = Object.prototype.hasOwnProperty
function mix(receiver, supplier) {
var args = Array.apply([], arguments),
i = 1,
key, //如果最后参数是布尔，判定是否覆写同名属性
ride = typeof args[args.length - 1] == "boolean" ? args.pop() : true;
if(args.length === 1) { //处理$.mix(hash)的情形
receiver = !this.window ? this : {};
i = 0;
}
while((supplier = args[i++])) {
for(key in supplier) { //允许对象糅杂，用户保证都是对象
if(has.call(supplier, key) && (ride || !(key in receiver))) {
receiver[key] = supplier[key];
}
}
}
return receiver;
}
//为此版本的命名空间对象添加成员
mix($, {
html: html,
head: head,
mix: mix,
rword: /[^, ]+/g,
rmapper: /(\w+)_(\w+)/g,
mass: mass,
//大家都爱用类库的名字储存版本号，我也跟风了
"@bind": W3C ? "addEventListener" : "attachEvent",
/**
* 将内部对象挂到window下，此时可重命名，实现多库共存
* @param {String} name
* @return {Mass}
* @api public
*/
exports: function(name) {
$$ && (global.$ = $$); //多库共存
name = name || $.config.nick; //取得当前简短的命名空间
$.config.nick = name;
global[NsKey] = NsVal;
return global[name] = this;
},
/**
* 数组化
* @param {ArrayLike} nodes 要处理的类数组对象
* @param {Number} start 可选。要抽取的片断的起始下标。如果是负数，从后面取起
* @param {Number} end 可选。规定从何处结束选取
* @return {Array}
* @api public
*/
slice: W3C ?
function(nodes, start, end) {
return parsings.slice.call(nodes, start, end);
} : function(nodes, start, end) {
var ret = [],
n = nodes.length;
if(end === void 0 || typeof end == "number" && isFinite(end)) {
start = parseInt(start, 10) || 0;
end = end == void 0 ? n : parseInt(end, 10);
if(start < 0) {
start += n;
}
if(end > n) {
end = n;
}
if(end < 0) {
end += n;
}
for(var i = start; i < end; ++i) {
ret[i - start] = nodes[i];
}
}
return ret;
},
/**
* 用于建立一个从元素到数据的关联，应用于事件绑定，元素去重
* @param {Any} obj
* @return {Number} 一个UUID
*/
getUid: W3C ?
function(obj) { //IE9+,标准浏览器
return obj.uniqueNumber || (obj.uniqueNumber = NsVal.uuid++);
} : function(obj) {
if(obj.nodeType !== 1) { //如果是普通对象，文档对象，window对象
return obj.uniqueNumber || (obj.uniqueNumber = NsVal.uuid++);
} //注：旧式IE的XML元素不能通过el.xxx = yyy 设置自定义属性
var uid = obj.getAttribute("uniqueNumber");
if(!uid) {
uid = NsVal.uuid++;
obj.setAttribute("uniqueNumber", uid);
}
return +uid; //确保返回数字
},
/**
* 绑定事件(简化版)
* @param {Node|Document|window} el 触发者
* @param {String} type 事件类型
* @param {Function} fn 回调
* @param {Boolean} phase ? 是否捕获，默认false
* @return {Function} fn 刚才绑定的回调
*/
bind: W3C ?
function(el, type, fn, phase) {
el.addEventListener(type, fn, !! phase);
return fn;
} : function(el, type, fn) {
el.attachEvent && el.attachEvent("on" + type, fn);
return fn;
},
/**
* 卸载事件(简化版)
* @param {Node|Document|window} el 触发者
* @param {String} type 事件类型
* @param {Function} fn 回调
* @param {Boolean} phase ? 是否捕获，默认false
*/
unbind: W3C ?
function(el, type, fn, phase) {
el.removeEventListener(type, fn || $.noop, !! phase);
} : function(el, type, fn) {
if(el.detachEvent) {
el.detachEvent("on" + type, fn || $.noop);
}
},
/**
* 用于取得数据的类型（一个参数的情况下）或判定数据的类型（两个参数的情况下）
* @param {Any} obj 要检测的东西
* @param {String} str ? 要比较的类型
* @return {String|Boolean}
* @api public
*/
type: function(obj, str) {
var result = class2type[(obj == null || obj !== obj) ? obj : toString.call(obj)] || obj.nodeName || "#";
if(result.charAt(0) === "#") { //兼容旧式浏览器与处理个别情况,如window.opera
//利用IE678 window == document为true,document == window竟然为false的神奇特性
if(obj == obj.document && obj.document != obj) {
result = "Window"; //返回构造器名字
} else if(obj.nodeType === 9) {
result = "Document"; //返回构造器名字
} else if(obj.callee) {
result = "Arguments"; //返回构造器名字
} else if(isFinite(obj.length) && obj.item) {
result = "NodeList"; //处理节点集合
} else {
result = toString.call(obj).slice(8, -1);
}
}
if(str) {
return str === result;
}
return result;
},
/**
* 将调试信息打印到控制台或页面
* $.log(str, page, level )
* @param {Any} str 用于打印的信息，不是字符串将转换为字符串
* @param {Boolean} page ? 是否打印到页面
* @param {Number} level ? 通过它来过滤显示到控制台的日志数量。
* 0为最少，只显示最致命的错误；7，则连普通的调试消息也打印出来。
* 显示算法为 level <= $.config.level。
* 这个$.config.level默认为9。下面是level各代表的含义。
* 0 EMERGENCY 致命错误,框架崩溃
* 1 ALERT 需要立即采取措施进行修复
* 2 CRITICAL 危急错误
* 3 ERROR 异常
* 4 WARNING 警告
* 5 NOTICE 通知用户已经进行到方法
* 6 INFO 更一般化的通知
* 7 DEBUG 调试消息
* @return {String}
* @api public
*/
log: function(str, page, level) {
for(var i = 1, show = true; i < arguments.length; i++) {
level = arguments[i]
if(typeof level == "number") {
show = level <= $.config.level
} else if(level === true) {
page = true;
}
}
if(show) {
if(page === true) {
$.require("ready", function() {
var div = DOC.createElement("pre");
div.className = "mass_sys_log";
div.innerHTML = str + ""; //确保为字符串
DOC.body.appendChild(div);
});
} else if(global.console) {
global.console.log(str);
}
}
return str;
},
/**
* 生成键值统一的对象，用于高速化判定
* @param {Array|String} array 如果是字符串，请用","或空格分开
* @param {Number} val ? 默认为1
* @return {Object}
*/
oneObject: function(array, val) {
if(typeof array == "string") {
array = array.match($.rword) || [];
}
var result = {},
value = val !== void 0 ? val : 1;
for(var i = 0, n = array.length; i < n; i++) {
result[array[i]] = value;
}
return result;
},
/**
* 配置框架
* @param {Object} settings 配置对象
* @return {Mass}
*/
config: function(settings) {
var kernel = $.config;
for(var p in settings) {
if(!settings.hasOwnProperty(p)) continue;
var prev = kernel[p];
var curr = settings[p];
if(prev && p === "alias") {
for(var c in curr) {
if(curr.hasOwnProperty(c)) {
var prevValue = prev[c];
var currValue = curr[c];
if(prevValue && prev !== curr) {
$.error(c + "不能重命名");
}
prev[c] = currValue;
}
}
} else {
kernel[p] = curr;
}
}
return this
},
//一个空函数
noop: function() {},
/**
* 抛出错误,方便调试
* @param {String} str
* @param {Error} e ? 具体的错误对象构造器
* EvalError: 错误发生在eval()中
* SyntaxError: 语法错误,错误发生在eval()中,因为其它点发生SyntaxError会无法通过解释器
* RangeError: 数值超出范围
* ReferenceError: 引用不可用
* TypeError: 变量类型不是预期的
* URIError: 错误发生在encodeURI()或decodeURI()中
*/
error: function(str, e) {
throw new(e || Error)(str);
}
});
(function(scripts) {
var cur = scripts[scripts.length - 1],
url = (cur.hasAttribute ? cur.src : cur.getAttribute("src", 4)).replace(/[?#].*/, ""),
kernel = $.config;
basepath = kernel.base = url.substr(0, url.lastIndexOf("/")) + "/";
kernel.nick = cur.getAttribute("nick") || "$";
kernel.alias = {};
kernel.level = 9;
})(DOC.getElementsByTagName("script"));
"Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList,Error".replace($.rword, function(name) {
class2type["[object " + name + "]"] = name;
});
/**
* 将模块标识转换为URL
* @param {String} url 模块标识
* @param {String} parent 父路径
* @return {Array} ret [url, type]
* @api private
*/
function parseURL(url, parent, ret) {
//[]里面，不是开头的-要转义，因此要用/^[-a-z0-9_$]{2,}$/i而不是/^[a-z0-9_-$]{2,}
//别名至少两个字符；不用汉字是避开字符集的问题
if(/^(mass|ready)$/.test(url)) { //特别处理ready标识符
return [url, "js"];
}
if(/^[-a-z0-9_$]{2,}$/i.test(url) && $.config.alias[url]) {
ret = $.config.alias[url];
} else {
parent = parent.substr(0, parent.lastIndexOf('/'))
if(/^(\w+)(\d)?:.*/.test(url)) { //如果用户路径包含协议
ret = url
} else {
var tmp = url.charAt(0);
if(tmp !== "." && tmp != "/") { //相对于根路径
ret = basepath + url;
} else if(url.slice(0, 2) == "./") { //相对于兄弟路径
ret = parent + url.substr(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 ext = "js";
tmp = ret.replace(/[?#].*/, "");
if(/\.(css|js)$/.test(tmp)) { // 处理"http://113.93.55.202/mass.draggable"的情况
ext = RegExp.$1;
}
if(ext != "css" && tmp == ret && !/\.js$/.test(ret)) { //如果没有后缀名会补上.js
ret += ".js";
}
return [ret, ext];
}
//============================加载系统===========================
var modules = $.modules = {
ready: {
exports: $
},
mass: {
state: 2,
exports: $
}
};
function getCurrentScript() {
//取得正在解析的script节点
if(DOC.currentScript) { //firefox 4+
return DOC.currentScript.src;
}
// 参考 https://github.com/samyk/jiagra/blob/master/jiagra.js
var stack, e, i, node;
try {
a.b.c(); //强制报错,以便捕获e.stack
} catch(e) {//safari的错误对象只有line,sourceId,sourceURL
stack = e.stack;
if(!stack && window.opera){
//opera 9没有e.stack,但有e.Backtrace,但不能直接取得,需要对e对象转字符串进行抽取
stack = (String(e).match(/of linked script \S+/g) || []).join(" ");
}
}
if(stack) {
stack = stack.split( /[@ ]/g).pop();//取得最后一行,最后一个空格或@之后的部分
stack = stack[0] == "(" ? stack.slice(1,-1) : stack;
return stack.replace(/(:\d+)?:\d+$/i, "");//去掉行号与或许存在的出错字符起始位置
}
var nodes = head.getElementsByTagName("script"); //只在head标签中寻找
for(i = 0; node = nodes[i++];) {
if(node.className == moduleClass && node.readyState === "interactive") {
return node.className = node.src;
}
}
}
function checkCycle(deps, nick) {
//检测是否存在循环依赖
for(var id in deps) {
if(deps[id] == "司徒正美" && modules[id].state != 2 && (id == nick || checkCycle(modules[id].deps, nick))) {
return true;
}
}
}
function checkDeps() {
//检测此JS模块的依赖是否都已安装完毕,是则安装自身
loop: for(var i = loadings.length, id; id = loadings[--i];) {
var obj = modules[id],
deps = obj.deps;
for(var key in deps) {
if(deps.hasOwnProperty(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();
}
}
}
function checkFail(node, error) {
//检测是否死链
var id = node.src;
node.onload = node.onreadystatechange = node.onerror = null;
if(error || !modules[id].state) {
setTimeout(function() {
head.removeChild(node);
});
$.log("加载 " + id + " 失败" + error + " " + (!modules[id].state), 7);
} else {
return true;
}
}
function loadJS(url) {
//通过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)) {
//mass Framework会在_checkFail把它上面的回调清掉，尽可能释放回存，尽管DOM0事件写法在IE6下GC无望
var factory = parsings.pop();
factory && factory.delay(node.src)
if(checkFail(node)) {
$.log("已成功加载 " + node.src, 7);
}
}
}
node.onerror = function() {
checkFail(node, true)
}
node.src = url; //插入到head的第一个节点前，防止IE6下head标签没闭合前使用appendChild抛错
if(window.netscape) { //这也避开了IE6下的自闭合base标签引起的BUG
html.insertBefore(node, head); //在最新的firefox下,如果父节点还没有完成不能插入新节点
} else {
head.insertBefore(node, head.firstChild); //chrome下第二个参数不能为null
}
$.log("正准备加载 " + node.src, 7) //更重要的是IE6下可以收窄getCurrentScript的寻找范围
}
function loadCSS(url) {
//通过link节点加载模块需要的CSS文件
var id = url.replace(rmakeid, "");
if(!DOC.getElementById(id)) {
var node = DOC.createElement("link");
node.rel = "stylesheet";
node.href = url;
node.id = id;
head.insertBefore(node, head.firstChild);
}
}
/**
* 请求模块
* @param {String|Array} list 依赖列表
* @param {Function} factory 模块工厂
* @param {String} parent ? 父路径，没有使用种子模块的根路径或配置项
* @api public
*/
window.require = $.require = function(list, factory, parent) {
// 用于检测它的依赖是否都为2
var deps = {},
// 用于依赖列表中的模块的返回值
args = [],
// 需要安装的模块数
dn = 0,
// 已安装完的模块数
cn = 0,
id = parent || "cb" + (cbi++).toString(32);
parent = parent || basepath
String(list).replace($.rword, function(el) {
var array = parseURL(el, parent),
url = array[0];
if(array[1] == "js") {
dn++;
if(!modules[url]) {
modules[url] = {
id: url,
parent: parent,
exports: {}
};
loadJS(url);
} else if(modules[url].state === 2) {
cn++;
}
if(!deps[url]) {
args.push(url);
deps[url] = "司徒正美"; //去重
}
} else if(array[1] === "css") {
loadCSS(url);
}
});
//创建或更新模块的状态
modules[id] = {
id: id,
factory: factory,
deps: deps,
args: args,
state: 1
}
if(dn === cn) { //如果需要安装的等于已安装好的
fireFactory(id, args, factory); //装配到框架中
return checkDeps();
}
//在正常情况下模块只能通过_checkDeps执行
loadings.unshift(id);
}
/**
* 请求模块
* @param {String} id ? 模块ID
* @param {Array} deps ? 依赖列表
* @param {Function} factory 模块工厂
* @api public
*/
window.define = $.define = function(id, deps, factory) { //模块名,依赖列表,模块本身
var args = $.slice(arguments);
if(typeof id == "string") {
var _id = args.shift();
}
if(typeof args[0] === "boolean") { //用于文件合并, 在标准浏览器中跳过补丁模块
if(args[0]) {
return;
}
args.shift();
}
if(typeof args[0] == "function") {
args.unshift([]);
} //上线合并后能直接得到模块ID,否则寻找当前正在解析中的script节点的src作为模块ID
//但getCurrentScript方法只对IE6-10,FF4+有效,其他使用onload+delay闭包组合
id = modules[id] && modules[id].state == 2 ? _id : getCurrentScript();
factory = args[1];
factory.id = _id; //用于调试
factory.delay = function(id) {
args.push(id);
if(checkCycle(modules[id].deps, id)) {
$.error(id + "模块与之前的某些模块存在循环依赖");
}
delete factory.delay; //释放内存
require.apply(null, args); //0,1,2 --> 1,2,0
}
if(id) {
factory.delay(id, args);
} else { //先进先出
parsings.push(factory);
}
}
$.require.amd = modules;
/**
* 请求模块从modules对象取得依赖列表中的各模块的返回值，执行factory, 完成模块的安装
* @param {String} id 模块ID
* @param {Array} deps 依赖列表
* @param {Function} factory 模块工厂
* @api private
*/
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;
}
all.replace($.rword, function(a) {
$.config.alias["$" + a] = basepath + a + ".js";
});
//============================domReady机制===========================
var readyFn, ready = W3C ? "DOMContentLoaded" : "readystatechange";
function fireReady() {
modules.ready.state = 2;
checkDeps();
if(readyFn) {
$.unbind(DOC, ready, readyFn);
}
fireReady = $.noop; //隋性函数，防止IE9二次调用_checkDeps
}
function doScrollCheck() {
try { //IE下通过doScrollCheck检测DOM树是否建完
html.doScroll("left");
fireReady();
} catch(e) {
setTimeout(doScrollCheck);
}
};
//在firefox3.6之前，不存在readyState属性
//http://www.cnblogs.com/rubylouvre/archive/2012/12/18/2822912.html
if(DOC.readyState == null) {
var readyState = DOC.readyState = "loading";
}
if(DOC.readyState === "complete") {
fireReady(); //如果在domReady之外加载
} else {
$.bind(DOC, ready, readyFn = function() {
if(W3C || DOC.readyState === "complete") {
fireReady();
if(readyState) { //IE下不能改写DOC.readyState
DOC.readyState = "complete";
}
}
});
if(html.doScroll && self.eval === parent.eval) doScrollCheck();
}
//============================HTML5新标签支持===========================
//IE6789必须以硬编码形式把mass.js写在页面才生效
global.VBArray && ("abbr,article,aside,audio,bdi,canvas,data,datalist,details,figcaption,figure,footer," + "header,hgroup,m,mark,meter,nav,output,progress,section,summary,time,video").replace($.rword, function(tag) {
DOC.createElement(tag);
});
//============================HTML5无缝刷新页面支持======================
//https://developer.mozilla.org/en/DOM/window.onpopstate
$.bind(global, "popstate", function() {
NsKey = DOC.URL.replace(rmakeid, "");
$.exports();
});
$.exports($.config.nick + postfix); //防止不同版本的命名空间冲突
//============================合并核心模块支持===========================
/*combine modules*/
}(self, self.document); //为了方便在VS系列实现智能提示,把这里的this改成self或window