javascript【AMD模块加载器】浅析V2(整合DOM ready)
如果你还不了解AMD模块加载器，可以先看看我的前一篇文章，之后又在其基础上做了一点小修改。
主要是修改了检测循环依赖的函数，不在遍历对象。
第二就是加入了模块配置方法。以及将lynxcat更名为lynx。
还有就是为模块加入了dom ready机制。
var ready = function (){ var isReady = false; var readyList = []; var ready = function(fn){ if(isReady){ fn(); }else{ readyList.push(fn); } }; var fireReady = function(){ for(var i = 0,len = readyList.length; i < len; i++){ readyList[i](); } readyList = []; lynx.modules.ready.state = 2; checkLoadReady(); }; var bindReady = function(){ if(isReady){ return; } isReady=true; fireReady(); if(doc.removeEventListener){ doc.removeEventListener("DOMContentLoaded",bindReady,false); }else if(doc.attachEvent){ doc.detachEvent("onreadystatechange", bindReady); } }; if( doc.readyState === "complete" ) { bindReady(); }else if(doc.addEventListener){ doc.addEventListener("DOMContentLoaded", bindReady, false); }else if(doc.attachEvent){ doc.attachEvent("onreadystatechange", function(){ if((/loaded|complete/).test(doc.readyState)){ bindReady(); } }); (function(){ if(isReady){ return; } var node = new Image(); var timer = setInterval(function(){ try{ isReady || node.doScroll('left'); node = null; }catch(e){ return; } clearInterval(timer); bindReady(); }, 16); }()); } return ready; }()
关于ready方法，其实很简单。 首先是提供一个方法，把用户的ready的方法存入一个callbacks数组里。 然后在检测到dom ready的时候执行callbacks里面的数组，如果是在dom ready之后传入ready的callback就直接执行。 具体检测dom ready就需要看浏览器的支持了，如果是支持标准w3c规范的浏览器DOMContentLoaded 方法，IE则支持onreadystatechange方法。 还可以利用的一个特性就是 doScroll要求最初的文档被完全加载。否则就会出错。 这样一来我们就可以用setInterval方法来不断的检测doScroll是否出错，如果不出错。那么代表文档已经加载完成了。 总体来说ready方法还是很简单的。
然后说说如何把ready整合到模块中。 首先我想到的是，在require中判断是否已经dom ready如果没有就把当前的require传入到ready方法。 也就是说，这个方法是让页面ready完成后在加载模块。 然后这样有一个坏处就是没有充分利用dom ready的这段时间。 后来看了一下别人的实现，又自己思索了一下。 决定把ready作为一个AMD模块放入到框架中。这样一来就就可以用模块加载的原理来处理了。 如果某个模块依赖ready，就一定要在ready之后才执行它的factory方法。 具体实现的方式是将ready作为一个基准模块写入到modules中，不过它不用被加载。而是在检测dom ready之后就将modules中的ready状态改为2。并检测一下是否所有模块都被加载完毕。这样一来就可以将dom加载的这段时间用来加载模块了。
然而这样一来就又有一个新的bug在里面，就是如果用户真的想加载一个ready方法的时候就会被误认为是dom ready。 关于这点目前还没想到什么办法，不过用户可以通过写url而不是写ready这样的名字来加载。 在下一版的加载器中我会加入部模块自动加前缀来解决这个问题。还有会加入控制并发数。以及对模块合并的简单说明。
以下是全部源码。
View Code
;(function(win, undefined){ win = win || window; var doc = win.document || document, head = doc.head || doc.getElementsByTagName("head")[0], hasOwn = Object.prototype.hasOwnProperty, slice = Array.prototype.slice, configure = {}, basePath = (function(nodes){ var node, url; if(configure.baseUrl){ node = nodes[nodes.length - 1]; url = (node.hasAttribute ? node.src : node.getAttribute("src", 4)).replace(/[?#].*/, ""); }else{ url = configure.baseUrl; } return url.slice(0, url.lastIndexOf('/') + 1); }(doc.getElementsByTagName('script'))), _lynx = win.lynx; /** * 框架入口 */ function lynx(exp, context){ return new lynx.prototype.init(exp, context); } lynx.prototype = { constructor : lynx, /** * 初始化 * @param {All} expr * @param {All} context * @return {Object} * */ init : function(expr, context){ if(typeof expr === 'function'){ require('ready', expr); } //TODO } } lynx.fn = lynx.prototype.init.prototype = lynx.prototype; /** * 继承方法 */ lynx.fn.extend = lynx.extend = function(){ var args = slice.call(arguments), deep = typeof args[args.length - 1] == 'bollean' ? args.pop() : false; if(args.length == 1){ args[1] = args[0]; args[0] = this; args.length = 2; } var target = args[0], i = 1, len = args.length, source, prop; for(; i < len; i++){ source = args[i]; for(prop in source){ if(hasOwn.call(source, prop)){ if(typeof source[prop] == 'object'){ target[prop] = {}; this.extend(target[prop],source[prop]); }else{ if(target[prop] === undefined){ target[prop] = source[prop]; }else{ deep && (target[prop] = source[prop]); } } } } } }; /** * mix * @param {Object} target 目标对象 * @param {Object} source 源对象 * @return {Object} 目标对象 */ lynx.mix = function(target, source){ if( !target || !source ) return; var args = slice.call(arguments), i = 1, override = typeof args[args.length - 1] === "boolean" ? args.pop() : true, prop; while ((source = args[i++])) { for (prop in source) { if (hasOwn.call(source, prop) && (override || !(prop in target))) { target[prop] = source[prop]; } } } return target; }; lynx.mix(lynx, { modules : { //保存加载模块 ready : { state : 1, exports : lynx } }, moduleCache : {}, //正在加载的队列缓存 loadings : [], //getCurrentScript取不到值的时候用来存储当前script onload的回调函数数组 /** * parse module * @param {String} id 模块名 * @param {String} basePath 基础路径 * @return {Array} */ parseModule : function(id, basePath){ var url, result, ret, dir, paths, i, len, ext, modname, protocol = /^(\w+\d?:\/\/[\w\.-]+)(\/(.*))?/; if(result = protocol.exec(id)){ url = id; paths = result[3] ? result[3].split('/') : []; }else{ result = protocol.exec(basePath); url = result[1]; paths = result[3] ? result[3].split('/') : []; modules = id.split('/'); paths.pop(); for(i = 0, len = modules.length; i < len; i++){ dir = modules[i]; if(dir == '..'){ paths.pop(); }else if(dir !== '.'){ paths.push(dir); } } url = url + '/' + paths.join('/'); } modname = paths[paths.length - 1]; ext = modname.slice(modname.lastIndexOf('.')); if(ext != '.js'){ url = url + '.js'; }else{ modname = modname.slice(0, modname.lastIndexOf('.')); } if(modname == ''){ modname = url; } return [modname, url]; }, /** * get uuid * @param {String} prefix * @return {String} uuid */ guid : function(prefix){ prefix = prefix || ''; return prefix + (+new Date()) + String(Math.random()).slice(-8); }, /** * noop 空白函数 */ noop : function(){ }, /** * error * @param {String} str */ error : function(str){ throw new Error(str); }, /** * @return {Object} lynx */ noConflict : function(deep) { if ( window.lynx === lynx ) { window.lynx = _lynx; } return lynx; } }); //================================ 模块加载 ================================ /** * 模块加载方法 * @param {String|Array} ids 需要加载的模块 * @param {Function} callback 加载完成之后的回调 * @param {String} parent 父路径 */ win.require = lynx.require = function(ids, callback, parent){ ids = typeof ids === 'string' ? [ids] : ids; var i = 0, len = ids.length, flag = true, uuid = parent || lynx.guid('cb_'), path = parent || basePath, modules = lynx.modules, moduleCache = lynx.moduleCache, args = [], deps = {}, id, result; for(; i < len; i++){ id = ids[i]; if(id == 'ready'){ result = ['ready','ready']; }else{ result = lynx.parseModule(id, path); } if(!deps[result[1]]){ //减少检测重复依赖的次数 if(checkCircularDeps(uuid, result[1])){ lynx.error('模块[url:'+ uuid +']与模块[url:'+ result[1] +']循环依赖'); } deps[result[1]] = 'lynx'; } args.push(result[1]); if(!modules[result[1]]){ modules[result[1]] = { name : result[0], url : result[1], state : 0, exports : {} } flag = false; lynx.loadJS(result[1]); }else if(modules[result[1]].state != 2){ flag = false; } } moduleCache[uuid] = { uuid : uuid, factory : callback, args : args, deps : deps, state : 1 } if(flag){ fireFactory(uuid); return checkLoadReady(); } }; /** * @param {String} id 模块名 * @param {String|Array} [dependencies] 依赖列表 * @param {Function} factory 工厂方法 */ win.define = function(id, dependencies, factory){ if(typeof dependencies === 'function'){ factory = dependencies; if(typeof id === 'array'){ dependencies = id; }else if(typeof id === 'string'){ dependencies = []; } }else if (typeof id == 'function'){ factory = id; dependencies = []; } id = lynx.getCurrentScript(); if(!id){ lynx.loadings.push(function(id){ require(dependencies, factory, id); }); }else{ require(dependencies, factory, id); } } require.amd = define.amd = lynx.modules; /** * fire factory * @param {String} uuid */ function fireFactory(uuid){ var moduleCache = lynx.moduleCache, modules = lynx.modules, data = moduleCache[uuid], deps = data.args, result, i = 0, len = deps.length, args = []; for(; i < len; i++){ args.push(modules[deps[i]].exports) } result = data.factory.apply(null, args); if(modules[uuid]){ modules[uuid].state = 2; modules[uuid].exports = result; delete moduleCache[uuid]; }else{ delete lynx.moduleCache; } return result; } /** * 检测是否全部加载完毕 */ function checkLoadReady(){ var moduleCache = lynx.moduleCache, modules = lynx.modules, data, prop, deps, mod; loop: for (prop in moduleCache) { data = moduleCache[prop]; deps = data.deps; for(mod in deps){ if(hasOwn.call(modules, mod) && modules[mod].state != 2){ continue loop; } } if(data.state != 2){ fireFactory(prop); checkLoadReady(); } } } /** * 检测循环依赖 * @param {String} id * @param {Array} dependencie */ function checkCircularDeps(id, dependencie){ var moduleCache = lynx.moduleCache, depslist = moduleCache[dependencie] ? moduleCache[dependencie].deps : {}; if(hasOwn.call(depslist, id) && depslist[id] == 'lynx'){ return true; } return false; } lynx.mix(lynx, { /** * 加载JS文件 * @param {String} url */ loadJS : function(url){ var node = doc.createElement("script"); node[node.onreadystatechange ? 'onreadystatechange' : 'onload'] = function(){ if(!node.onreadystatechange || /loaded|complete/i.test(node.readyState)){ var fn = lynx.loadings.pop(); fn && fn.call(null, node.src); lynx.modules[node.src] && lynx.modules[node.src].state == 1; node.onload = node.onreadystatechange = node.onerror = null; head.removeChild(node); } } node.onerror = function(){ lynx.error('模块[url:'+ node.src +']加载失败'); node.onload = node.onreadystatechange = node.onerror = null; head.removeChild(node); } node.src = url; head.insertBefore(node, head.firstChild); }, /** * get current script [此方法来自司徒正美的博客] * @return {String} */ getCurrentScript : function(){ //取得正在解析的script节点 if (doc.currentScript) { //firefox 4+ return doc.currentScript.src; } // 参考 https://github.com/samyk/jiagra/blob/master/jiagra.js var stack; 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) { /**e.stack最后一行在所有支持的浏览器大致如下: *chrome23: * at http://113.93.50.63/data.js:4:1 *firefox17: *@http://113.93.50.63/query.js:4 *opera12:http://www.oldapps.com/opera.php?system=Windows_XP *@http://113.93.50.63/data.js:4 *IE10: * at Global code (http://113.93.50.63/data.js:4:1) */ 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 (var i = 0, node; node = nodes[i++]; ) { if (node.readyState === "interactive") { return node.src; } } }, config : function(option){ lynx.mix(configure, option); }, //============================== DOM Ready ============================= /** * dom ready * @param {Function} callback */ ready : function (){ var isReady = false; var readyList = []; var ready = function(fn){ if(isReady){ fn(); }else{ readyList.push(fn); } }; var fireReady = function(){ for(var i = 0,len = readyList.length; i < len; i++){ readyList[i](); } readyList = []; lynx.modules.ready.state = 2; checkLoadReady(); }; var bindReady = function(){ if(isReady){ return; } isReady=true; fireReady(); if(doc.removeEventListener){ doc.removeEventListener("DOMContentLoaded",bindReady,false); }else if(doc.attachEvent){ doc.detachEvent("onreadystatechange", bindReady); } }; if( doc.readyState === "complete" ) { bindReady(); }else if(doc.addEventListener){ doc.addEventListener("DOMContentLoaded", bindReady, false); }else if(doc.attachEvent){ doc.attachEvent("onreadystatechange", function(){ if((/loaded|complete/).test(doc.readyState)){ bindReady(); } }); (function(){ if(isReady){ return; } var node = new Image(); var timer = setInterval(function(){ try{ isReady || node.doScroll('left'); node = null; }catch(e){ return; } clearInterval(timer); bindReady(); }, 16); }()); } return ready; }() }); win.lynx = lynx; }(window));
使用方法
//hello.js文件 define('hello', 'test',function(test){ return {world : 'hello, world!' + test}; }); //test.js文件 define('test', function(){ return 'this is test'; }); //主文件 lynxcat.require('ready','hello',function(hello){ console.log(hello.world); //hello, world!this is test; });
