LABjs学习之无阻塞动态并行加载脚本文件以及管理执行顺序

Posted 2020-11-24 坤嬷嬷

什么是LABjs

LABjs是一个动态的脚本加载器，LABjs的定义特性是能够在浏览器允许的范围内以最快的速度并行加载所有javascript文件，但是如果文件之间存在依赖关系，则可以选择确保正确的执行顺序。

总计来说就是：动态并行加载脚本文件以及管理加载脚本文件的执行顺序

使用方法

$LAB对象替代了<script>标签，然后.script()方法表示加载Javascript文件，不带参数的.wait()方法表示立即运行刚才加载的Javascript文件，带参数的.wait()方法也是立即运行刚才加载的Javascript文件，并在运行完毕后还运行参数中指定的函数。

LABjs鼓励链式操作，因此每个方法都会返回$LAB对象的引用，需要下载多个脚本文件，只需要链式调用$LAB.script()方法

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

注意：wait()不会影响并行下载，所有的文件都是并行下载，wait()决定哪个先执行

改写

   <script src="script1.js"></script>
　　<script src="script2-a.js"></script>
　　<script src="script2-b.js"></script>
　　<script type="text/javascript">
　　　　initScript1();
　　　　initScript2();
　　</script>
　　<script src="script3.js"></script>
　　<script type="text/javascript">
　　　　initScript3();
　　</script>

上面这段代码，将依次加载4个javascript文件：script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后，运行两个函数initScript1()和initScript2()；加载完第四个文件后，再运行函数initScript3()。

下面，用LABjs对其进行改写：

　　<script src="LAB.js"></script>
　　<script type="text/javascript">
　　　　$LAB
　　　　　.script("script1.js").wait()
　　　　　.script("script2-a.js")
　　　　　.script("script2-b.js")
　　　　　.wait(function(){
　　　　　　　initScript1();
　　　　　　　initScript2();
　　　　　})
　　　　　.script("script3.js")
　　　　　.wait(function(){
　　　　　　　initScript3();
　　　　　});
　　</script>

实例1：

/**
*三个js文件之间不存在依赖，异步加载
**/

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

$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
});

实例2：

/**
*为加载的js文件指定类型
**/

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

$LAB    
.script({ src: "script1.js", type: "text/javascript" })
.script("script2.js")
.script("script3.js")
.wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
});

实例3：

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

$LAB.script("script1.js","script2.js","script3.js")
.wait(function(){// 等待所有script加载完再执行这个代码块
      script1Func();
      script2Func();
      script3Func();
});

实例4：

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

$LAB.script(["script1.js","script2.js"],"script3.js")
.wait(function(){// 等待所有script加载完再执行这个代码块
      script1Func();
      script2Func();
      script3Func();
});

实例5：

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

$LAB.script("script1.js")
.wait()    // 空的wait()只是确保script1在其他代码之前被执行
.script("script2.js")    // script2 和 script3 依赖于 script1
.script("script3.js")
.wait()    // 但是script2 和 script3 并不互相依赖,可以并行下载，运行完毕后往下走
.script("script4.js")    //script4 依赖于 script1, script2 及 script3 ，1、2、3都运行完才会运行4
.wait(function(){
    script4Func();
});

实例6：

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

$LAB.script("script1.js")    // script1, script2, and script3 之间没有依赖关系, 
.script("script2.js")    // 所以可以任意顺序执行
.script("script3.js")
.wait(function(){    // 如果需要,这里当然可以执行javascript函数
      alert("Scripts 1-3 are loaded!");
})
.script("script4.js")    // 依赖于 script1, script2 及 script3 
.wait(function(){
    script4Func();
});

实例7:

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

$LAB.setOptions({AlwaysPreserveOrder:true})// 设置每个脚本之间等待
.script("script1.js")// script1, script2, script3, script4 互相依赖
.script("script2.js")// 并且并行下载后循序执行
.script("script3.js")
.script("script4.js")
.wait(function(){
      script4Func();
});

实例8：

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

$LAB.script(function(){
        // `_is_IE`的值ie为true ,非ie为false
        if(_is_IE){
            return"ie.js";    // 如果是ie则这个js会被加载
        }else{
            return null;    //如果不是ie这个代码就会被略过
        }
    })
.script("script1.js")
.wait();    

下载地址

• BootCDN labjs

• 官网：http://www.labjs.com/

参考

阮一峰：Javascript文件加载：LABjs和RequireJS

LABJS浅析