Lab.js首次使用注意事项

时间：2021-10-13 来源：互联网编辑：宝哥软件园浏览：次

动态加载JS函数。

一般当我们需要加载js文件时，会使用脚本标签来实现，类似于下面的代码：复制代码如下： script type=' text/JavaScript ' src=' http 3360 example . js '/script，但是直接使用脚本标签加载js文件会有如下一些缺点：

1.严格的阅读顺序。由于浏览器按照脚本在网页中出现的顺序读取Javascript文件，然后立即运行，当多个文件相互依赖时，依赖度最小的文件必须放在前面，依赖度最大的文件必须放在后面，否则代码会报错。

2.性能问题。浏览器使用“同步模式”加载脚本标签，即页面会被“阻塞”，等待javascript文件被加载，然后运行下面的HTML代码。当存在多个脚本标签时，浏览器无法同时读取，必须先读取一个，再读取另一个，导致读取时间大大延长，页面响应变慢。

这时，我们会想到动态加载js。动态加载JS的实现方法类似于下面的代码。

复制的代码如下：/**@desc:动态添加脚本* @加载js文件的param src:地址* @加载js文件后要调用的param回调3360回调函数*。@ demo : adddynamic style(' http://web resource . c-ctrl IP.com/code/c query/labjs/lab . js '，function () {alert('加载了携程服务器上的lab . js ')})；*/function addDynamicJS(src，callback){ var script=document . createelement(' script ')；script.setAttribute('type '，' text/JavaScript ')；script . src=src[I]；script.charset=' gb2312document.body.appendChild(脚本)；if(回调！=undefined){ script . onload=function(){ callback()；} }}

这不会造成页面阻塞，但会造成另一个问题：这样加载的Javascript文件不在原来的DOM结构中，所以在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对其无效。

这时，我们会想到使用一些外部函数库来有效地管理JS加载。

让我们言归正传，谈谈LAB.js

LAB.js

如果我们使用传统的方法加载js，编写的代码通常看起来像下面的代码。复制了以下代码： script src=' http 3360 AAA . js '/script script src=' http 3360 BBB-a . js '/script script src=' http 3360 BBB-b . js '/script script type=' text/JavaScript ' init AAA()；initBbb()；/script script src=' http : CCC . js '/script script type=' text/JavaScript ' initCcc()；/script

如果我们使用LAB.js，要实现上面的代码功能，我们使用以下方法。

复制代码如下：-首先加载lab.js库-script src=' http :3358 web resource . c-Ctrip.com/code/c query/lab js/lab . js '/script script type=' text/JavaScript ' $ lab . script(' AAA . js ')。wait()//the。不带参数的wait()方法意味着立即运行Javascript文件。脚本(' BBB-a.js ')。脚本(' BBB-b.js')//依次加载aaa.js bbb-a.js bbb-b.js然后执行initaainitbbb . wait(function(){///)的方法。带有参数的wait()还会立即运行刚刚加载的Javascript文件，但也会运行参数中指定的函数。initAaa()；initBbb()；}) .脚本(' ccc.js')//重载ccc.js并加载ccc.js后，执行initCcc方法。wait(function(){ initCcc()；});/script

您可以同时运行多个$LAB链，但它们是完全独立的，没有订单关系。如果你想确保一个Javascript文件一个接一个地运行，你只能在同一个链式操作中编写它们。只有当一些脚本完全不相关时，才应该考虑将它们分成不同的$LAB链，表明它们之间没有相关性。

一般性的使用示例复制代码代码如下：美元实验室。脚本('脚本1。js’)//脚本1、脚本2和脚本3相互不依赖，可以按照任意的顺序执行。脚本(' script2.js ').脚本(' script3.js ').等待(函数(){ alert('脚本1-3已加载!');}).脚本(' script4.js') //必须等待script1.js，script2.js，script3.js执行完毕之后才能执行wait(function(){ script 4 func()；});

复制代码代码如下：美元LAB.script('script.js ').脚本({ src: 'script1.js '，type: 'text/javascript' }).脚本(['script1.js '，' script2.js '，' script3.js']).脚本(函数(){ //假设主机页面定义的` _is_IE '在工业管理学(Industrial Engineering)中为没错，在其他浏览器中为假的，如果(_ is _ IE){ return ' IE。js '；//只有在工业管理学(Industrial Engineering)中，才会加载这个脚本} else { return null//如果不在工业管理学(Industrial Engineering)中，这个脚本调用将被有效忽略}})

在控制台看LAB.js的加载信息

如果你想调试或者说在控制台看各个射流研究…加载信息的话，可以使用$LAB.setGlobalDefaults方法，具体使用请看代码示例。

复制代码代码如下：-先加载携程的实验室库lab.js在网上也可以下载-脚本类型=' text/JavaScript ' src=' http :http://web资源。c-携程。com/code/c query/LABjs/lab。js ' charset=' GB 2312 '/脚本

脚本类型="文本/javascript "

$ LAB。SetGlobalDefaults({ Debug 3360 true })//打开调试

$LAB //第一个执行链。脚本(' http://cdnjs。云耀斑。com/Ajax/libs/jquery/2。1 .0/jquery。量滴js ').脚本(' http://cdnjs。云耀斑。com/Ajax/libs/lodash。js/2。4 .1/lodash。量滴js’)

//第二个执行链等待(function(){//console。日志(窗口.$) //console.log(窗口。_) })

//第三个执行链。脚本(' http://cdnjs。云耀斑。com/Ajax/libs/Twitter-bootstrap/3。1 .1/js/自举。量滴js ').脚本(' http://cdnjs。cloudflare。com/Ajax/libs/花式盒/2。1 .5/jquery。精致的盒子。打包。js’)

//第四个执行链等待(function(){//console。日志(插件1功能)//控制台。log(plug in2函数)})

//第五个执行链。脚本(' js/aaa.js ').脚本(' js/bbb.js ')

//第六个执行链等待(function(){//console。日志(模块1功能)//控制台。日志(模块2函数)})/脚本

这个时候打开控制台，看信息，如下图所示：