LABJS的使用教程

看到LABjs的时候是因为当初希望实现js的异步加载，因为项目的历史原因，在页面中需要引用大量的js文件，为了优化页面的加载速度，做了不少的处理，在使用LABjs的过程中发现这插件真的很棒，原本页面的初始加载时间需要4S左右的，在使用LABjs后，页面的加载速度只需要2S-2.3S之间就完成了，它编写简单明了，当然也有其他工具可以达到与它一样的效果，在此不作比较，希望大家能够喜欢这款插件（它仅仅只有6kb）。
我们先下载LABjs

官网地址'http://labjs.com/'

比较两者加载的区别

/***传统的JS加载方式**/<script src="framework.js"></script><script src="plugin.framework.js"></script><script src="myplugin.framework.js"></script><script src="init.js"></script>/***采用LABjs加载**/<script>   $LAB       .script("framework.js").wait()       .script("plugin.framework.js")       .script("myplugin.framework.js").wait()       .script("init.js").wait();</script>

我们可以看到，使用LABjs的方式代码上显示比较简洁。

几个简单的案例

• Example 1:

/***三个js文件之间不存在依赖，异步加载**/$LAB.script("script1.js").script("script2.js").script("script3.js").wait(function(){ // wait for all scripts to execute first    script1Func();    script2Func();    script3Func();});

• Example 2:

/***为加载的js文件指定类型**/$LAB    .script({ src: "script1.js", type: "text/javascript" }).script("script2.js").script("script3.js").wait(function(){ // wait for all scripts to execute first    script1Func();    script2Func();    script3Func();});

• Example 3:

$LAB.script("script1.js", "script2.js", "script3.js").wait(function(){ // wait for all scripts to execute first    script1Func();    script2Func();    script3Func();});

• Example 4:

$LAB.script( [ "script1.js", "script2.js" ], "script3.js").wait(function(){ // wait for all scripts to execute first    script1Func();    script2Func();    script3Func();});

• Example 5:

$LAB.script("script1.js").wait() // empty wait() simply ensures execution order be preserved for this script.script("script2.js") // both script2 and script3 depend on script1 being executed before.script("script3.js").wait() // but are not dependent on each other and can execute in any order.script("script4.js") // depends on script1, script2 and script3 being loaded before.wait(function(){script4Func();});

• Example 6:

$LAB.script("script1.js") // script1, script2, and script3 do not depend on each other, .script("script2.js") // so execute in any order.script("script3.js").wait(function(){  // can still have executable wait(...) functions if you need to    alert("Scripts 1-3 are loaded!");}).script("script4.js") // depends on script1, script2 and script3 being executed before.wait(function(){script4Func();});

它还有很多更好玩的用法，大家可以到官网上研究一番。赶紧试下它的效果，真的会给你带来惊喜的。