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';
});