我的模块加载系统 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
如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码


机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库