LABJS按需动态加载js文件.docVIP

为了提高页面的打开和加载速度，我们经常把JS文件放在页面的尾部，但是有些JS必须放在页面前面，这样就会增加页面的加载时间;于是出现了按需动态加载的概念，这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候，在去请求这些文件，这样就节省了页面的加载时间

LABjs是一个很小的JavaScript工具，用来根据需要加载JavaScript文件，通过使用该工具可以提升页面的性能，避免加载不需用到的JavaScript文件，可以实现动态并行加载脚本文件，以及管理加载脚本文件的执行顺序。

简单示例

$LAB

.script(script1.js,script2.js,script3.js)

.block(function(){

//waitforalltoload,thendosomething

script1Func();

script2Func();

script3Func();

});

介绍下LABJS的几个实例：

实例1：

$LAB

.script(script1.js)

.script(script2.js)

.script(script3.js)

.wait(function(){//等待所有script加载完再执行这个代码块

script1Func();

script2Func();

script3Func();

});

实例2：

$LAB

.script({src:script1.js,type:text/javascript})

.script(script2.js)

.script(script3.js)

.wait(function(){//等待所有script加载完再执行这个代码块

script1Func();

script2Func();

script3Func();

});

实例3：

$LAB

.script(script1.js,script2.js,script3.js)

.wait(function(){//等待所有script加载完再执行这个代码块

script1Func();

script2Func();

script3Func();

});

实例4：

$LAB

.script([script1.js,script2.js],script3.js)

.wait(function(){//等待所有script加载完再执行这个代码块

script1Func();

script2Func();

script3Func();

});

实例5：

$LAB

.script(script1.js).wait()//空的wait()只是确保script1在其他代码之前被执行

.script(script2.js)//script2和script3依赖于script1

.script(script3.js).wait()//但是script2和script3并不互相依赖,可以并行下载

.script(script4.js)//script4依赖于script1,script2及script3

.wait(function(){script4Func();});

实例6：

$LAB

.script(script1.js)//script1,script2,andscript3之间没有依赖关系,

.script(script2.js)//所以可以任意顺序执行

.script(script3.js)

.wait(function(){//如果需要,这里当然可以执行javascript函数

alert(Scripts1-3areloaded!);

})

.script(script4.js)//依赖于script1,script2及script3

.wait(function(){script4Func();});

实例7：

$LAB

.setOptions({AlwaysPreserveOrder:true})//设置每个脚本之间等待

.script(script1.js)//script1,script2,script3,script4互相依赖

.script(script2.js)//并且并行下载后循序执行

.script(script3.js)

.scr