时隔差不多两个月,积累了许多改进,升级到v22。主要改进点如下:
现在详解一下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(/[?
#].*/, "");
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;
}
var
stack, e, i, node;
try
{
a.b.c();
//强制报错,以便捕获e.stack
}
catch
(e) {
stack = e.stack;
}
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属性
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无缝刷新页面支持======================
$.bind(global,
"popstate"
,
function
() {
NsKey = DOC.URL.replace(rmakeid,
""
);
$.exports();
});
$.exports($.config.nick + postfix);
//防止不同版本的命名空间冲突
//============================合并核心模块支持===========================
/*combine modules*/
}(self, self.document);
//为了方便在VS系列实现智能提示,把这里的this改成self或window