Lab.js初次使用筆記

更新時間：2015年02月28日 08:54:18 投稿：junjie

這篇文章主要介紹了Lab.js初次使用筆記,本文對比了普通動態(tài)加載JS文件的技術(shù)和使用Lab.js加載JS文件的技術(shù),并給出了Lab.js加載示例,需要的朋友可以參考下

動態(tài)加載JS函數(shù)

一般性的，當(dāng)我們需要加載js文件的時候都會使用script標(biāo)簽來實現(xiàn)，類似于如下代碼：

復(fù)制代碼代碼如下:

但是直接使用script標(biāo)簽來加載js文件會有如下一些缺點(diǎn)：

1.嚴(yán)格的讀取順序。由于瀏覽器按照<script>在網(wǎng)頁中出現(xiàn)的順序，讀取Javascript文件，然后立即運(yùn)行，導(dǎo)致在多個文件互相依賴的情況下，依賴性最小的文件必須放在最前面，依賴性最大的文件必須放在最后面，否則代碼會報錯。

2.性能問題。瀏覽器采用"同步模式"加載<script>標(biāo)簽，也就是說，頁面會"堵塞"（blocking），等待javascript文件加載完成，然后再運(yùn)行后面的HTML代碼。當(dāng)存在多個<script>標(biāo)簽時，瀏覽器無法同時讀取，必須讀取完一個再去讀取另一個，造成讀取時間大大延長，頁面響應(yīng)緩慢。

這個時候我們就會想到去動態(tài)加載JS，動態(tài)加載js的實現(xiàn)方法類似于如下代碼

復(fù)制代碼代碼如下:

/*

*@desc:動態(tài)添加script

*@param src:加載的js文件的地址

*@param callback:js文件加載完成之后需要調(diào)用的回調(diào)函數(shù)

*@demo:

addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {

    alert('攜程服務(wù)器上的lab.js加載完成')

});

*/

function addDynamicJS(src, callback) {

    var script = document.createElement("script");

    script.setAttribute("type", "text/javascript");

    script.src = src[i];

    script.charset = 'gb2312';

    document.body.appendChild(script);

    if (callback != undefined) {

        script.onload = function () {

            callback();

        }

    }

}

這樣不會造成頁面堵塞，但會造成另外一個問題：這樣加載的Javascript文件，不在原始的DOM結(jié)構(gòu)之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回調(diào)函數(shù)對它無效。

這個時候我們就會想到用一些外部函數(shù)庫來有效的管理JS加載問題。

下面進(jìn)入正題說說LAB.js

LAB.js

如果我們使用傳統(tǒng)的方法來加載js的話，寫的代碼一般會如下方代碼所示風(fēng)格。

復(fù)制代碼代碼如下:

<script src="aaa.js"></script>

    <script src="bbb-a.js"></script>

    <script src="bbb-b.js"></script>

    <script type="text/javascript">

        initAaa();

        initBbb();

    </script>

    <script src="ccc.js"></script>

    <script type="text/javascript">

        initCcc();

    </script>

如果我們使用LAB.js的話，要實現(xiàn)上述代碼功能，則使用如下方式

復(fù)制代碼代碼如下:

<!--先加載lab.js庫-->

    <script src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></script>

    <script type="text/javascript">

        $LAB

        .script("aaa.js").wait()//不帶參數(shù)的.wait()方法表示立即運(yùn)行剛才加載的Javascript文件

        .script("bbb-a.js")

        .script("bbb-b.js")//依次加載aaa.js bbb-a.js bbb-b.js  然后執(zhí)行initAaa initBbb

        .wait(function () {//帶參數(shù)的.wait()方法也是立即運(yùn)行剛才加載的Javascript文件，但是還運(yùn)行參數(shù)中指定的函數(shù)。

            initAaa();

            initBbb();

        })

        .script("ccc.js")//再加載ccc.js 加載完成ccc.js之后執(zhí)行initCcc方法

        .wait(function () {

            initCcc();

        });

    </script>

可以同時運(yùn)行多條$LAB鏈，但是它們之間是完全獨(dú)立的，不存在次序關(guān)系。如果你要確保一個Javascript文件在另一個文件之后運(yùn)行，你只能把它們寫在同一個鏈操作之中。只有當(dāng)某些腳本是完全無關(guān)的時候，你才應(yīng)該考慮把它們分成不同的$LAB鏈，表示它們之間不存在相關(guān)關(guān)系。

一般性的使用示例

復(fù)制代碼代碼如下:

$LAB

.script("script1.js") // script1, script2, and script3 相互不依賴, 可以按照任意的順序執(zhí)行

.script("script2.js")

.script("script3.js")

.wait(function(){

    alert("Scripts 1-3 are loaded!");

})

.script("script4.js") //必須等待script1.js,script2.js,script3.js執(zhí)行完畢之后才能執(zhí)行

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

復(fù)制代碼代碼如下:

$LAB

.script("script.js")    

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

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

.script(function(){

    // assuming `_is_IE` defined by host page as true in IE and false in other browsers 

    if (_is_IE) {

        return "ie.js"; // only if in IE, this script will be loaded

    }

    else {

        return null; // if not in IE, this script call will effectively be ignored

    }

})

在控制臺看LAB.js的加載信息

如果你想調(diào)試或者說在控制臺看各個js加載信息的話，可以使用$LAB.setGlobalDefaults 方法,具體使用請看代碼示例。

復(fù)制代碼代碼如下:

<script type="text/javascript" src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" charset="gb2312"></script>

$LAB.setGlobalDefaults({ Debug: true }) //打開調(diào)試

        $LAB
            //第一個執(zhí)行鏈
           .script('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
           .script('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')

           //第二個執(zhí)行鏈
           .wait(function () {
               //console.log(window.$)
               //console.log(window._)
           })

           //第三個執(zhí)行鏈
           .script('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
           .script('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')

           //第四個執(zhí)行鏈
           .wait(function () {
               // console.log(plugin1Function)
               // console.log(plugin2Function)
           })

           //第五個執(zhí)行鏈
           .script('js/aaa.js')
           .script('js/bbb.js')

           //第六個執(zhí)行鏈
           .wait(function () {
               // console.log(module1Function)
               // console.log(module2Function)
           })
    </script>

這個時候打開控制臺，看信息，如下圖所示：