动态加载JS函数
一般性的，当我们需要加载js文件的时候都会使用script标签来实现，类似于如下代码：
复制代码 代码如下:
<script type="text/javascript" src="https://www.jb51.net/example.js"></script>
但是直接使用script标签来加载js文件会有如下一些缺点：
1.严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序，读取Javascript文件，然后立即运行，导致在多个文件互相依赖的情况下，依赖性最小的文件必须放在最前面，依赖性最大的文件必须放在最后面，否则代码会报错。
2.性能问题。浏览器采用"同步模式"加载<script>标签，也就是说，页面会"堵塞"（blocking），等待javascript文件加载完成，然后再运行后面的HTML代码。当存在多个<script>标签时，浏览器无法同时读取，必须读取完一个再去读取另一个，造成读取时间大大延长，页面响应缓慢。
这个时候我们就会想到去动态加载JS，动态加载js的实现方法类似于如下代码
复制代码 代码如下:
/*
*@desc:动态添加script
*@param src:加载的js文件的地址
*@param callback:js文件加载完成之后需要调用的回调函数
*@demo:
addDynamicStyle('https://webresource.c-ctrip.com/code/cquery/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 = 'gb2312';
document.body.appendChild(script);
if (callback != undefined) {
script.onload = function () {
callback();
}
}
}
这样不会造成页面堵塞，但会造成另外一个问题：这样加载的Javascript文件，不在原始的DOM结构之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回调函数对它无效。
这个时候我们就会想到用一些外部函数库来有效的管理JS加载问题。
下面进入正题说说LAB.js
LAB.js
如果我们使用传统的方法来加载js的话，写的代码一般会如下方代码所示风格。
复制代码 代码如下:
<script src="https://www.jb51.net/article/aaa.js"></script>
<script src="https://www.jb51.net/bbb-a.js"></script>
<script src="https://www.jb51.net/bbb-b.js"></script>
<script type="text/javascript">
initAaa();
initBbb();
</script>
<script src="https://www.jb51.net/article/ccc.js"></script>
<script type="text/javascript">
initCcc();
</script>
如果我们使用LAB.js的话，要实现上述代码功能，则使用如下方式
复制代码 代码如下:
<!--先加载lab.js库-->
<script src="https://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></script>
<script type="text/javascript">
$LAB
.script("https://www.jb51.net/article/aaa.js").wait()//不带参数的.wait()方法表示立即运行刚才加载的Javascript文件
.script("https://www.jb51.net/bbb-a.js")
.script("https://www.jb51.net/bbb-b.js")//依次加载aaa.js bbb-a.js bbb-b.js 然后执行initAaa initBbb
.wait(function () {//带参数的.wait()方法也是立即运行刚才加载的Javascript文件，但是还运行参数中指定的函数。
initAaa();
initBbb();
})
.script("https://www.jb51.net/article/ccc.js")//再加载ccc.js 加载完成ccc.js之后执行initCcc方法
.wait(function () {
initCcc();
});
</script>