時隔差不多兩個月，積累了許多改進，升級到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了。具體實現看文章最后的源碼。
有關我框架的介紹與用法可參看這里（翻牆，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