Lab.js初次使用筆記
動(dòng)態(tài)加載JS函數(shù)
一般性的，當(dāng)我們需要加載js文件的時(shí)候都會(huì)使用script標(biāo)簽來(lái)實(shí)現(xiàn)，類似于如下代碼：
<script type="text/javascript" src="example.js"></script>
但是直接使用script標(biāo)簽來(lái)加載js文件會(huì)有如下一些缺點(diǎn)：
1.嚴(yán)格的讀取順序。由于瀏覽器按照<script>在網(wǎng)頁(yè)中出現(xiàn)的順序，讀取Javascript文件，然后立即運(yùn)行，導(dǎo)致在多個(gè)文件互相依賴的情況下，依賴性最小的文件必須放在最前面，依賴性最大的文件必須放在最后面，否則代碼會(huì)報(bào)錯(cuò)。
2.性能問(wèn)題。瀏覽器采用"同步模式"加載<script>標(biāo)簽，也就是說(shuō)，頁(yè)面會(huì)"堵塞"（blocking），等待javascript文件加載完成，然后再運(yùn)行后面的HTML代碼。當(dāng)存在多個(gè)<script>標(biāo)簽時(shí)，瀏覽器無(wú)法同時(shí)讀取，必須讀取完一個(gè)再去讀取另一個(gè)，造成讀取時(shí)間大大延長(zhǎng)，頁(yè)面響應(yīng)緩慢。
這個(gè)時(shí)候我們就會(huì)想到去動(dòng)態(tài)加載JS，動(dòng)態(tài)加載js的實(shí)現(xiàn)方法類似于如下代碼
/*
*@desc:動(dòng)態(tài)添加script
*@param src:加載的js文件的地址
*@param callback:js文件加載完成之后需要調(diào)用的回調(diào)函數(shù)
*@demo:
addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {
alert('攜程服務(wù)器上的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();
}
}
}
這樣不會(huì)造成頁(yè)面堵塞，但會(huì)造成另外一個(gè)問(wèn)題：這樣加載的Javascript文件，不在原始的DOM結(jié)構(gòu)之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回調(diào)函數(shù)對(duì)它無(wú)效。
這個(gè)時(shí)候我們就會(huì)想到用一些外部函數(shù)庫(kù)來(lái)有效的管理JS加載問(wèn)題。
下面進(jìn)入正題說(shuō)說(shuō)LAB.js
LAB.js
如果我們使用傳統(tǒng)的方法來(lái)加載js的話，寫(xiě)的代碼一般會(huì)如下方代碼所示風(fēng)格。
<script src="aaa.js"></script>
<script src="bbb-a.js"></script>
<script src="bbb-b.js"></script>
<script type="text/javascript">
initAaa();
initBbb();
</script>
<script src="ccc.js"></script>
<script type="text/javascript">
initCcc();
</script>
如果我們使用LAB.js的話，要實(shí)現(xiàn)上述代碼功能，則使用如下方式
<!--先加載lab.js庫(kù)-->
<script src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></script>
<script type="text/javascript">
$LAB
.script("aaa.js").wait()//不帶參數(shù)的.wait()方法表示立即運(yùn)行剛才加載的Javascript文件
.script("bbb-a.js")
.script("bbb-b.js")//依次加載aaa.js bbb-a.js bbb-b.js 然后執(zhí)行initAaa initBbb
.wait(function () {//帶參數(shù)的.wait()方法也是立即運(yùn)行剛才加載的Javascript文件，但是還運(yùn)行參數(shù)中指定的函數(shù)。
initAaa();
initBbb();
})
.script("ccc.js")//再加載ccc.js 加載完成ccc.js之后執(zhí)行initCcc方法
.wait(function () {
initCcc();
});
</script>
可以同時(shí)運(yùn)行多條$LAB鏈，但是它們之間是完全獨(dú)立的，不存在次序關(guān)系。如果你要確保一個(gè)Javascript文件在另一個(gè)文件之后運(yùn)行，你只能把它們寫(xiě)在同一個(gè)鏈操作之中。只有當(dāng)某些腳本是完全無(wú)關(guān)的時(shí)候，你才應(yīng)該考慮把它們分成不同的$LAB鏈，表示它們之間不存在相關(guān)關(guān)系。
一般性的使用示例
$LAB
.script("script1.js") // script1, script2, and script3 相互不依賴, 可以按照任意的順序執(zhí)行
.script("script2.js")
.script("script3.js")
.wait(function(){
alert("Scripts 1-3 are loaded!");
})
.script("script4.js") //必須等待script1.js,script2.js,script3.js執(zhí)行完畢之后才能執(zhí)行
.wait(function(){script4Func();});
$LAB
.script("script.js")
.script({ src: "script1.js", type: "text/javascript" })
.script(["script1.js", "script2.js", "script3.js"])
.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
}
})
在控制臺(tái)看LAB.js的加載信息
如果你想調(diào)試或者說(shuō)在控制臺(tái)看各個(gè)js加載信息的話，可以使用$LAB.setGlobalDefaults 方法,具體使用請(qǐng)看代碼示例。
<!--先加載攜程的LAB庫(kù) lab.js在網(wǎng)上也可以下載-->
<script type="text/javascript" src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" charset="gb2312"></script>
<script type="text/javascript">
$LAB.setGlobalDefaults({ Debug: true }) //打開(kāi)調(diào)試
$LAB
//第一個(gè)執(zhí)行鏈
.script('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.script('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
//第二個(gè)執(zhí)行鏈
.wait(function () {
//console.log(window.$)
//console.log(window._)
})
//第三個(gè)執(zhí)行鏈
.script('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
.script('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
//第四個(gè)執(zhí)行鏈
.wait(function () {
// console.log(plugin1Function)
// console.log(plugin2Function)
})
//第五個(gè)執(zhí)行鏈
.script('js/aaa.js')
.script('js/bbb.js')
//第六個(gè)執(zhí)行鏈
.wait(function () {
// console.log(module1Function)
// console.log(module2Function)
})
</script>
這個(gè)時(shí)候打開(kāi)控制臺(tái)，看信息，如下圖所示：
我相信你看到這兒肯定會(huì)為L(zhǎng)ab.js的調(diào)試功能驚嘆不已。事實(shí)上Lab.js確實(shí)是挺強(qiáng)大的，我也只是了解它的一些淺顯的功能。先記下來(lái)，拿來(lái)分享一下同時(shí)也為了以后方便自己。
相關(guān)文章
JavaScript加入收藏夾功能（兼容IE、firefox、chrome）
這篇文章主要介紹了JavaScript加入收藏夾功能，兼容IE、firefox、chrome，并解決了window.sidebar.addPanel is not a function問(wèn)題,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了React Native登錄之指紋登錄篇,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了js去字符串前后空格的實(shí)現(xiàn)方法，重點(diǎn)推薦使用正則的方式，感興趣的小伙伴們可以參考一下2016-02-02
在淘寶上購(gòu)物時(shí)，總會(huì)看到類似放大鏡的效果。以下為原生js寫(xiě)的一個(gè)放大鏡效果，其中肯定有很多不足，請(qǐng)大牛們指正，謝啦2012-08-08
javascript判斷數(shù)組內(nèi)是否重復(fù)的方法
這篇文章主要介紹了javascript判斷數(shù)組內(nèi)是否重復(fù)的方法,涉及javascript針對(duì)數(shù)組的相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript引用賦值（地址傳值）用法,以一個(gè)簡(jiǎn)單實(shí)例分析了javacript引用賦值的原理與用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)在線ps功能詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
js簡(jiǎn)單實(shí)現(xiàn)標(biāo)簽云效果實(shí)例
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)標(biāo)簽云效果,基于miaov.js文件實(shí)現(xiàn)標(biāo)簽云的3D滾動(dòng)效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)盒子拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02