在《高性能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 这个解释应该是错的)

linux下Js加载so,JavaScript文件加载器LABjs API详解相关推荐

  1. linux文件系统添加pcm,linux下用sox批量将pcm文件加wav头、批量修改采样率、切音频...

    linux下用sox可以给pcm文件加头 例如:test.pcm是不带wav头的pcm文件 $ sox -t raw -c 1 -e signed-integer -b 16 -r 16000 tes ...

  2. linux上连接ftp服务器,linux下lftp连接ftp服务器进行上传与下载的方法详解

    摘要 腾兴网为您分享:linux下lftp连接ftp服务器进行上传与下载的方法详解,中英翻译,中建在线,掌上看家,银行帮等软件知识,以及微信一键转发工具,小学英语冀教版,正是在下表情包,易问电信,万能 ...

  3. linux下 卸载qt_Ubuntu14.04安装、配置与卸载QT5的步骤详解

    1.之前我下载的是QT5.13版本但是安装结束后Qtcreator出现打不开,这里我推荐Qt5.9版本,下载网址如下: https://download.qt.io/official_releases ...

  4. 迅为linux下串口,迅为iMX6UL开发板多路串口开发平台接口详解

    原标题:迅为iMX6UL开发板多路串口开发平台接口详解 iMX6UL开发板 核心板参数 尺寸:38mm*42mm CPU:iMX6UL 主频528MHz ARM Cortex-A7架构 单核 内存:5 ...

  5. 使用JavaScript创建音乐播放器的案例详解

    英文 | https://www.geeksforgeeks.org/create-a-music-player-using-javascript/?ref=leftbar-rightbar 翻译 | ...

  6. 怎么修改服务器上的cpt文件,DELL-服务器-RAID-配置详解(28页)-原创力文档

    DELL 服务器 RAID 配置详解 磁盘阵列可以在安装系统之前或之后产生,系统会视之为一个(大型)硬盘,而它具有容 错及冗余的功能.磁盘阵列不单只可以加入一个现成的系统,它更可以支持容量扩展,方 法 ...

  7. 迅为linux下串口,迅为iMX6UL开发板多路串口开发板接口详解

    迅为iMX6UL开发板 一.底板硬件描述: 1.POWER电源接口 电源输入为5V/2A+,给核心板提供5V电源,给底板供电. 原理图部分如下图所示. 电源接口位置如下图所示. 2.SWITCH电源开 ...

  8. linux系统添加外部磁盘阵列,Linux下添加磁盘阵列空间(vdisk盘),分区,格式化详解...

    sfdisk -l 确定/dev/sda是新识别到的存储vdisk盘. 1.创建分区 [root@yyxtdb1 init.d]#fdisk /dev/sda Command (m for help) ...

  9. linux如何将ntfs删除文件,【实习记】2014-09-26恢复linux下误删的ntfs盘中的文件

    情景,ubuntu下把NTFS格式的盘中的"实习记"文件夹彻底删除了,追毁莫及,粗心觉不是一件好的事情. linux下回复ntfs盘下的文件不能用ext3grep,而使用debug ...

  10. Linux 下的用户、用户组、文件权限设置

    给用户增加执行权限 chmod u+x a.txt 给用户所属组增加写权限,其他用户删除读权限 chmod g+w,o-r a.txt 给用户所属组增加读写执行权限 chmod g=rwx a.txt ...

最新文章

  1. 学习完Ajax的总结
  2. Script:收集11g Oracle实例IO性能信息
  3. python做接口自动化如何输出测试报告-python生成接口自动化测试报告模版
  4. eclipse编辑jsp文件和javascript代码很卡解决办法
  5. 【操作系统】多线程与多任务的比较
  6. 形成性考核(计算机应用基础) 答案,2019年最新电大《计算机应用基础(Win7)》形成性考核册及答案.pdf...
  7. C语言文件的随机读写
  8. BEST定理:有向图欧拉回路个数(bzoj 3659: Which Dreamed It)
  9. 14个新鲜的免费图标集
  10. 雷达存在感应器技术,实时感知控制应用,雷达人体探测方案
  11. boost电路输出电流公式_boost计算公式
  12. Object.defineProperty是Es5中无法shim的特性 shim是什么?
  13. IOS 苹果自带地图、百度地图、高德地图打开方式
  14. (基础)详解Python实现图像分割增强的两种方法
  15. Koolshare端口转发
  16. 强势入局金融云,信服云能否扛起“中国的VMware”这杆大旗?
  17. Linux的常用命令和练习记录
  18. 闭观修炼中........!
  19. 工厂进销存软件哪家好,有没有适合服装厂使用的?
  20. WS2812B使用备忘

热门文章

  1. matlab大地坐标与经纬度转换,如何把经纬度转化为大地坐标
  2. 堆排序(Heapsort)-全网最详细
  3. 求助文章#C语言 #普中51单片机开发板
  4. unity视频教程【高清+精选】大放送
  5. 语音信号处理-python
  6. FAT文件系统解析(一) 引导扇区、FAT表及根目录区分析
  7. 课后自主练习(排序)1019. 文件排序 easy《编程思维与实践》个人学习笔记
  8. JSP实战项目教程|基于JSP的学生请假系统开发视频教程
  9. Eclipse快捷键的设置和使用(大小写快捷键等)
  10. Booth算法运算原理