JS module LazyLoad之一
随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高易做图，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。
先给出使用接口
view sourceprint?1 LazyLoad.js(
2 urls // js文件路径
3 fn // 全部加载后回调函数
4 scope // 指定回调函数执行上下文
5 );
示例
view sourceprint?1 LazyLoad.js([a.js,b.js,c.js], function(){
2 alert(加载完毕);
3 });
这个系统会尽全力去加载所有的JS文件，即当某个文件不存在或加载失败它不会就此中断，仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。
完整代码
view sourceprint?01 LazyLoad = function(win){
02 var list,
03 isIE = /*@cc_on!@*/!1,
04 doc = win.document,
05 head = doc.getElementsByTagName(head)[0];
06
07 function createEl(type, attrs){
08 var el = doc.createElement(type),
09 attr;
10 for(attr in attrs){
11 el.setAttribute(attr, attrs[attr]);
12 }
13 return el;
14 }
15 function finish(obj){
16 list.shift();
17 if(!list.length){
18 obj.fn.call(obj.scope);
19 }
20 }
21 function js(urls, fn, scope){
22 list = [].concat(urls);
23 var obj = {scope:scope||win, fn:fn};
24 for(var i=0,len=urls.length; i<len; i++){
25 var script = createEl(script, {src: urls[i]});
26 if(isIE){
27 script.onreadystatechange = function(){
28 var readyState = this.readyState;
29 if (readyState == loaded || readyState == complete){
30 this.onreadystatechange = null;
31 finish(obj);
32 }
33 }
34 }else{
35 script.onload = script.onerror = function(){
36 finish(obj);
37 }
38 }
39 head.appendChild(script);
40 }
41 }
42 return {js:js};
43 }(this);
补充：web前端 , JavaScript ,
