javascript動態(tài)加載三

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

首先是通過同步策略來實現模塊加載與回調函數之間進行分離，接著是通過異步策略來實現模塊加載與回調函數之間進行分離

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

首先是通過同步策略來實現模塊加載與回調函數之間進行分離，接著是通過異步策略來實現模塊加載與回調函數之間進行分離。

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

1、頁面Ready之后進行加載

2、隨意添加模塊進行加載

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

復制代碼代碼如下:

 
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(); 
} 

這一段代碼中最難以理解的應該就是

復制代碼代碼如下:

document.documentElement.doScroll("left");

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

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

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

復制代碼代碼如下:

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

下面就是本博文的重點了。還是先看一下代碼

復制代碼代碼如下:

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

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

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

_execAsyn是用來執(zhí)行保存的那些回調函數的，即將所保存的函數逐一執(zhí)行?？匆幌麓a，代碼中對每行的作用都進行了注釋

復制代碼代碼如下:

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

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

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

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

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

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

復制代碼代碼如下:

 
<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> 

這個一段代碼，刻意進行重復加載，多次Ready事件和Ready之后進行Using導包。

有一個特別需要注意的地方

復制代碼代碼如下:

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