LABJS的使用教程

dreamans 發(fā)布于2019-08-21 10:41 / 2009人閱讀

摘要：我們先下載官網(wǎng)地址比較兩者加載的區(qū)別傳統(tǒng)的加載方式采用加載我們可以看到，使用的方式代碼上顯示比較簡潔。幾個簡單的案例三個文件之間不存在依賴，異步加載為加載的文件指定類型它還有很多更好玩的用法，大家可以到官網(wǎng)上研究一番。

看到LABjs的時候是因為當(dāng)初希望實現(xiàn)js的異步加載，因為項目的歷史原因，在頁面中需要引用大量的js文件，為了優(yōu)化頁面的加載速度，做了不少的處理，在使用LABjs的過程中發(fā)現(xiàn)這插件真的很棒，原本頁面的初始加載時間需要4S左右的，在使用LABjs后，頁面的加載速度只需要2S-2.3S之間就完成了，它編寫簡單明了，當(dāng)然也有其他工具可以達到與它一樣的效果，在此不作比較，希望大家能夠喜歡這款插件（它僅僅只有6kb）。
我們先下載LABjs

官網(wǎng)地址"http://labjs.com/"

比較兩者加載的區(qū)別

/**
*傳統(tǒng)的JS加載方式
**/





/**
*采用LABjs加載
**/

我們可以看到，使用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();});

它還有很多更好玩的用法，大家可以到官網(wǎng)上研究一番。趕緊試下它的效果，真的會給你帶來驚喜的。