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

智能推荐

MyBatis-Plus QueryWrapper及LambdaQueryWrapper的使用_lambdaquerywrapper查询一条最近记录-程序员宅基地

文章浏览阅读5.3k次,点赞6次,收藏10次。假如我们有一张banner_item表,现需要通过banner_id查出所有数据(查询List)@Datapublic class BannerItem { private Long id; private String name; private String img; private String keyword; private Integer type; private Long bannerId;}QueryWrapp.._lambdaquerywrapper查询一条最近记录

现场嵌入式设备中的EC20模块如何通过互联网将TCP报文传输到家庭局域网_ec20双端口连接-程序员宅基地

文章浏览阅读850次。情况说明: 现场有几台嵌入式设备,每台设备上有一块EC20模块做为TCP客户端,希望将现场采集的传感器数据通过互联网传输到家庭局域网,在家庭局域内任意一台电脑经过配置IP地址后,上面运行一个用C#语言编写的服务器程序,就可以接收现场设备采集的传感器数据。一、家庭网关IP地址1、IP地址218.6.144.60二、家庭网关私网IP地址和私网端口号 1、私网IP地址192.168.16.201 2、私网端口号5000三、嵌入式设备TCP客户端连..._ec20双端口连接

Improving Software Security Analysis using Exploitation Properties_intersecting elements found csdn-程序员宅基地

文章浏览阅读1.5k次。Improving Software Security Analysis using Exploitation Properties12/2007skape [email protected] AbstractReliable exploitation of software vulnerabilities has continued to become more_intersecting elements found csdn

机器学习-分类模型(鸢尾花案例)_鸢尾花模型-程序员宅基地

文章浏览阅读5.2k次,点赞8次,收藏103次。众所周知,鸢尾花根据 '花瓣长度','花瓣宽度','花萼长度','花萼宽度',分为三类,在数据集中分别用0,1,2来表示类别本次就是通过对鸢尾花特征进行训练来判断出为哪一类,用到了分类算法的4个模型一 导入库函数和数据集,该数据已经分好了训练集和测试集,直接导入import numpy as npimport pandas as pdimport matplotlib.pyplot as pltdata_train = pd.read_csv('./iris_training.csv'_鸢尾花模型

在windows上搭建cs231n本地作业环境_cs231n在本地运行-程序员宅基地

文章浏览阅读731次,点赞2次,收藏3次。在windows上搭建cs231n本地作业环境最近在学习斯坦福大学计算机视觉实验室推出的 cs231n 这门课,在此分享一些自己的学习心得,希望在提升自己的同时能帮大家解决一些小问题。搭建本地作业环境下载作业包 Spring 2020 Assignments(IE浏览器打不开,换其它浏览器)下载好后解压(我放在了桌面)下载数据集CIFAR-10,解压后放到作业代码下的cs231n/datasets里(作业一)下载Anaconda:Anaconda官网在网页底端找到对应版本下载并安装_cs231n在本地运行

centos8.2使用docker安装mysql5.7并导入sql文件_sql注入 mysql linux docker centos-程序员宅基地

文章浏览阅读1.5k次,点赞4次,收藏3次。centos8.2使用docker安装并启动mysql5.71.安装mysql5.72.查看镜像2.运行容器3.安装成功拷贝sql文件4.进入容器5进入mysql6.创建数据库并导入1.安装mysql5.7docker pull mysql5.7 //指定版本5.7 docker pull mysql //不指定版本默认拉取最新版本2.查看镜像docker images2.运行容器docker run --name mysql5.7 -p 3306:3306 -e MYSQL_ROOT__sql注入 mysql linux docker centos

随便推点

java/php/node.js/python电影院订票管理系统【2024年毕设】-程序员宅基地

文章浏览阅读60次。本系统带文档lw万字以上文末可领取本课题的JAVA源码参考。

我在淘宝帮别人写代码,月入10万!-程序员宅基地

文章浏览阅读1.3w次,点赞2次,收藏22次。在淘宝上随便一搜,就会出来一大堆“程序代做”、“程序代写”之类的服务,店家声称可以提供程序设计、软件开发等各种服务。进店后还可以看到各种好评:有一位曾经在淘宝找过代写代码服务的人讲述了整个..._程序代工淘宝

windows操作系统用 openssl 生成 RSA密钥_windows openssl 生成 pkcs8 密钥 路径在哪里-程序员宅基地

文章浏览阅读1k次。openssl genrsa -out rsa_private_key.pem 1024openssl rsa -in rsa_private_key.pem -out rsa_public_key.pem -puboutopenssl pkcs8 -topk8 -in rsa_private_key.pem -out pkcs8_rsa_private_key.pem -nocrypt_windows openssl 生成 pkcs8 密钥 路径在哪里

matlab人工选择阈值进行分割,基于MATLAB的图像阈值分割算法的研究-程序员宅基地

文章浏览阅读3.6k次。[摘要]:图像分割是一种重要的数字图像处理技术。本文首先介绍了图像分割技术,其次总结了目前图像分割技术中所用到的阈值、边缘检测、区域提取等方法以及分水岭算法。针对各种阈值分割算法,本文在最后做了详细的研究,并给出了相应的MATLAB程序源代码。[关键词]:数字图像处理;图像分割;阈值;算法ResearchonlgorithmAbstract:ImageInthisthesis,thedigi..._基于matlab的数据阈值处理

【吐血整理】那些让你起飞的计算机基础知识:学什么,怎么学?-程序员宅基地

文章浏览阅读399次。戳蓝字“CSDN云计算”关注我们哦!作者 |帅地责编 | 阿秃我公众号的读者学生以及非科班的应该挺多的,所以我今天这篇文章就写一写,我学过的计算机基础知识,看过的书以及我学过的顺序当然,以下是我个人的一些经验,并且学过的一些知识,仅供参考,也欢迎大家进行补充一、计算机网络在我们用的程序中,99% 都离不开网络,作为一个程序员,我觉得了解计算机网络是必须的,在大学的课程中,一般也都会开设这一门课。..._操作系统学起枯燥

CentOS 安装桌面版向日葵_centos webkitgtk3anzhuang-程序员宅基地

文章浏览阅读6.7k次,点赞2次,收藏20次。1.下载官方的rpm包通过页面下载或者wget下载,无论通过页面安装还是命令安装都会提示失败,缺失依赖,如下:rpm -ivh SunloginClient-10.1.1.38139_amd64.rpm 错误:依赖检测失败: webkitgtk3 被 sunloginclient-10.1.1.38139-1.x86_64 需要 libappindicator-gtk3 被 sunloginclient-10.1.1.38139-1.x86_64 需要2.解决liba._centos webkitgtk3anzhuang

推荐文章

热门文章

相关标签