一般性的,当我们需要加载js文件的时候都会使用 标签来实现,类似于如下代码:

代码如下:

< type="text/ " src="example.js"></ >


但是直接使用 标签来加载js文件会有如下一些缺点:

1.严格的读取顺序。由于浏览器按照< >在网页中出现的顺序,读取 文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。

2.性能问题。浏览器采用"同步模式"加载< >标签,也就是说,页面会"堵塞"(blocking),等待 文件加载完成,然后再运行后面的HTML代码。当存在多个< >标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。

这个时候我们就会想到去动态加载JS,动态加载js的实现方法类似于如下代码

代码如下:

/*
*@desc:动态添加
*@param src:加载的js文件的地址
*@param callback:js文件加载完成之后需要调用的回调函数
*@demo:
addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {
    alert('携程服务器上的lab.js加载完成')
});
*/
function addDynamicJS(src, callback) {
    var = document.createElement(" ");
    .setAttribute("type", "text/ ");
    .src = src[i];
    .charset = 'gb2312';
    document.body.appendChild( );
    if (callback != undefined) {
        . = function () {
            callback();
        }
    }
}

这样不会造成页面堵塞,但会造成另外一个问题:这样加载的 文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window. 事件中指定的回调函数对它无效。

这个时候我们就会想到用一些外部函数库来有效的管理JS加载问题。

下面进入正题说说LAB.js

LAB.js

如果我们使用传统的方法来加载js的话,写的代码一般会如下方代码所示风格。

代码如下:

< src="aaa.js"></ >
    < src="bbb-a.js"></ >
    < src="bbb-b.js"></ >
    < type="text/ ">
        initAaa();
        initBbb();
    </ >
    < src="ccc.js"></ >
    < type="text/ ">
        initCcc();
    </ >

如果我们使用LAB.js的话,要实现上述代码功能,则使用如下方式

代码如下:

<!--先加载lab.js库-->
    < src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></ >
    < type="text/ ">
        $LAB
        . ("aaa.js").wait()//不带参数的.wait()方法表示立即运行刚才加载的 文件
        . ("bbb-a.js")
        . ("bbb-b.js")//依次加载aaa.js bbb-a.js bbb-b.js  然后执行initAaa initBbb
        .wait(function () {//带参数的.wait()方法也是立即运行刚才加载的 文件,但是还运行参数中指定的函数。
            initAaa();
            initBbb();
        })
        . ("ccc.js")//再加载ccc.js 加载完成ccc.js之后执行initCcc方法
        .wait(function () {
            initCcc();
        });
    </ >

可以同时运行多条$LAB链,但是它们之间是完全独立的,不存在次序关系。如果你要确保一个 文件在另一个文件之后运行,你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候,你才应该考虑把它们分成不同的$LAB链,表示它们之间不存在相关关系。

一般性的使用示例

代码如下:

$LAB
. (" 1.js") // 1, 2, and 3 相互不依赖, 可以按照任意的顺序执行
. (" 2.js")
. (" 3.js")
.wait(function(){
    alert(" s 1-3 are loaded!");
})
. (" 4.js") //必须等待 1.js, 2.js, 3.js执行完毕之后才能执行
.wait(function(){ 4Func();});
代码如下:

$LAB
. (" .js")   
. ({ src: " 1.js", type: "text/ " })
. ([" 1.js", " 2.js", " 3.js"])
. (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 will be loaded
    }
    else {
        return null; // if not in IE, this call will effectively be ignored
    }
})

在控制台看LAB.js的加载信息

如果你想调试或者说在控制台看各个js加载信息的话,可以使用$LAB.setGlobalDefaults 方法,具体使用请看代码示例。

代码如下:

<!--先加载携程的LAB库  lab.js在网上也可以下载-->
    < type="text/ " src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" charset="gb2312"></ >

    < type="text/ ">

        $LAB.setGlobalDefaults({ Debug: true }) //打开调试

        $LAB
            //第一个执行链
           . ('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
           . ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')

           //第二个执行链
           .wait(function () {
               //console.log(window.$)
               //console.log(window._)
           })

           //第三个执行链
           . ('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
           . ('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')

           //第四个执行链
           .wait(function () {
               // console.log(plugin1Function)
               // console.log(plugin2Function)
           })

           //第五个执行链
           . ('js/aaa.js')
           . ('js/bbb.js')

           //第六个执行链
           .wait(function () {
               // console.log(module1Function)
               // console.log(module2Function)
           })
    </ >

这个时候打开控制台,看信息,如下图所示:

\"\"

我相信你看到这儿肯定会为Lab.js的调试功能惊叹不已。事实上Lab.js确实是挺强大的,我也只是了解它的一些浅显的功能。先记下来,拿来分享一下同时也为了以后方便自己。

参考自:https://www.jb51.net/article/61488.htm

收藏 打印