javascript動態加載三
2024-05-06 14:21:20
供稿：網友
之前兩篇都介紹了，通過動態加載JS文件或者說JS模塊，是怎么一步一步實現。
首先是通過同步策略來實現模塊加載與回調函數之間進行分離，接著是通過異步策略來實現模塊加載與回調函數之間進行分離。
這一篇，主要是為了說說怎么優化異步策略，并且實現了隨意加載（非任意順序加載模塊），頁面Ready之后加載文件。先接一下上一篇遺留下來的問題
1、頁面Ready之后進行加載
2、隨意添加模塊 進行加載
看第一個問題，這個問題其實還是比較簡單的，主要是監聽頁面的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函數，這個函數就是用來做頁面加載完畢之后執行所有加載的函數。貼一下代碼
（編輯一下這一段：頁面加載完畢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是用來保存異步加載之后要回調的函數，沒什么好解釋的，是一個數組，可以理解為創建了一個函數的隊列
_execAsyn是用來執行保存的那些回調函數的，即將所保存的函數逐一執行。看一下代碼，代碼中對每行的作用都進行了注釋
代碼如下:
var _execAsyn = function(){
// 創建一個變量來緩存需要執行的函數
var func = null;
// 如果隊列中還有未執行的函數 則進行執行操作
if(asynQueue.length > 0){
// 將_execAsyn函數修改為運行狀態
_execAsyn.isRunning = true;
