时隔差不多两个月，积累了许多改进，升级到v22。主要改进点如下：
- 进行瘦身，移除本地储存
- IE6789的HTML5新标签支持列表，添加一个 m标签
- loadJS内容方法，在动态插入script节点，发现最新的firefox做了些改动，如果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。
现在详解一下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
当前标签: mass
我的模块加载系统 v22 司徒正美 2013-01-22 21:31 阅读:660 评论:1
更好的清除文本选择 司徒正美 2013-01-21 23:13 阅读:972 评论:1
使用display:none有效减少回流造成的影响 司徒正美 2013-01-21 22:31 阅读:273 评论:0
mass ui在内存利用上的一些设计 司徒正美 2013-01-20 18:34 阅读:405 评论:0
我的MVVM框架 v3教程——流程绑定 司徒正美 2013-01-10 10:10 阅读:548 评论:0
mass Framework event模块 v9 司徒正美 2013-01-09 16:23 阅读:1257 评论:1
mass Framework lang模块v6 司徒正美 2013-01-08 15:36 阅读:521 评论:0
mass Framework spec模块v5 司徒正美 2013-01-06 01:19 阅读:835 评论:0
mass Framework data模块 v4 司徒正美 2013-01-02 15:05 阅读:500 评论:0
mass Framework data模块 v3 司徒正美 2012-12-30 20:22 阅读:1014 评论:0
mass Framework class模块 v11 司徒正美 2012-12-25 11:22 阅读:451 评论:0
mass Framework lang模块 v5 司徒正美 2012-12-25 11:16 阅读:451 评论:0
bootstrap源码学习与示例：bootstrap-popover 司徒正美 2012-12-24 18:09 阅读:647 评论:0
bootstrap源码学习与示例：bootstrap-tooltip 司徒正美 2012-12-24 16:28 阅读:560 评论:0
mass Framework attr模块 v3 司徒正美 2012-12-24 12:29 阅读:1206 评论:1
我的模块加载系统 v21 司徒正美 2012-12-18 11:12 阅读:1842 评论:2
我的MVVM框架 v3教程——todos例子 司徒正美 2012-12-17 15:08 阅读:1842 评论:7
我的MVVM框架 v3教程——集合处理 司徒正美 2012-12-17 14:17 阅读:445 评论:0
我的MVVM框架 v3教程——事件绑定与代理 司徒正美 2012-12-17 14:07 阅读:440 评论:0
我的MVVM框架 v3教程——类名切换 司徒正美 2012-12-17 13:36 阅读:452 评论:0
标签: mass