===========加载外部 js 的方法大致有这么几种:===========

方法 说明

XHR Eval      通过 Ajax 方式获取代码,并通过 eval 方式执行代码。

XHR Injection      通过 Ajax 方式获取代码,并在页面上创建一个 script 元素,将 Ajax 取得的代码注入。

Script in Iframe       通过 iframe 加载 js。

Script DOM Element       使用 JavaScript 动态创建 script DOM 元素并设置其 src 属性。

Script Defer/Async 严格来说,这一条不算是动态加载外部脚本的方法,但很多动态加载外部脚本的方法里都会用到 sctipt 的 defer 或 async 属性,所以也把它单独列在这儿。这个方法利用 script 的 defer 属性,让脚本“推迟”执行,不阻塞页面加载,或者设置 async 属性,让脚本异步执行。遗憾的是这两个属性不是所有浏览器都支持。

document.write Script Tag 通过 document.write 把 HTML 标签 script 写入到页面中。

cache trick 先使用自定义的 script 的 type 属性(如 <script type="text/cache" ...),甚至使用 Image、Object 等 HTML 对象将 js “预下载”(下载到浏览器缓存里),等真正需要执行对应代码时再将它真正地插入页面中。

Web Worker 部分浏览器支持 web worker 功能,可以创建一个 worker 在后台工作,包括加载外部脚本。



===========LABjs方法===========

$LAB.setGlobalDefaults()

参数值为:

AlwaysPreserveOrder一个布尔值(默认值为false),控制是否一个隐式空wait()调用假定每个脚本加载后,基本上所有的脚本在链条部队执行串行顺序(加载并联,默认情况下,不受此设置)。

UseLocalXHR 一个布尔值(默认值为true)用ajax XHR来预加载脚本

AllowDuplicates

一个布尔值(缺省为false)控制LABjs是否会检查其内部脚本URL缓存以防止脚本URI被(不小心,很可能)加载一次。默认情况下,LABjs不会让任何重复请求相同的脚本的URL。

BasePath 本地脚本的基本路径

CacheBust一个布尔值(缺省为false)增加了一个随机数字参数,防止每个脚本的URL从你的请求的URL缓存取

Debug 布尔值,用于web控制台将记录$LAB各个步骤的加载/处理逻辑,这个属性只有在引入LABjs源码或者 LAB-debug.min.js文件后才生效

$LAB.setOptions()

设置一个或多个选项只有在影响当前$LAB正在执行链,此方法必须是$LAB链第一个执行方法。参数和setGlobalDefaults()一样。格式为:$LAB.setOptions({...}).script(...)...

$LAB.script() 加载脚本

传递参数:

string 一个相对或者绝对的script地址

object对象 包含如下属性:

          src script文件的位置

          type指定类型 ("text/javascript", "text/vbscript")

          charset指定字符编码

array数组 

function函数 如果一个函数是发现作为参数之一,该函数将会被立即执行,必须直接返回一个值。返回值必须是另一个容许类型(字符串、对象或数组)。如果函数调用的结果在任何返回值(“未定义”)或值是“falsy”(false,空等),它将被视为没有脚本加载


$LAB.wait()

这个函数有两个目的。

首先,插入到链,以确保所有脚本之前列出的链应该执行完后继续余下的部分的链。

其次,你可以指定一个函数参考(通常一个内联匿名函数),将按顺序执行的,紧跟着链条之前的脚本执行。

$LAB.queueScript()

把加载的script放到队列里边

$LAB.queueWait()

把执行的函数放到队列列表

$LAB.runQueue()

执行队列里的queueScript()和queueWait()

$LAB.noConflict()

防止$LAB占用

$LAB.sandbox()

sandbox()创建一个新的干净的$LAB。这允许您获取新实例的实验室,比如如果你需要一个新的队列使用queueWai()或 queueScript()。



===========例子:===========

例子1:

$LAB.script("script1.js")  

    .script("script2.js")  

    .script("script3.js")  

    .wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数  

        script1Func();  

        script2Func();  

        script3Func();  

    });  

例子2:

$LAB      

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

    .script("script2.js")  

    .script("script3.js")  

    .wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数  

        script1Func();  

        script2Func();  

        script3Func();  

    }); 

例子3:

$LAB  

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

    .wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数  

        script1Func();  

        script2Func();  

        script3Func();  

    }); 

例子4:

$LAB  

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

    .wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数  

        script1Func();  

        script2Func();  

        script3Func();  

    });  

例子5:

$LAB  

.script("script1.js").wait() // 空wait() 只是简单确定执行顺序  

.script("script2.js") // script2和script3依赖script1,必须让script1先执行,而script2和script3没有具体执行顺序  

.script("script3.js").wait() // 空wait() 只是简单确定执行顺序  

.script("script4.js") // 依赖script1, script2 和 script3,这3个先加载  

.wait(function(){script4Func();});//执行脚本4函数  


例子6:

$LAB  

    .script("script1.js") // script1, script2, 和 script3互补依赖所以没有执行顺序,   

    .script("script2.js")   

    .script("script3.js")  

    .wait(function(){    

                 //执行wait(...) 里的函数functions   

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

    })  

    .script("script4.js") //  依赖script1, script2 and script3  

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

例子7:

$LAB  

    .setOptions({AlwaysPreserveOrder:true}) //设置每个脚本进行等待wait,即每个脚本彼此依赖  

    .script("script1.js") // script1, script2, script3, and script4 *DO* depend on each   

    .script("script2.js") // other, and will execute serially in order after all 4 have have  

    .script("script3.js") // loaded in parallel  

    .script("script4.js")  

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

   

例子8:

$LAB  

    .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  

        }  

    })  

    .script("script1.js")  

    .wait();  

例子9:

$LAB  

    .queueScript("script1.js") // script1, script2, and script3彼此不依赖所以按照任意顺序执行  

    .queueScript("script2.js")   

    .queueScript("script3.js")  

    .queueWait(function(){    

               //执行wait(...) 函数functions   

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

    })  

    .queueScript("script4.js") // 依赖 script1, script2 and script3  

    .queueWait(function(){script4Func();});//执行函数4  

      

    // ...  

      

    $LAB  

    .runQueue() // 执行队列$LAB链  

    .script("script5.js")  

    .wait(function(){  

        alert("Script 5 loaded and executed off the end of a previously queued chain.");  

    });