linux下Js加载so,JavaScript文件加载器LABjs API详解

在《高性能JavaScript》一书中提到了LABjs这个用来加载JavaScript文件的类库，LABjs是Loading And Blocking JavaScript的缩写，顾名思义，加载和阻塞JavaScript，而它的API script()和wait()则优雅地实现了这两个功能，我在高性能JavaScript 加载和执行一文中也简单讲解了这两个核心API的用法。当然，LABjs还有更多的API，本文用实例讲解下LABjs其他API。

$LAB.setGlobalDefaults() & $LAB.setOptions()

两者所能设置的参数完全一致，不同的是，前者是全局设置，作用在所有的$LAB链上；后者出现在某条链的开头位置(后面接script()、wait()等)，该设置只作用在这条链上。该参数可以是一个包含多个键值对的对象。

AlwaysPreserveOrder

一个布尔值(默认false)，如果设置为true，则每个script()后都会默认设置一个wait()，使得链上的脚本一个个执行。

$LAB

.setOptions({AlwaysPreserveOrder:true}) //tells this chain to implicitly "wait" on

//execution (not loading) between each script

.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();});

UseLocalXHR

一个布尔值(默认true)，如果是true的话，LABjs会用XHR Ajax去预加载同域的脚本文件。值得注意的是，只应用在老式的Webkit浏览器(那些既不能使用ordered-async也不能实现真正的预加载的浏览器)，而且同域的情况下，该设置才起效(不然直接无视)

CacheBust & AllowDuplicates

LABjs对于缓存有一些奇怪的处理(关于缓存，可以参考浏览器缓存机制浅析)，比如如下代码：

$LAB.script('index.js');

很简单对吧？第一次载入，没有任何问题，HTTP200从server端下载。但是f5后：

(2015-8-3 这个问题有点诡异，有时HTTP304，有时HTTP200from cache 我也在github上询问了作者 LABjs reads from cache when f5，回复的大概意思是cache和labjs没有任何关系，只和服务器和浏览器设置有关)

居然是从缓存读取的！这就是说服务端的改动，对它不起效果！而通常情况下f5后是会向服务器发送请求的，如果服务端文件没有修改返回HTTP304读取缓存，如果修改了文件直接load新的。针对这个问题我们可以使用CacheBust选项：

$LAB.setGlobalDefaults({CacheBust: true})

$LAB.script('index.js');

这样就能保证每次都从服务端读取文件(从不读取缓存)。

还有一个问题，对于几个相同的请求，LABjs默认只会执行一次：

$LAB.script('index.js').script('index.js');

$LAB.script('index.js');

实际上index.js这个文件只执行了一次！如果index.js里的代码是打印hello world，也就是说只会被打印一次。如何做到能打印三次？用AllowDuplicates：

$LAB.setGlobalDefaults({AllowDuplicates: true})

$LAB.script('index.js').script('index.js');

$LAB.script('index.js');

实际上上面的代码，尽管会执行三次index.js，但是请求只有一次，其他两个都是缓存读取，而且如前面所说，如果服务端修改了，也会从缓存读取，这太可怕了。所以AllowDuplicates可以配合CacheBust使用：

$LAB.setGlobalDefaults({AllowDuplicates: true, CacheBust: true})

$LAB.script('index.js').script('index.js');

$LAB.script('index.js');

其实就是带了一串代表请求唯一的字符串，这在ajax请求中很常见。

BasePath

一个字符串(默认空串)，会将这个字符串加在每个script()里的URL的最前面。

Debug

一个布尔值(默认false)，如果开启debug选项的话，会在控制台打印信息，需要注意的是，只有使用了LAB-debug.min.js或者LAB.src.js该选项才work。

$LAB.script() & $LAB.wait()

script()里的参数可以是很多形式，比如字符串(文件的相对路径或者绝对路径)、对象(src、type、charset src必须)、数组或者方法(或者前者们的组合)，更多demo可以参考Example 8 below。前三者很好理解，这里简单提下参数为function的情况，当script()里的参数是个匿名的function的时候，该function会立即执行，它可以return一个值，而该值必须是以上说的string、object或者array形式，相当于给该script()赋值了。

$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();

$LAB.queueScript() & $LAB.queueWait() & $LAB.runQueue() & $LAB.sandbox()

script()和wait()会使得脚本立即执行(除非设置定时器)，但是queueScript()和queueWait()能使得脚本在任意时刻执行，执行的时候带上runQueue()就行了。

var a = $LAB.queueScript('index.js').queueWait(function() {

console.log('hello world');

});

setTimeout(function() {

a.runQueue()

},1000);

如上脚本就能在1000ms后执行，这样的效果貌似script()配合定时器也能实现，但是在未来某一不确定时刻执行就不行了(比如说一段指定代码后)。如果有两个链要在未来某时刻执行呢？

var a = $LAB.queueScript('index.js').queueWait(function() {

console.log('hello world');

});

setTimeout(function() {

a.runQueue()

},1000);var b = $LAB.queueScript('index2.js').queueWait(function() {

console.log('hello world');

});

setTimeout(function() {

b.runQueue()

},2000);

如上代码并没能得到预想的结果(实际上1000ms后一起输出)，这时就需要用sandbox()创建一个新的实例。

var a = $LAB.queueScript('index.js').queueWait(function() {

console.log('hello world');

});

setTimeout(function() {

a.runQueue()

},1000);var b = $LAB.sandbox().queueScript('index2.js').queueWait(function() {

console.log('hello world');

});

setTimeout(function() {

b.runQueue()

},2000);

$LAB.noConflict()

使用noConflict()会将当前版本的LABjs回滚到旧的版本。(2015-08-04 这个解释应该是错的)