首页 > 其他分享 >LABjs异步加载组件

LABjs异步加载组件

时间:2023-04-17 16:36:12浏览次数:42  
标签:异步 script LAB js LABjs script1 script3 wait 加载


加载外部 js 的方法大致有这么几种:

方法

说明

XHR Eval

      通过 Ajax 方式获取代码,并通过 eval 方式执行代码。

XHR Injection

      通过 Ajax 方式获取代码,并在页面上创建一个 script 元素,将 Ajax 取得的代码注入。

Script in Iframe

       通过 iframe 加载 js。

Script DOM Element

       使用 JavaScript 动态创建 script DOM 元素并设置其 src 属性。

Script Defer/Async

严格来说,这一条不算是动态加载外部脚本的方法,但很多动态加载外部脚本的方法里都会用到 sctipt 的 defer 或 async 属性,所以也把它单独列在这儿。这个方法利用 script 的 defer 属性,让脚本“推迟”执行,不阻塞页面加载,或者设置 async 属性,让脚本异步执行。遗憾的是这两个属性不是所有浏览器都支持。

document.write Script Tag

通过 document.write 把 HTML 标签 script 写入到页面中。

cache trick

先使用自定义的 script 的 type 属性(如 <script type="text/cache" ...),甚至使用 Image、Object 等 HTML 对象将 js “预下载”(下载到浏览器缓存里),等真正需要执行对应代码时再将它真正地插入页面中。

Web Worker

部分浏览器支持 web worker 功能,可以创建一个 worker 在后台工作,包括加载外部脚本。

LABjs方法


参数值为:


AlwaysPreserveOrder一个布尔值(默认值为false),控制是否一个隐式空wait()调用假定每个脚本加载后,基本上所有的脚本在链条部队执行串行顺序(加载并联,默认情况下,不受此设置)。
UseLocalXHR 一个布尔值(默认值为true)用ajax XHR来预加载脚本
AllowDuplicates


一个布尔值(缺省为false)控制LABjs是否会检查其内部脚本URL缓存以防止脚本URI被(不小心,很可能)加载一次。默认情况下,LABjs不会让任何重复请求相同的脚本的URL。
BasePath 本地脚本的基本路径
CacheBust一个布尔值(缺省为false)增加了一个随机数字参数,防止每个脚本的URL从你的请求的URL缓存取
Debug 布尔值,用于web控制台将记录$LAB各个步骤的加载/处理逻辑,这个属性只有在引入LABjs源码或者 LAB-debug.min.js文件后才生效
$LAB.setOptions()


设置一个或多个选项只有在影响当前$LAB正在执行链,此方法必须是$LAB链第一个执行方法。参数和setGlobalDefaults()一样。格式为:$LAB.setOptions({...}).script(...)...
$LAB.script() 加载脚本
传递参数:
string 一个相对或者绝对的script地址
object对象 包含如下属性:
          src script文件的位置
          type指定类型 ("text/javascript", "text/vbscript")
          charset指定字符编码
array数组
function函数 如果一个函数是发现作为参数之一,该函数将会被立即执行,必须直接返回一个值。返回值必须是另一个容许类型(字符串、对象或数组)。如果函数调用的结果在任何返回值(“未定义”)或值是“falsy”(false,空等),它将被视为没有脚本加载

$LAB.wait()
这个函数有两个目的。
首先,插入到链,以确保所有脚本之前列出的链应该执行完后继续余下的部分的链。
其次,你可以指定一个函数参考(通常一个内联匿名函数),将按顺序执行的,紧跟着链条之前的脚本执行。
$LAB.queueScript()
把加载的script放到队列里边
$LAB.queueWait()
把执行的函数放到队列列表
$LAB.runQueue()
执行队列里的queueScript()和queueWait()
$LAB.noConflict()
防止$LAB占用
$LAB.sandbox()
sandbox()创建一个新的干净的$LAB。这允许您获取新实例的实验室,比如如果你需要一个新的队列使用queueWai()或 queueScript()。


例子:


例子1:


$LAB.script("script1.js")
	.script("script2.js")
	.script("script3.js")
	.wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数
		script1Func();
		script2Func();
		script3Func();
	});


$LAB	
	.script({ src: "script1.js", type: "text/javascript" })
	.script("script2.js")
	.script("script3.js")
	.wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数
		script1Func();
		script2Func();
		script3Func();
	});


$LAB
	.script("script1.js", "script2.js", "script3.js")
	.wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数
		script1Func();
		script2Func();
		script3Func();
	});


$LAB
	.script( [ "script1.js", "script2.js" ], "script3.js")
	.wait(function(){ // 等待所有的脚本执行完毕后才执行下面函数
		script1Func();
		script2Func();
		script3Func();
	});


$LAB
	.script("script1.js").wait() // 空wait() 只是简单确定执行顺序
	.script("script2.js") // script2和script3依赖script1,必须让script1先执行,而script2和script3没有具体执行顺序
	.script("script3.js").wait() // 空wait() 只是简单确定执行顺序
	.script("script4.js") // 依赖script1, script2 和 script3,这3个先加载
	.wait(function(){script4Func();});//执行脚本4函数


$LAB
	.script("script1.js") // script1, script2, 和 script3互补依赖所以没有执行顺序, 
	.script("script2.js") 
	.script("script3.js")
	.wait(function(){  
                 //执行wait(...) 里的函数functions 
		alert("Scripts 1-3 are loaded!");
	})
	.script("script4.js") //  依赖script1, script2 and script3
	.wait(function(){script4Func();});


 例子7:


$LAB
	.setOptions({AlwaysPreserveOrder:true}) //设置每个脚本进行等待wait,即每个脚本彼此依赖
	.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();});


$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("script1.js") // script1, script2, and script3彼此不依赖所以按照任意顺序执行
	.queueScript("script2.js") 
	.queueScript("script3.js")
	.queueWait(function(){  
               //执行wait(...) 函数functions 
		alert("Scripts 1-3 are loaded!");
	})
	.queueScript("script4.js") // 依赖 script1, script2 and script3
	.queueWait(function(){script4Func();});//执行函数4
	
	// ...
	
	$LAB
	.runQueue() // 执行队列$LAB链
	.script("script5.js")
	.wait(function(){
		alert("Script 5 loaded and executed off the end of a previously queued chain.");
	});

 


官网文档

http://labjs.com/documentation.php


标签:异步,script,LAB,js,LABjs,script1,script3,wait,加载
From: https://blog.51cto.com/u_16071779/6195448

相关文章

  • Mapboxgl Chrome75版本下发现问题:中文标签无法加载,由Canvas的measureText()方法导致
    很刁钻的问题,排查了好久。我自己开发测试用的浏览器(版本为112)运行正常,在老版本(75)谷歌浏览器报错如下:mapbox-gl.js:32UncaughtTypeError:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Valueisnotoftype'long'.atMp.TinySDF.draw(mapbox-gl.j......
  • CefSharp 启动 未能加载由"CefSharp.Core.Runtime.dll"导入的过程
    系统:Windows8.1CefSharp:112.2.70(当前最新稳定版)完整报错信息System.IO.FileLoadException:“未能加载由“CefSharp.Core.Runtime.dll”导入的过程。”  解决Readme.txt中已表示CefSharp109以后的版本不支持Windows10以下的操作系统:也就是说,如果是Windows10以下操......
  • JavaScript中 处理异步的几种方法
    1.回调函数回调(callback)是一个函数被作为一个参数传递到另一个函数里,在那个函数执行完后再执行。假定有两个函数f1和f2,f2等待f1的执行结果,f1()–>f2();如果f1很耗时,可以改写f1,把f2(箭头函数)写成f1的回调函数:functionf1(callback){setTimeout(()=>{letname='小明'......
  • 同步异步阻塞费阻塞
       同步和异步是内核代码实现的方式阻塞和非阻塞:获取结果的方式(等待还是不等待)......
  • js 异步任务执行顺序问题
    js是单线程的(非阻塞的),实现方法就是事件循环;分同步任务和异步任务;newPromise((resolve,reject)=>{resolve(1)console.log('log1')}).then(()=>{console.log('log2')})console.log('log3')setTimeout(()=>......
  • java——maven——分模块——资源加载属性值
    第一步:   第二步:    第三步:                       ......
  • springboot项目打成jar包后 ,配置文件加载的优先级顺序
    SpringBoot会按照以下顺序来加载配置文件:1、内置默认值:SpringBoot会首先加载内置的默认值,这些默认值定义在SpringBoot的代码中,例如,内置的默认端口号为8080。2、应用级别的配置文件:SpringBoot会从以下位置加载应用级别的配置文件,这些位置按照优先级逐一检查:当前目录下的/c......
  • delphi FastReport 从流(数据库)中加载和保存报表
    FastReport从流(数据库)中加载和保存报表属性和方法TfrxReport.LoadFromStreamprocedureLoadFromStream(Stream:TStream);从流中加载报表。参数Stream来源流。TfrxReport.SaveToStreamprocedureSaveToStream(Stream:TStream);将报表保存到流中。参数Stream来源......
  • 驱动模块加载三要素例子
    #include<linux/kernel.h>#include<linux/module.h>#include<linux/cdev.h>#include<linux/fs.h>#defineHELLO_MAJOR250#defineHELLO_MINOR0#defineDEV_NUM1#defineDEV_NAME"hello_world&qu......
  • mapbox-gl实战教程:加载各种底图技巧2
    接续上篇,本篇继续讲mapbox-gl加载各种底图的技巧。五、矢量切片底图加载矢量切片(vectortiles)是随着mapbox-gl产生的一种地图切片格式,相比于之前的影像/图片格式的切片,矢量切片可以在客户端进行样式设置,当用户觉得地图配色等不满足要求时,只需要在客户端调整配置即可。矢量切片加......