快捷導(dǎo)航

javascript動(dòng)態(tài)加載三

更新時(shí)間：2012年08月22日 22:49:11 作者：

首先是通過同步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過異步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離

之前兩篇都介紹了，通過動(dòng)態(tài)加載JS文件或者說JS模塊，是怎么一步一步實(shí)現(xiàn)。

首先是通過同步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過異步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離。

這一篇，主要是為了說說怎么優(yōu)化異步策略，并且實(shí)現(xiàn)了隨意加載（非任意順序加載模塊），頁面Ready之后加載文件。先接一下上一篇遺留下來的問題

1、頁面Ready之后進(jìn)行加載

2、隨意添加模塊進(jìn)行加載

看第一個(gè)問題，這個(gè)問題其實(shí)還是比較簡單的，主要是監(jiān)聽頁面的DOMContentLoaded事件，這里就不多講解，網(wǎng)絡(luò)上搜索，一堆答案，直接上代碼。

復(fù)制代碼代碼如下:

 
Using.ready = function(callback){ 
readyList.push(callback); 

if(document.addEventListener){ 
document.addEventListener("DOMContentLoaded",_ready,false); 
return; 
} 
// for IE 
var domReady = function(){ 
try{ 
document.documentElement.doScroll("left"); 
_ready(); 
}catch(ex){ 
setTimeout(domReady,1); 
return; 
} 
} 
domReady(); 
} 

這一段代碼中最難以理解的應(yīng)該就是

復(fù)制代碼代碼如下:

document.documentElement.doScroll("left");

這里其實(shí)是IE的頁面加載完畢事件，簡單說就是IE里面標(biāo)簽加載完畢之后，是可以操作Scroll的，那就根據(jù)此原理來判斷IE中頁面是否加載完畢。

里面有一個(gè)_ready函數(shù)，這個(gè)函數(shù)就是用來做頁面加載完畢之后執(zhí)行所有加載的函數(shù)。貼一下代碼

（編輯一下這一段：頁面加載完畢Ready函數(shù)并不是我們思想中所認(rèn)為的原生JS的window.load，簡單說只是頁面中DOM結(jié)構(gòu)的加載完畢，具體信息，可自行百度google之）

復(fù)制代碼代碼如下:

 
var readyList = []; 
var _ready = function(){ 
while(readyList.length > 0){ 
var func = readyList.shift(); 
func(); 
} 
document.removeEventListener("DOMContentLoaded",_ready,false); 
} 

下面就是本博文的重點(diǎn)了。還是先看一下代碼

復(fù)制代碼代碼如下:

 
Using.asyn = function(callback){ 
asynQueue.push(callback); 
if(!_execAsyn.isRunning){ 
_execAsyn(); 
} 
} 

還是通知Using要加載所需要的模塊了，只不過里面加入了一個(gè)asynQueue數(shù)組和_execAsyn函數(shù)，他們的作用分別是

asynQueue是用來保存異步加載之后要回調(diào)的函數(shù)，沒什么好解釋的，是一個(gè)數(shù)組，可以理解為創(chuàng)建了一個(gè)函數(shù)的隊(duì)列

_execAsyn是用來執(zhí)行保存的那些回調(diào)函數(shù)的，即將所保存的函數(shù)逐一執(zhí)行。看一下代碼，代碼中對(duì)每行的作用都進(jìn)行了注釋

復(fù)制代碼代碼如下:

 
var _execAsyn = function(){ 
// 創(chuàng)建一個(gè)變量來緩存需要執(zhí)行的函數(shù) 
var func = null; 
// 如果隊(duì)列中還有未執(zhí)行的函數(shù) 則進(jìn)行執(zhí)行操作 
if(asynQueue.length > 0){ 
// 將_execAsyn函數(shù)修改為運(yùn)行狀態(tài) 
_execAsyn.isRunning = true; 
// 得到隊(duì)列中第一個(gè)需要執(zhí)行的函數(shù) 
func = asynQueue.shift(); 
// 調(diào)用異步加載模塊Using.fn.script函數(shù) 并傳入加載完畢之后需要執(zhí)行的回調(diào)函數(shù) 
Using.fn.script(function(){ 
// 當(dāng)前需要執(zhí)行的函數(shù) 
func(); 
// 迭代_execAsyn 直到隊(duì)列中沒有需要執(zhí)行的函數(shù) 
_execAsyn(); 
}); 
// 若隊(duì)列中沒有需要執(zhí)行的函數(shù) 
}else{ 
// 則將_execAsyn運(yùn)行狀態(tài)改為false 
_execAsyn.isRunning = false; 
} 
} 

這個(gè)函數(shù)，解釋起來沒什么特別的，說白了就是一個(gè)一個(gè)的執(zhí)行需要執(zhí)行的函數(shù)。那么，唯一需要注意的就是為什么操作隊(duì)列的時(shí)候沒有采用循環(huán)，而是使用迭代。那原因就是

1、隊(duì)列中隨時(shí)可能有新的函數(shù)需要執(zhí)行，采用循環(huán)的話，可能執(zhí)行不到最新的函數(shù)，因?yàn)楹瘮?shù)總是插入到隊(duì)列的尾部

2、 Using.fn.script是異步的，如果是循環(huán)的話，當(dāng)前函數(shù)還沒有執(zhí)行完，可能下一個(gè)函數(shù)就已經(jīng)進(jìn)入了執(zhí)行狀態(tài)。那么，本身來說，同時(shí)執(zhí)行幾個(gè)函數(shù)，速率上可能會(huì)更高，為什么這里還要限制其多個(gè)函數(shù)并行呢？原因也很簡單，因?yàn)槊恳淮螆?zhí)行隊(duì)列中的函數(shù)，可能都需要加載相應(yīng)的模塊，那么如果剛好友兩個(gè)或者多個(gè)依賴相同模塊的函數(shù)需要執(zhí)行，而且并行執(zhí)行，就可能出現(xiàn)同一個(gè)模塊加載多次，并可能造成后續(xù)的函數(shù)執(zhí)行不了，出現(xiàn)異常。

整個(gè)UsingJS的核心部分就這些。在其中我加入了Using.Class.create函數(shù)，這個(gè)函數(shù)在javascript動(dòng)態(tài)加載文章的末尾有提到。

最后看一下頁面使用情況：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="js/using-0.4.2.min.js"></script> 
<script type="text/javascript"> 
Using("jq"); 
Using("UserView"); 
Using("jq"); 

Using.ready(function(){ 
Using.asyn(function(){ 
$("#panel").click(function(){ 
alert("by jquery"); 
}); 
}); 
}); 
Using.ready(function(){ 
Using("Http"); 
Using.asyn(function(){ 
var http = new Using.Modules.Http(); 
http.set("xxx"); 
http.show(); 
}); 
Using.asyn(function(){ 
var h = new Using.Modules.Http(); 
h.set("ooo"); 
h.show(); 
}); 
Using("jq"); 
Using.asyn(function(){ 
$("#panel").click(function(){ 
alert("loaded jquery"); 
}); 
}); 
}); 
</script> 

這個(gè)一段代碼，刻意進(jìn)行重復(fù)加載，多次Ready事件和Ready之后進(jìn)行Using導(dǎo)包。

有一個(gè)特別需要注意的地方

復(fù)制代碼代碼如下:

 
Using("Http"); 
Using.asyn(function(){ 
var http = new Using.Modules.Http(); 
http.set("xxx"); 
http.show(); 
}); 
// 假如在這個(gè)地方使用 
// var ht = new Using.Modules.Http(); 
// 是會(huì)報(bào)Using.Modules.Http不是一個(gè)constructor 
// 原因就是 
// 任何操作都是異步的,當(dāng)執(zhí)行此句時(shí)Using("Http")這個(gè)模塊載入可能還沒有完成 
// 這一點(diǎn)是仲謀給多個(gè)朋友進(jìn)行使用時(shí)會(huì)犯的錯(cuò)誤 總以為導(dǎo)包之后 萬事大吉 
// 是的 本身應(yīng)該是這樣 導(dǎo)包之后 在任何地方都可以隨意引用 
// 但是總得有個(gè)前提吧 那就是模塊得加載完畢 
// 所以 還請(qǐng)將所有的代碼都寫在Using.asyn之內(nèi) 
Using.asyn(function(){ 
var h = new Using.Modules.Http(); 
h.set("ooo"); 
h.show(); 
}); 