linux下Js加载so,JavaScript文件加载器LABjs API详解-程序员宅基地

技术标签: linux下Js加载so  

在《高性能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后:

1fa76c147a708e017b2e1a5a996a9520.png

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

9bfcf6c9c49bd23a7007a4542a1ba332.png

其实就是带了一串代表请求唯一的字符串,这在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 这个解释应该是错的)

0b1331709591d260c1c78e86d0c51c18.png

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36234452/article/details/116954452

智能推荐

python全栈开发—函数再战—实现模块化设计_全栈开发与数学-程序员宅基地

文章浏览阅读256次。函数再战—熟练基础,精通技能,触类旁通之所以又整理了一遍函数,主要是因为当我进行后续学习的时候,发现函数比想象的要NB的多,于是又厚着脸皮又来了一遍,嗯,果然很NB。建议在学习的过程中遇到了难题,记得回头复习复习,也许正是那些你忽略的内容,给未来的你营造出自己是SB的难题。内容概括:函数基本语法及特性函数与局部变量返回值嵌套函数递归匿名函数函数式编程介绍高阶函数内置函数..._全栈开发与数学

在vs开发环境中用opencv读取图片,Debug模式下成功,release模式下失败的可能原因_visual studio的debug模式可以include opencv release模式不行-程序员宅基地

文章浏览阅读921次。1 检查一下release模式下的链接器的输入,其依赖的lib名称最后一个字母是没有"d",d代表debug如图:2 检查一下路径,看是否因为带中文的路径导致编码错误..._visual studio的debug模式可以include opencv release模式不行

教你一步一步使用Excel获取API接口的金融数据_excel的api key-程序员宅基地

文章浏览阅读5.6k次,点赞7次,收藏26次。在用EXCEL做量化分析的时候,经常需要通过一些金融数据平台的API接口,获取各种数据。最常用的公共API接口有Yahoo Finance,Google Finance,新浪财经,搜狐财经等。这些都不需要注册,就可以直接使用。获取方式相对简单,但数据种类不够丰富,通常只包括交易数据和财务数据。另外一些免费的金融数据平台,如国外的Quandl和国内的Tushare也都提供了API接口,数据种类更..._excel的api key

ThinkPHP去除url中的index.php,绝对管用!-程序员宅基地

文章浏览阅读1.6k次。例如你的原路径是 http://localhost/test/index.php/index/add那么现在的地址是 http://localhost/test/index/add如何去掉index.php呢?1.httpd.conf配置文件中加载了mod_rewrite.so模块 //在APACHE里面去配置#LoadModule rewrite_module modu

Qt核心机制与原理_qt原理-程序员宅基地

文章浏览阅读3.8k次,点赞5次,收藏39次。★了解Qt和C++的关系★掌握Qt的信号/槽机制的原理和使用方法★了解Qt的元对象系统★掌握Qt的架构★理解Qt的事件模型,掌握其使用的时机信号与槽、元对象系统、事件模型是Qt机制的核心,如果您想要掌握Qt编程,就需要对它们有比较深入的了解。本章重点介绍了信号与槽的基本概念和用法、元对象系统、Qt的事件模型,以及它们在实际使用过程中应注意的一些问题。Qt对标准C++的扩展标准C++对象模型为面向对象编程提供了有效的实时支持,但是它的静态特性在一些领域中表现的不够灵活。事实上,GUI应用程序_qt原理

CC2640R2F BLE5.0 TI-RTOS概述_ti rtos 总中断-程序员宅基地

文章浏览阅读8.2k次,点赞3次,收藏25次。TI-RTOS概述TI-RTOS是CC2640R2F设备上蓝牙低能耗项目的运行环境。TI-RTOS内核是传统SYS/BIOS内核的定制版本,可作为具有驱动程序,同步和调度工具的实时抢占式多线程操作系统。线程模块TI-RTOS内核管理线程执行的四个不同的任务级别,如图21所示。线程模块列表如下图所示,按照优先级降序排列。硬件中断软件中断任务后台空闲功能的空闲任务_ti rtos 总中断

随便推点

爬虫框架 - feapder_feapder 网盘-程序员宅基地

文章浏览阅读1.0k次。1. 前言众所周知,Python 最流行的爬虫框架是 Scrapy,它主要用于爬取网站结构性数据今天推荐一款更加简单、轻量级,且功能强大的爬虫框架:feapder项目地址:https://github.com/Boris-code/feapder2. 介绍及安装和 Scrapy 类似,feapder 支持轻量级爬虫、分布式爬虫、批次爬虫、爬虫报警机制等功能内置的 3 种爬虫如下: AirSpider 轻量级爬虫,适合简单场景、数据量少的爬虫 Spider._feapder 网盘

《数据结构与算法分析:Java语言描述》.pdf-程序员宅基地

文章浏览阅读6k次,点赞2次,收藏6次。关注“Java后端技术全栈”回复“面试”获取全套大厂面试资料程序=数据结构+算法这好比是软件工程师的“武林秘籍”。数据结构指的是数据与数据之间的逻辑关系;算法指的是解决特定问题的步骤和方..._数据结构与算法分析java语言描述pdf

PyTorch——自注意力(self-attention)机制实现(代码详解)_自注意力机制代码-程序员宅基地

文章浏览阅读8w次,点赞111次,收藏691次。参考链接https://www.bilibili.com/video/BV1JE411g7XF?p=54https://arxiv.org/abs/1706.03762https://blog.csdn.net/qq_36653505/article/details/83375160简述自注意力机制(self-attention)self-attention可以视为一个特征提取层,给定输入特征a1,a2,⋅⋅⋅ana^{1},a^{2},\cdot \cdot \cdot a^{n}a1,a2_自注意力机制代码

在Vue中应用cornerstone并且实时更新缩放比例等数据_浏览器缩放倍数变化时 更新数据 vue-程序员宅基地

文章浏览阅读1.6k次。在Vue中应用cornerstone并且跟随dicom实时更新缩放比例等数据最近需要在cornerstone的显示界面中显示一些数据,比如缩放比例以及渲染时间等,但是这些是需要根据鼠标事件进行实时更新的,想想肯定是有这个接口的,于是便试了一下。1、获取到当前视窗的对象获取到视窗这个对象因为它里面肯定会有许多属性可以直接被使用,刚好我们的缩放比例就是里面的scale,还有一些属性可以直接取用。..._浏览器缩放倍数变化时 更新数据 vue

C语言中常用的函数_c语言常用函数-程序员宅基地

文章浏览阅读3.1w次,点赞135次,收藏1k次。C语言中常用的函数1、putchar()函数2、getchar()函数3、pow( a , b )函数4、sqrt( a )函数5、fabs(a)函数6、puts(字符数组)函数——输出字符串的函数7、gets(字符数组)——输入字符串的函数8、strcat(a , b)函数——字符串连接函数9、strcpy函数——字符串复制函数10、strncpy函数——字符串复制函数11、strcmp函数——字符串比较函数12、strlen函数——测量字符串长度的函数13、strlwr函数——转换为小写的函数14、_c语言常用函数

webpack打包时如何修改文件名_webpack打包文件名称设置-程序员宅基地

文章浏览阅读5k次。webpack打包时如何修改文件名在使用webpack进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改_webpack打包文件名称设置

推荐文章

热门文章

相关标签