JavaScript文件加载器LABjs API详解
2015-07-31 11:06
711 查看
在《高性能JavaScript》一书中提到了LABjs这个用来加载JavaScript文件的类库,LABjs是Loading And Blocking JavaScript的缩写,顾名思义,加载和阻塞JavaScript,而它的API script()和wait()则优雅地实现了这两个功能,我在高性能JavaScript 加载和执行一文中也简单讲解了这两个核心API的用法。当然,LABjs还有更多的API,本文用实例讲解下LABjs其他API。
AlwaysPreserveOrder
一个布尔值(默认false),如果设置为true,则每个script()后都会默认设置一个wait(),使得链上的脚本一个个执行。
UseLocalXHR
一个布尔值(默认true),如果是true的话,LABjs会用XHR Ajax去预加载同域的脚本文件。值得注意的是,只应用在老式的Webkit浏览器(那些既不能使用ordered-async也不能实现真正的预加载的浏览器),而且同域的情况下,该设置才起效(不然直接无视)
CacheBust & AllowDuplicates
LABjs对于缓存有一些奇怪的处理(关于缓存,可以参考我前面的一篇文章浏览器缓存机制浅析),比如如下代码:
很简单对吧?第一次载入,没有任何问题,HTTP200从server端下载。但是f5后:
(2015-8-3 这个问题有点诡异,有时HTTP304,有时HTTP200from cache 我也在github上询问了作者 LABjs reads from cache when f5,回复的大概意思是cache和labjs没有任何关系,只和服务器和浏览器设置有关)
居然是从缓存读取的!这就是说服务端的改动,对它不起效果!而通常情况下f5后是会向服务器发送请求的,如果服务端文件没有修改返回HTTP304读取缓存,如果修改了文件直接load新的。针对这个问题我们可以使用CacheBust选项:
这样就能保证每次都从服务端读取文件(从不读取缓存)。
还有一个问题,对于几个相同的请求,LABjs默认只会执行一次:
实际上index.js这个文件只执行了一次!如果index.js里的代码是打印hello world,也就是说只会被打印一次。如何做到能打印三次?用AllowDuplicates:
实际上上面的代码,尽管会执行三次index.js,但是请求只有一次,其他两个都是缓存读取,而且如前面所说,如果服务端修改了,也会从缓存读取,这太可怕了。所以AllowDuplicates可以配合[b]CacheBust[/b]使用:
其实就是带了一串代表请求唯一的字符串,这在ajax请求中很常见。
BasePath
一个字符串(默认空串),会将这个字符串加在每个script()里的URL的最前面。
Debug
一个布尔值(默认false),如果开启debug选项的话,会在控制台打印信息,需要注意的是,只有使用了LAB-debug.min.js或者LAB.src.js该选项才work。
如上脚本就能在1000ms后执行,这样的效果貌似script()配合定时器也能实现,但是在未来某一不确定时刻执行就不行了(比如说一段指定代码后)。如果有两个链要在未来某时刻执行呢?
如上代码并没能得到预想的结果(实际上1000ms后一起输出),这时就需要用sandbox()创建一个新的实例。
read more from LAB documentation
$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可以配合[b]CacheBust[/b]使用:
$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 这个解释应该是错的)read more from LAB documentation
相关文章推荐
- Js_学无止境之延迟加载
- Echarts ajax动态加载json数据
- 关于手机号码、邮箱的在JavaScript中的正则表达式和其简单用法
- 理解javascript中的原型和原型链
- AS3和JS通信并调用qq空间分享界面
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- EXTJs错误:Batch update returned unexpected row count from update [0]; actual row count: 0;
- 文章标题 JSP文件是否有必要放在WEB-INF下
- javascript常用正则表达式汇总
- javascript 数组去重的几种方法
- JS正则表达式验证数字非常全
- JS正则表达式验证数字非常全
- Json简介与转换数据例子
- JavaScript中的三种弹出对话框
- Javascript中this关键字详解
- avascript处理JSON数据格式
- JMeter中对于Json数据的处理方法
- Json
- js关闭窗口
- Ajax上传实现根据服务器端返回数据进行js处理的方法