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

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