javascript動態載入三_javascript技巧

之前兩篇都介紹了，透過動態載入JS檔或是說JS模組，是怎麼一步一步實現。

首先是透過同步策略來實現模組載入與回呼函數之間進行分離，接著是透過非同步策略來實現模組載入與回調函數之間進行分離。

這篇，主要是為了說說怎麼優化非同步策略，並且實作了隨意載入（非任意順序載入模組），頁面Ready之後載入檔案。先接一下上一篇遺留下來的問題

1、頁面Ready之後進行載入

2、隨意加入模組進行載入

看第一個問題，這個問題其實還是比較簡單的，主要是監聽頁面的DOMContentLoaded事件，這裡就不多講解，網路上搜索，一堆答案，直接上程式碼。

複製程式碼 程式碼如下:

Using.ready = function(c>

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函數，這個函數就是用來做頁面載入完畢之後執行所有載入的函數。貼一下程式碼

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

複製程式碼 程式碼如下:

var readyList = [varyList 🎜>var _ready = function(){
while(readyList.length > 0){
var func = readyList.shift();
func();
}
docum ("DOMContentLoaded",_ready,false);
}

以下就是這篇部落格的重點了。還是先看一下程式碼

複製程式碼 程式碼如下:

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

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

asynQueue是用來保存異步加載之後要回調的函數，沒什麼好解釋的，是一個數組，可以理解為創建了一個函數的隊列

_execAsyn是用來執行保存的那些回調函數的，即將所保存的函數逐一執行。看一下程式碼，程式碼中對每行的作用都進行了註解

複製程式碼 程式碼如下:

var _execAsyn = function(){
// 建立一個變數來快取需要執行的函數
var func = null;
// 如果佇列中還有未執行的函式則進行執行操作
if(asynQueue.length > 0){
// 將_execAsyn函數修改為運作狀態
_execAsyn.isRunning = true;
// 得到佇列中第一個需要執行的函數
func = asynQueue.shift();
// 呼叫非同步載入模組Using.fn.script函數並傳入載入完畢之後需要執行的回呼函數
Using.fn.script(function(){
// 目前需要執行的函數
func();
// 迭代_execAsyn 直到佇列中沒有需要執行的函數
_execAsyn();
});
//若佇列中沒有需要執行的函數
}else{
// 則將_execAsyn運作狀態改為false
_execAsyn.isRunning = false;
}
}

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

1、佇列中隨時可能有新的函數需要執行，採用循環的話，可能執行不到最新的函數，因為函數總是插入到隊列的尾部

2 、 Using.fn.script是異步的，如果是循環的話，當前函數還沒執行完，可能下一個函數就已經進入了執行狀態。那麼，本身來說，同時執行幾個函數，速率上可能會更高，為什麼這裡還要限制其多個函數並行呢？原因也很簡單，因為每一次執行佇列中的函數，可能都需要載入對應的模組，那麼如果剛好友兩個或多個依賴相同模組的函數需要執行，而且並行執行，就可能出現同一個模組加載多次，並可能造成後續的函數執行不了，出現異常。

整個UsingJS的核心部分就這些。在其中我加入了Using.Class.create函數，這個函數在javascript動態載入文章的最後有提到。

最後看一下頁面使用：

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:



程式碼如下:

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");

});

});
});



這個一段程式碼，刻意進行重複加載，多次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 // 原因就是// 任何操作都是異步的,當執行此句時Using("Http")這個模組載入可能還沒有完成// 這一點是仲謀給多個朋友進行使用時會犯的錯誤總以為導包之後萬事大吉// 是的本身應該是這樣導包之後在任何地方都可以隨意引用// 但是總得有個前提吧那就是模組得載入完畢// 所以還請將所有的程式碼都寫在Using.asyn之內Using.asyn(function(){ var h = new Using.Modules.Http (); h.set("ooo"); h.show(); }); UsingJS下載