我的模块加载系统 v6
模块系统是我框架的核心模块的一部分,与domReady彻底地整合在一起。当然核心模块还提供了其他常用方法,如数组化,类型判定,简单的事件绑定...本版本主要是对类型判定进行优化与重写模块加载,以更优雅的方式处置循环依赖的问题。
(function(global,DOC){ var _dom = global.dom, hash = "#", namespace = escape(DOC.URL.split(hash)[0]), HEAD = DOC.head || DOC.getElementsByTagName("head")[0], class2type = { "[object HTMLDocument]" : "Document", "[object HTMLCollection]" : "NodeList", "[object StaticNodeList]" : "NodeList", "[object IXMLDOMNodeList]": "NodeList", "[object DOMWindow]" : "Window" , "null" : "Null" , "NaN" : "NaN" , "undefined" : "Undefined" }, toString = class2type.toString; /** * 糅杂,为一个对象添加更多成员 * @param {Object} target 目标对象 * @param {Object} source 属性包 * @param {Boolean|undefined} override * @return {Object} 目标对象 */ function mix(target, source, override) { var key, ride = (override === void 0) || override; for (key in source) { if (ride || !(key in target)) { target[key] = source[key]; } } return target; } /** * @class dom * dom Framework拥有两个命名空间, * 第一个是escape(DOC.URL.split("#")[0]),根据页面的地址动态生成 * 第二个是dom,我们可以使用别名机制重写它 * @namespace dom */ var dom = function(expr,context){ if(typeof expr === "function"){ dom.ready(expr, true); }else{ if(!dom.fn) throw "must load the 'node' module!" return new dom.fn.init(expr,context); } } mix(dom,{ uuid:1, HTML:DOC.documentElement, HEAD:HEAD, rword:/[^, ]+/g, rreadystate: /loaded|complete|undefined/i, "@name":"dom", "@debug":true, "@emitter": DOC.dispatchEvent ? "addEventListener" : "attachEvent", /** * 别名机制(相当于jquery的noConflict) * @param {String} name 新的命名空间 */ exports: function(name) { _dom && (global.dom = _dom); name = name || dom["@name"]; dom["@name"] = name ; global[name] = global[namespace] = this; }, /** * 数组化 * @param {ArrayLike} nodes 要处理的类数组对象 * @param {Number} start 可选。要抽取的片断的起始下标。如果是负数,从后面取起 * @param {Number} end 可选。规定从何处结束选取 * @return {Array} */ slice: function (nodes, start, end) { for(var i = 0,n = nodes.length, result = []; i < n; i++){ result[i] = nodes[i]; } if (arguments.length > 1) { return result.slice(start , (end || result.length)); } else { return result; } }, /** * curry化 * @param {Any} a * @return {Function} 新函数 */ K:function (a) { return function() { return a; }; }, /** * 用于取得数据的类型或判定数据的类型 * @param {Any} obj 要检测的东西 * @param {String} str 要比较的类型 * @return {String|Boolean} */ type : function(obj, str){ var result = class2type[ (obj == null || obj !== obj )? String(obj) : toString.call(obj) ] || obj.nodeName || hash; if( result.charAt(0) === hash){//兼容旧式浏览器与处理个别情况,如window.opera if(obj.window==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 if(obj.open && obj.send ){ result = "XMLHttpRequest"; }else{ result = toString.call(obj).slice(8,-1); } } if(str){ return str === result; } return result; }, /** * 用于调试 * @param {String} s */ log:function(s){ global.console && global.console.log(s); }, /** * 生成键值统一的对象,用于高速化判定 * @param {Array} array * @param {Number} val 可选,默认为1 * @return {Object} */ oneObject : function(array, val){ if(typeof array == "string"){ array = array.match(dom.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; } }); "Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList,XMLHttpRequest".replace(dom.rword,function(name){ class2type[ "[object " + name + "]" ] = name; }); // http://wp.moooori.com/archives/1911 var rmodule = /([^(\s]+)\(?([^)]*)\)?/, // rreadystate = /loaded|complete|undefined/i, method = DOC.dispatchEvent ? "onload" : "onreadystatechange", stack = [],//用于放置负回调 checks = [],//用于放置正向回调或模块本身的wrapper函数 status = {};//用于记录每个模块加载状态0 未注册 1 已注册 2 已加载 3已执行 /** * 用于模拟opera的script onerror * http://d.hatena.ne.jp/NeoCat/20110206/1296934235 * @param {String} name 模块名 * @param {String} url 模块的路径 * @param {Element} node 为加载这个模块临时生成的script节点 */ function fixOperaError(name, url, node){ var iframe = DOC.createElement("iframe"); var code = '<script src="'+dom.baseURL+'"><\/script>'+ '<script src="'+url+'" onload="this.ownerDocument.x = 1"><\/script>'; iframe.style.display = "none"; HEAD.appendChild(iframe); var d = iframe.contentDocument; iframe.onload = function(){ if(d.x == void 0){ removeScript(name, node, true); } iframe.onload = null;//opera无法在iframe被事件绑定时被移除 HEAD.removeChild(this); }; try{ d.write(code); d.close(); }catch(e){}; } //执行并移除所有依赖都具备的模块或回调 function resolveCallbacks(){ for(var i = 0, obj; i < checks.length; i++){ obj = checks[i]; for(var name in status){ if(status[name] == 3 && obj.deps["@"+name]){ delete obj.deps["@"+name]; obj.length--; dom["@debug"] && dom.log(obj.length+" "+name); } } if(!obj.length){ obj.callback() checks.splice(i--,1); } } } /** * 为加载模块而临时生成一个script节点 * @param {String} name 模块名 * @param {String} url 模块的路径 */ function appendScript(name, url){ var node = DOC.createElement("script"); url = url || dom.basePath +"/"+ name + ".js" + (dom.DEBUG ? "?t="+new Date : ""); node.charset = "utf-8"; node.async = true; node.onerror = function(){ removeScript(name, this, true); } node[method] = function(){ if (dom.rreadystate.test(this.readyState) ){ for(var i =0 ; i < checks.length ;i++){ resolveCallbacks() } removeScript(name, this ); } } node.src = url+"?timestamp="+(+new Date); global.opera && fixOperaError(name, url, node); HEAD.insertBefore(node,HEAD.firstChild); } /** * 移除临时生成的script节点 * @param {String} name 模块名 * @param {Element} node 为加载这个模块临时生成的script节点 * @param {Boolean} error 是否加载失败 */ function removeScript(name, node, error){ var parent = node.parentNode; if(parent && parent.nodeType === 1){ if(error || status[name] === 1){ dom.stack('dom.log("fail to load module [ '+name+' ]")'); dom.stack(true);//打印错误堆栈 } if (node.clearAttributes) { node.clearAttributes(); } else { node[method] = node.onerror = null; } parent.removeChild(node); } } mix(dom, { mix:mix, //绑定事件(简化版) bind : DOC.dispatchEvent ? function(el, type, fn, phase){ el.addEventListener(type,fn, phase); } : function(el, type, fn){ el.attachEvent("on"+type, function(){ fn.call(el,event); }); }, stack:function(fn){ if(fn === true){ while(fn = stack.pop()){ fn(); } }else if(typeof fn === "string"){ stack.push(new Function(fn)); }else if(typeof fn === "function"){ stack.push(fn); } }, /** * <a href="http://www.cnblogs.com/rubylouvre/archive/2011/02/10/1950940.html">核心模块所在路径</a> * @property * @type String */ basePath:(function(url, scripts, node){ scripts = DOC.getElementsByTagName("script"); node = scripts[scripts.length - 1] url = node.hasAttribute ? node.src : node.getAttribute('src', 4); dom.baseURL = url; return url.substr( 0, url.lastIndexOf('/')); })(), /** * 请求模块 * @param {String|Array} deps 依赖列表,如果是字符串请用逗号隔开,如果要指定具体路径请写到小括号中 * @param {Function} module 正向回调 * @param {Function} errback 负向回调 * @param {Boolean} ready 是否延迟到DOM树建完才执行回调函数 */ require:function(deps,callback,errback){ var names = []; (deps +"").replace(dom.rword,function(url,name,match){ match = url.match(rmodule); name = match[1]; if(!status[name]){ //防止重复生成节点与请求 status[name] = 1; if(name !== "ready"){ appendScript(name,match[2]);//加载JS文件 dom.stack(errback);//压入错误堆栈 } } if(!names["@"+name]){//防止"node,oop,node"的情况 names.push(name); names["@"+name] = 1; } }); this.provide(names,callback); }, /** * 定义模块 * @param {String} name 模块名 * @param {String} dependList 依赖列表 * @param {Function} module 模块本身 */ define:function(name,deps,callback){ if(typeof deps == "function"){//处理只有两个参数的情况 callback = deps; deps = ""; } status[name] = 2; function wrap(){ status[name] = 3; //这里必须把已添加了新能力的dom命名空间对象传入去,放便其他模块第一时间能使用这些新能力 callback(); } wrap._name = name; //如果是空字符串则置换为空数组 this.require(deps,wrap); }, /** * 装配模块 * @param {Array} array 模块列表 * @param {Function} callback 回调函数 */ provide:function(names,callback){ checks.unshift({ name:callback._name || "", callback:callback, deps:names, length:names.length }); } }); /** * domReady机制 * @param {Function} fn 回调函数 * @param {Boolean} more 是否加载指定的模块 */ var Ready = dom.ready = function(fn){ if ( Ready.list) { Ready.list.push( fn ); }else{ fn(); } }; Ready.list = []; function fireReady(){ if(Ready.list){ for(var i=0, fn;fn = Ready.list[i++];) fn(); status.ready = 3; delete Ready.list; } }; function doScrollCheck() { try { dom.HTML.doScroll("left"); fireReady(); } catch(e) { setTimeout( doScrollCheck, 0); } }; //开始判定页面的加载情况 if ( DOC.readyState === "complete" ) { fireReady(); }else { dom.bind(DOC, (DOC.dispatchEvent ? "DOMContentLoaded" : "readystatechange"), function(){ if (DOC.dispatchEvent || DOC.readyState === "complete") { fireReady(); } }); try { //http://bugs.jquery.com/ticket/4787 http://cmc3.cn/ //在IE6下,内嵌页面如果重设了document.domain,访问window.frameElement抛错, //但是经过多次try catch后,才能访问该值 var toplevel = global.frameElement == null; } catch(e) {}; if ( dom.HTML.doScroll && toplevel ) { doScrollCheck(); } } dom.exports(); })(this,this.document); //2011.7.11 //@开头的为私有的系统变量,防止人们直接调用 //dom.check改为dom["@emitter"] //dom.namespace改为dom["@name"] //去掉无用的dom.modules //优化exports方法
每个模块的定义如下(请确保模块名与文件名要一致):
(function(global,DOC){ var dom = global[escape(DOC.URL.split("#")[0])]; dom.define("class", "lang",function(){ dom.log("class模块") }); })(this,this.document);
使用:
//这里的回调函数会class模块加载后,并且待到domReady之后执行。 //http://www.cnblogs.com/rubylouvre/archive/2011/07/12/2104777.html by 司徒正美 dom.require("class,ready",function(){ alert(1000) });相关链接我的模块加载系统 v5
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年