快捷導(dǎo)航

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

更新時(shí)間：2012年08月22日 21:30:25 作者：

經(jīng)過一番思考，到底怎么解決導(dǎo)包而且是異步的方式，最后得出一個(gè)解決方案。先來看一下采用這個(gè)方案后的編程方式

在上一篇javascript動(dòng)態(tài)加載中，提到了使用同步加載策略這一個(gè)方式來實(shí)現(xiàn)如

 
Using("jquery"); 
Using("User"); 

$("#ID").click(function(){ 
var user = new User(); 
user.name = "xx"; 
user.show(); 
}); 

由于JS是單線程的，所以同步策略帶來的壞處不少，比如阻止之后的代碼運(yùn)行、造成瀏覽器假死等問題。
使用異步策略又難以實(shí)現(xiàn)先導(dǎo)包后使用的效果。只能采用callback的形式來進(jìn)行，這又不是UsingJS想要實(shí)現(xiàn)的，畢竟jQuery的getScript函數(shù)就可以實(shí)現(xiàn)這一方式。

經(jīng)過一番思考，到底怎么解決導(dǎo)包而且是異步的方式，最后得出一個(gè)解決方案。先來看一下采用這個(gè)方案后的編程方式。

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

 
<div id="panel"></div> 

<script type="text/javascript" src="js/using-0.4.js"></script> 
<script type="text/javascript"> 
Using("jq"); 
Using("jq"); 
Using("Http"); 

Using.asyn(function(){ 
$("#panel").click(function(){ 
alert("Using jquery object"); 
}); 
Using.fetch("Http",function(){ 
var http = new Using.Modules.Http(); 
http.set("xxx"); 
http.show(); 
}); 
}); 
</script> 

如上代碼所示，總體來說與同步策略沒有太大的修改，只是導(dǎo)入了兩次jquery，這里顯然是需要處理成只導(dǎo)包一次，并且里面增加了一個(gè)Using.asyn函數(shù)，具體這個(gè)函數(shù)做什么用，之后會(huì)分析。
都知道，異步策略，是不影響當(dāng)前運(yùn)行的，那么，我導(dǎo)入的包，假如正在加載，而其后的代碼也正在運(yùn)行，兩者之間也剛好存在依賴關(guān)系，那么就會(huì)出現(xiàn)異常，怎么解決這兩者之間的關(guān)系，目前唯一的解決辦法就是回調(diào)函數(shù)。

按照Using的思想，必須是先導(dǎo)包后使用。異步的解決辦法就是在模塊使用之前，并不真的去進(jìn)行文件拉取，而是將需要的JS文件放置到一個(gè)對(duì)象當(dāng)中，比如Array，當(dāng)有真正需求的時(shí)候，再逐個(gè)進(jìn)行加載。來看看

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

 
Using("jq"); 
Using("jq"); 
Using("Http"); 

是怎么工作的。上一段代碼

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

 
var moduleList = []; 

Using.fn = Using.prototype; 
Using.fn.initialize= function(module){ 
!this.exist(moduleList,module) ? moduleList.push(module) : null; 
} 

這段代碼是略去上下文，截取的Using的原型中的一個(gè)初始化方法，從代碼得知，其主要的職責(zé)就是將需要加載的模塊放置到moduleList中，并且進(jìn)行判斷，假如moduleList中含有當(dāng)前需要加載的模塊，那么，不進(jìn)行任何操作。

那么，什么時(shí)候進(jìn)行加載呢？這個(gè)就用到了之前提到的Using.asyn方法，也就是通知Using，現(xiàn)在需要異步加載文件了，并且，在加載完畢之后調(diào)用Using.asyn函數(shù)的回調(diào)函數(shù)。同樣上一段代碼

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

 
Using.asyn = function(callback){ 
Using.fn.script(callback); 
} 

從代碼只能簡(jiǎn)要的看出，Using.asyn函數(shù)調(diào)用了Using.fn.script函數(shù)，并且將回調(diào)函數(shù)傳給了它。自然，就需要看看其又是怎么工作的。

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

 
Using.fn.script = function(callback){ 
var _this = this, 
complete = 0, 
count = moduleList.length, 
len = 0; 
if(count < 1){ 
return; 
} 

var loadScript = function(){ 
while(len < count){ 
_this.ajax(Using.Config[moduleList[len]],function(){ 
complete++; 
if(complete >= count){ 
callback(); 
} 
}); 
len++; 
} 
} 
!Using.Config ? _this.ajax("/js/config",function(){ 
loadScript(); 
}) : loadScript(); 
} 

首先看Using.Config，就是上一篇提到的模塊配置文件，以通知Using通過模塊名來加載相應(yīng)的模塊文件。

其次就是通過內(nèi)部函數(shù)loadScript來做模塊文件的加載，通過一個(gè)計(jì)數(shù)器complete來判斷當(dāng)前已經(jīng)加載了幾個(gè)模塊，當(dāng)所有模塊加載完畢，則調(diào)用回調(diào)函數(shù)。

整合以上代碼，整個(gè)思路就是說，通過Using對(duì)象來導(dǎo)包，并記錄，通過Using.asyn來通知Using進(jìn)行異步加載，最后由Using.fn.script來實(shí)現(xiàn)異步加載并執(zhí)行回調(diào)函數(shù)。

還注意到Using.fetch函數(shù)，整個(gè)函數(shù)主要是為了解決當(dāng)代碼運(yùn)行到一定程度或者某一個(gè)需求才要加載的文件，類似于$.getScript文件，在加載之前會(huì)進(jìn)行判斷，判斷當(dāng)前需要的模塊是否已經(jīng)加載過，如果加載過則直接執(zhí)行回調(diào)函數(shù)。

這一次UsingJS的改動(dòng)，主要是為了將同步策略改為異步策略，但是同樣遺留有很多問題，比如要進(jìn)行類似$(document).ready，只在文檔加載完畢的時(shí)候才執(zhí)行，本身來說，實(shí)現(xiàn)這個(gè)一個(gè)效果并不難，而是編寫代碼時(shí)，腦子凌亂了，一時(shí)沒辦法解決Using.asyn多次調(diào)用時(shí)，由于異步而產(chǎn)生的多次加載同一個(gè)模塊，又或者各種莫名其妙的問題，一時(shí)沒有了頭緒，故，將此問題后延，一步一步的解決之。

還有便是導(dǎo)包的順序，不能任意順序，當(dāng)時(shí)也想做成任意導(dǎo)包，通過添加依賴關(guān)系，來做到由代碼解決加載順序，但是又想到，這個(gè)做法沒有什么很大的實(shí)際意義，編碼人員肯定知道文件之間的依賴關(guān)系的，如果編碼的人不知道文件的加載順序，就是使用<script>標(biāo)簽形式，照樣會(huì)出錯(cuò)，而做成依賴關(guān)系不僅增加了Using的體積，更重要的是做了一件重復(fù)的事情。不知道這樣理解對(duì)不對(duì)。

您可能感興趣的文章: