javascript【AMD模块加载器】浅析V3(添加CSS加载功能，重构内部流程)
由于今天正美大大的回复，然后前篇文章的评论里就出现了好多人站出来指责我抄袭，吓的我小心肝都扑通扑通的跳。
虽然这次的模块加载器是参照了正美大大的来写，但是至少我是一行一行代码自己写出来的。然后一个浏览器一个浏览器测试的，就连流程图都重画了好几次。
虽然大体上跟正美的差不多，但是细节上还是有很多不同的。看到哪些回复我也不想说啥。 抄没抄，会不会。明眼人一眼就能看出来，犯不着解释太多。
废话不多说，下面介绍这一版本的改进。额外增加了一个配置项控制并发的数量。因为浏览器的有效并发数是有限的。所以如果你一次性加载10个模块，就有可能阻塞掉其它的资源加载。
现在内部默认最大并发是4个。将原来的moduleCache变量删除,将所有加在信息都整合到modules中，并标记初始加载函数，在所有模块加载结束后删除初始加在函数。
所有css加载，不计入模块加载中。而且加载css也不会在factory的参数中出现。也就是说如果你这样写也没关系。
require(['hello','test.css','test'], function(hello,test){ console.log(hello,test); });
不过现在还有一个问题就是加载css检测加载完毕的问题。 由于浏览器对link标签的onload事件支持各不一样，加之就算为之做了兼容也是锦衣夜行。 因为根本不需要知道css的加载情况。
主要的改动就这些，还有一些细节性的改动。去掉了deps属性，检测循环依赖的方法改为使用args而不是之前的deps。将之前的loadJS方法改变为loadSource。 将require方法和load拆分开来。
使用文档碎片来将节点批量插入到页面中，尽量减少修改dom树，减少浏览器重排。
这一版中依然使用了正美大大博客中的哪个获得当前被解析的script的url的方法，不知道园子里的各位朋友有没有更好的办法。在最初的时候我是用模块名称来做唯一的，这样就不用获取正在解析的script的url。 但是重名模块就很难解决了。如果大家有更好的解决办法希望能告知一下。大家一起进步。 下面是最新的源码和使用的方法。
View Code
1 ;(function(win, undefined){ 2 win = win || window; 3 var doc = win.document || document, 4 head = doc.head || doc.getElementsByTagName("head")[0], 5 fragment = document.createDocumentFragment(), 6 hasOwn = Object.prototype.hasOwnProperty, 7 slice = Array.prototype.slice, 8 configure = {total : 4}, 9 basePath = (function(nodes){ 10 var node, url; 11 if(!configure.baseUrl){ 12 node = nodes[nodes.length - 1]; 13 url = (node.hasAttribute ? node.src : node.getAttribute("src", 4)).replace(/[?#].*/, ""); 14 }else{ 15 url = configure.baseUrl; 16 } 17 return url.slice(0, url.lastIndexOf('/') + 1); 18 }(doc.getElementsByTagName('script'))), 19 _lynx = win.lynx; 20 21 /** 22 * 框架入口 23 */ 24 function lynx(exp, context){ 25 return new lynx.prototype.init(exp, context); 26 } 27 28 lynx.prototype = { 29 constructor : lynx, 30 31 /** 32 * 初始化 33 * @param {All} expr 34 * @param {All} context 35 * @return {Object} 36 * 37 */ 38 init : function(expr, context){ 39 if(typeof expr === 'function'){ 40 require('ready', expr); 41 } 42 //TODO 43 } 44 } 45 lynx.fn = lynx.prototype.init.prototype = lynx.prototype; 46 47 /** 48 * 继承方法 49 */ 50 lynx.fn.extend = lynx.extend = function(){ 51 var args = slice.call(arguments), deep = typeof args[args.length - 1] == 'bollean' ? args.pop() : false; 52 53 if(args.length == 1){ 54 args[1] = args[0]; 55 args[0] = this; 56 args.length = 2; 57 } 58 59 var target = args[0], i = 1, len = args.length, source, prop; 60 61 for(; i < len; i++){ 62 source = args[i]; 63 for(prop in source){ 64 if(hasOwn.call(source, prop)){ 65 if(typeof source[prop] == 'object'){ 66 target[prop] = {}; 67 this.extend(target[prop],source[prop]); 68 }else{ 69 if(target[prop] === undefined){ 70 target[prop] = source[prop]; 71 }else{ 72 deep && (target[prop] = source[prop]); 73 } 74 } 75 } 76 } 77 } 78 }; 79 80 /** 81 * mix 82 * @param {Object} target 目标对象 83 * @param {Object} source 源对象 84 * @return {Object} 目标对象 85 */ 86 lynx.mix = function(target, source){ 87 if( !target || !source ) return; 88 var args = slice.call(arguments), i = 1, override = typeof args[args.length - 1] === "boolean" ? args.pop() : true, prop; 89 while ((source = args[i++])) { 90 for (prop in source) { 91 if (hasOwn.call(source, prop) && (override || !(prop in target))) { 92 target[prop] = source[prop]; 93 } 94 } 95 } 96 return target; 97 }; 98 99 lynx.mix(lynx, { 100 modules : { //保存加载模块 101 ready : { 102 state : 1, 103 type : 1, 104 args : [], 105 exports : lynx 106 } 107 }, 108 urls : [], 109 loading : 0, 110 stacks : [], //getCurrentScript取不到值的时候用来存储当前script onload的回调函数数组 111 112 /** 113 * get uuid 114 * @param {String} prefix 115 * @return {String} uuid 116 */ 117 guid : function(prefix){ 118 prefix = prefix || ''; 119 return prefix + (+new Date()) + String(Math.random()).slice(-8); 120 }, 121 122 /** 123 * noop 空白函数 124 */ 125 noop : function(){ 126 127 }, 128 129 /** 130 * error 131 * @param {String} str 132 */ 133 error : function(str){ 134 throw new Error(str); 135 }, 136 137 /** 138 * @return {Object} lynx 139 */ 140 noConflict : function(deep) { 141 if ( window.lynx === lynx ) { 142 window.lynx = _lynx; 143 } 144 return lynx; 145 } 146 }); 147 148 149 //================================ 模块加载 ================================ 150 /** 151 * 模块加载方法 152 * @param {String|Array} ids 需要加载的模块 153 * @param {Function} callback 加载完成之后的回调 154 */ 155 win.require = lynx.require = function(ids, callback){ 156 ids = typeof ids === 'string' ? [ids] : ids; 157 var modules = lynx.modules, urls = lynx.urls, uuid = lynx.guid('cb_'), data; 158 data = parseModules(ids, basePath); 159 modules[uuid] = { 160 name : 'initialize', 161 type : 2, 162 state : 1, 163 args : data.args, 164 factory : callback 165 }; 166 urls = urls.concat(data.urls); 167 lynx.load(urls); 168 }; 169 170 /** 171 * @param {String} id 模块名 172 * @param {String|Array} [dependencies] 依赖列表 173 * @param {Function} factory 工厂方法 174 */ 175 win.define = function(id, dependencies, factory){ 176 if(typeof dependencies === 'function'){ 177 factory = dependencies; 178 if(typeof id === 'array'){ 179 dependencies = id; 180 }else if(typeof id === 'string'){ 181 dependencies = []; 182 } 183 }else if (typeof id == 'function'){ 184 factory = id; 185 dependencies = []; 186 } 187 id = lynx.getCurrentScript(); 188 189 dependencies = typeof dependencies === 'string' ? [dependencies] : dependencies; 190 191 var handle = function(id, dependencies, factory){ 192 var modules = lynx.modules, urls = lynx.urls; 193 modules[id].factory = factory; 194 modules[id].state = 2; 195 if(!dependencies.length){ 196 fireFactory(id); 197 }else{ 198 var data = parseModules(dependencies, id, true); 199 urls = urls.concat(data.urls); 200 lynx.load(urls); 201 } 202 } 203 if(!id){ 204 lynx.stacks.push(function(dependencies, factory){ 205 return function(id){ 206 handle(id, dependencies, factory); 207 id = null; dependencies = null; factory = null; 208 } 209 }(dependencies, factory)); 210 }else{ 211 handle(id, dependencies, factory); 212 } 213 } 214 215 require.amd = define.amd = lynx.modules; 216 217 /** 218 * 解析加载模块信息 219 * @param {Array} list 220 * @param {String} path 221 * @param {boolean} flag 222 * @return {Object} 223 */ 224 function parseModules(list, basePath, flag){ 225 var modules = lynx.modules, urls = [], args = [], uniqurl = {}, id, result; 226 while(id = list.shift()){ 227 if(modules[id]){ 228 args.push(id); 229 continue; 230 } 231 result = parseModule(id, basePath); 232 modules[basePath] && modules[basePath].args.push(result[1]); 233 flag && checkCircularDeps(result[1], basePath) && lynx.error('模块[url:'+ basePath +']与模块[url:'+ result[1] +']循环依赖'); 234 modules[result[1]] = { 235 type : result[2] === 'js' ? 1 : 2, 236 name : result[0], 237 state : 0, 238 exports : {}, 239 args : [], 240 factory : lynx.noop 241 }; 242 (result[2] === 'js') && args.push(result[1]); 243 if(!uniqurl[result[1]]){ 244 uniqurl[result[1]] = true; 245 urls.push(result[1]); 246 } 247 } 248 249 return { 250 args : args, 251 urls : urls 252 } 253 } 254 255 /** 256 * parse module 257 * @param {String} id 模块名 258 * @param {String} basePath 基础路径 259 * @return {Array} 260 */ 261 function parseModule(id, basePath){ 262 var url, result, ret, dir, paths, i, len, type, modname, protocol = /^(\w+\d?:\/\/[\w\.-]+)(\/(.*))?/; 263 if(result = protocol.exec(id)){ 264 url = id; 265 paths = result[3] ? result[3].split('/') : []; 266 }else{ 267 result = protocol.exec(basePath); 268 url = result[1]; 269 paths = result[3] ? result[3].split('/') : []; 270 modules = id.split('/'); 271 paths.pop(); 272 for(i = 0, len = modules.length; i < len; i++){ 273 dir = modules[i]; 274 if(dir == '..'){ 275 paths.pop(); 276 }else if(dir !== '.'){ 277 paths.push(dir); 278 } 279 } 280 url = url + '/' + paths.join('/'); 281 } 282 modname = paths[paths.length - 1]; 283 type = modname.slice(modname.lastIndexOf('.') + 1); 284 if(type !== 'js' && type !== 'css'){ 285 type = 'js'; 286 url += '.js'; 287 } 288 return [modname, url, type]; 289 } 290 291 /** 292 * fire factory 293 * @param {String} uuid 294 */ 295 function fireFactory(uuid){ 296 var modules = lynx.modules, 297 data = modules[uuid], deps = data.args, 298 i = 0, len = deps.length, args = []; 299 for(; i < len; i++){ 300 args.push(modules[deps[i]].exports) 301 } 302 data.exports = data.factory.apply(null, args); 303 data.state = 3; 304 delete data.factory; 305 delete data.args; 306 if(data.type == 2 && data.name == 'initialize'){ 307 delete modules[uuid]; 308 } 309 checkLoadReady(); 310 } 311 312 /** 313 * 检测是否全部加载完毕 314 */ 315 function checkLoadReady(){ 316 var modules = lynx.modules, flag = true, data, prop, deps, mod, i , len; 317 for (prop in modules) { 318 data = modules[prop]; 319 if(data.type == 1 && data.state != 2){ //如果还没执行到模块的define方法 320 continue; 321 } 322 deps = data.args; 323 for(i = 0, len = deps.length; mod = deps[i], i < len ; i++){ 324 if(hasOwn.call(modules, mod) && modules[mod].state != 3){ 325 flag = false; 326 break; 327 } 328 } 329 if(data.state != 3 && flag){ 330 fireFactory(prop); 331 } 332 } 333 } 334 335 /** 336 * 检测循环依赖 337 * @param {String} id 338 * @param {Array} dependencie 339 */ 340 function checkCircularDeps(id, dependencie){ 341 var modules = lynx.modules, depslist = modules[id] ? modules[id].args : []; 342 return ~depslist.join(' ').indexOf(dependencie); 343 } 344 345 /** 346 * create 347 * @param {String} type CSS|JS 348 * @param {String} url 349 * @param {Function} callback 350 */ 351 function loadSource(type, url, callback){ 352 var ndoe, modules = lynx.modules; 353 if(type == 'JS'){ 354 var node = doc.createElement("script"); 355 node[node.onreadystatechange ? 'onreadystatechange' : 'onload'] = function(){ 356 if(!node.onreadystatechange || /loaded|complete/i.test(node.readyState)){ 357 callback(); 358 node.onload = node.onreadystatechange = node.onerror = null; 359 var fn = lynx.stacks.pop(); 360 fn && fn.call(null, node.src); 361 head.removeChild(node); 362 } 363 } 364 node.src = url; 365 modules[url].state = 1; 366 lynx.loading++; 367 }else if(type == 'CSS'){ 368 var node = doc.createElement("link"); 369 node.rel = 'stylesheet'; 370 node.href = url; 371 delete modules[url]; 372 } 373 node.onerror = function(){ 374 lynx.error('模块[url:'+ node.src +']加载失败'); 375 node.onload = node.onreadystatechange = node.onerror = null; 376 lynx.loading--; 377 head.removeChild(node); 378 } 379 return node; 380 381 }; 382 383 lynx.mix(lynx, { 384 load : function(urls){ 385 var loading , total = configure.total,modules = lynx.modules, url, node = fragment, type; 386 while((loading = lynx.loading) < total && (url = urls.shift())){ 387 type = url.slice(url.lastIndexOf('.') + 1).toUpperCase(); 388 node.appendChild(loadSource(type, url, function(){ 389 lynx.loading--; 390 var urls = lynx.urls; 391 urls.length && lynx.load(urls); 392 })); 393 } 394 head.insertBefore(node, head.firstChild); 395 }, 396 397 /** 398 * 加载JS文件 399 * @param {String} url 400 * @param {Function} callback 401 */ 402 loadJS : function(url, callback){ 403 var node = loadSource('JS', url, callback) 404 head.insertBefore(node, head.firstChild); 405 }, 406 407 /** 408 * 加载CSS文件 409 * @param {String} url 410 * @param {Function} callback 411 */ 412 loadCSS : function(url, callback){ 413 var node = loadSource('CSS', url, callback); 414 head.insertBefore(node, head.firstChild); 415 }, 416 417 /** 418 * get current script [此方法来自司徒正美的博客] 419 * @return {String} 420 */ 421 getCurrentScript : function(){ 422 //取得正在解析的script节点 423 if (doc.currentScript) { //firefox 4+ 424 return doc.currentScript.src; 425 } 426 // 参考 https://github.com/samyk/jiagra/blob/master/jiagra.js 427 var stack; 428 try { 429 a.b.c(); //强制报错,以便捕获e.stack 430 } catch (e) { //safari的错误对象只有line,sourceId,sourceURL 431 stack = e.stack; 432 if (!stack && window.opera) { 433 //opera 9没有e.stack,但有e.Backtrace,但不能直接取得,需要对e对象转字符串进行抽取 434 stack = (String(e).match(/of linked script \S+/g) || []).join(" "); 435 } 436 } 437 if (stack) { 438 /**e.stack最后一行在所有支持的浏览器大致如下: 439 *chrome23: 440 * at http://113.93.50.63/data.js:4:1 441 *firefox17: 442 *@http://113.93.50.63/query.js:4 443 *opera12:http://www.oldapps.com/opera.php?system=Windows_XP 444 *@http://113.93.50.63/data.js:4 445 *IE10: 446 * at Global code (http://113.93.50.63/data.js:4:1) 447 */ 448 stack = stack.split(/[@ ]/g).pop(); //取得最后一行,最后一个空格或@之后的部分 449 stack = stack[0] === "(" ? stack.slice(1, -1) : stack; 450 return stack.replace(/(:\d+)?:\d+$/i, ""); //去掉行号与或许存在的出错字符起始位置 451 } 452 var nodes = head.getElementsByTagName("script"); //只在head标签中寻找 453 for (var i = 0, node; node = nodes[i++]; ) { 454 if (node.readyState === "interactive") { 455 return node.src; 456 } 457 } 458 }, 459 460 /** 461 * 配置模块信息 462 * @param {Object} option 463 */ 464 config : function(option){ 465 lynx.mix(configure, option); 466 }, 467 468 469 //============================== DOM Ready ============================= 470 471 /** 472 * dom ready 473 * @param {Function} callback 474 */ 475 ready : function (){ 476 var isReady = false; 477 var readyList = []; 478 var ready = function(fn){ 479 if(isReady){ 480 fn(); 481 }else{ 482 readyList.push(fn); 483 } 484 }; 485 486 var fireReady = function(){ 487 for(var i = 0,len = readyList.length; i < len; i++){ 488 readyList[i](); 489 } 490 readyList = []; 491 lynx.modules.ready.state = 3; 492 checkLoadReady(); 493 }; 494 495 var bindReady = function(){ 496 if(isReady){ 497 return; 498 } 499 isReady=true; 500 fireReady(); 501 if(doc.removeEventListener){ 502 doc.removeEventListener("DOMContentLoaded",bindReady,false); 503 }else if(doc.attachEvent){ 504 doc.detachEvent("onreadystatechange", bindReady); 505 } 506 }; 507 508 if( doc.readyState === "complete" ) { 509 bindReady(); 510 }else if(doc.addEventListener){ 511 doc.addEventListener("DOMContentLoaded", bindReady, false); 512 }else if(doc.attachEvent){ 513 doc.attachEvent("onreadystatechange", function(){ 514 if((/loaded|complete/).test(doc.readyState)){ 515 bindReady(); 516 } 517 }); 518 (function(){ 519 if(isReady){ 520 return; 521 } 522 var node = new Image(); 523 var timer = setInterval(function(){ 524 try{ 525 isReady || node.doScroll('left'); 526 node = null; 527 }catch(e){ 528 return; 529 } 530 clearInterval(timer); 531 bindReady(); 532 }, 16); 533 }()); 534 } 535 return ready; 536 }() 537 }); 538 539 win.lynx = lynx; 540 }(window));
//使用方法 //index.html 页面 <html> <head> <title>测试</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="lynx.js"></script> <script type="text/javascript"> lynx.require(['test.css','hello'], function(hello){ alert(hello); }) </script> </head> <body> <div class="test"></div> </body> </html> //test.css 文件 .test{ width: 200px; height: 100px; background-color: red; } //hello.js 文件 define('hello', 'test',function(test){ return 'a' + test; }); //test.js 文件 define('test',function(test){ return 'b'; });
