快捷導(dǎo)航

如何確保JavaScript的執(zhí)行順序之jQuery.html深度分析

更新時(shí)間：2011年03月03日 11:59:57 作者：

在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實(shí)戰(zhàn)篇》中，我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動(dòng)態(tài)加載的JavaScript按照引入順序執(zhí)行。

我們先來(lái)簡(jiǎn)單回顧下HTML源代碼（test2.htm）：

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

 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.4.4.js" type="text/javascript"></script> 
<script> 
$(function(){ 
$('#container').html('<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>'); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 

2.調(diào)試，單步跟進(jìn)
逐行分析jQuery源代碼是一件相當(dāng)枯燥的事情。我這里會(huì)以test2.htm為目標(biāo)，調(diào)試進(jìn)入jQuery源代碼。
1) 首先在html: 打一個(gè)斷點(diǎn)，刷新頁(yè)面

這里的value是字符串："<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script><script>alert(typeof(jQuery.ui));</script>"
我們來(lái)看會(huì)進(jìn)入那個(gè)條件分支：首先看看rnocache是啥？

可見(jiàn)value中含有 <script 字符串，不會(huì)進(jìn)入第二個(gè)條件分支。
2) 進(jìn)入html函數(shù)的最后一個(gè)條件分支

來(lái)看看append函數(shù)：

3) 進(jìn)入domManip函數(shù)

繼續(xù)單步調(diào)試，發(fā)現(xiàn)目標(biāo)，這里有對(duì)scripts的長(zhǎng)度判斷：

應(yīng)該是已經(jīng)分析了輸入字符串，并提取了其中的script標(biāo)簽，我們來(lái)看下這里的局部變量scripts的內(nèi)容：

4)發(fā)現(xiàn)目標(biāo)
這里的兩個(gè)局部變量scripts和evalScript是我們重點(diǎn)需要關(guān)注的，我們分別來(lái)看下：
scripts，這是一個(gè)數(shù)組，包含兩個(gè)script標(biāo)簽：
[<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>
, <script>alert(typeof(jQuery.ui));</script>]
evalScript，這是一個(gè)函數(shù)，通過(guò)jQuery.each函數(shù)來(lái)調(diào)用，上述數(shù)組中的每個(gè)值都會(huì)作為參數(shù)傳到這個(gè)函數(shù)中執(zhí)行：

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

 
function evalScript( i, elem ) { 
if ( elem.src ) { 
jQuery.ajax({ 
url: elem.src, 
async: false, 
dataType: "script" 
}); 
} else { 
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" ); 
} 
if ( elem.parentNode ) { 
elem.parentNode.removeChild( elem ); 
} 
} 

3. 哦，明白了
通過(guò)上面的分析，我們清楚的看到j(luò)Query.html函數(shù)會(huì)首先把其中的script檢索出來(lái)，然后對(duì)于每個(gè)script標(biāo)簽應(yīng)用evalScript函數(shù)。
在這個(gè)函數(shù)中，對(duì)于外部JavaScript個(gè)內(nèi)聯(lián)JavaScript，進(jìn)行了不同的處理。
1)jQuery.html如何處理字符串中的外部script標(biāo)簽

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

 
jQuery.ajax({ 
url: elem.src, 
async: false, 
dataType: "script" 
}); 

對(duì)于外部script標(biāo)簽，比如：<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>，jQuery采用了同步Ajax方案（async: false）。這也是在各種不同瀏覽器中能夠保證動(dòng)態(tài)JS的加載順序的關(guān)鍵所在。
2)jQuery.html如何處理字符串中的內(nèi)聯(lián)script標(biāo)簽
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
來(lái)看下globalEval函數(shù)的定義：

由此可見(jiàn)，對(duì)于內(nèi)聯(lián)的script標(biāo)簽，jQuery通過(guò)在head中創(chuàng)建script標(biāo)簽來(lái)執(zhí)行。
4. 后記
目前來(lái)看，一切來(lái)龍去脈似乎清晰可見(jiàn)。那么大家有沒(méi)有考慮過(guò)，如果動(dòng)態(tài)加載加載不同域名下（Cross-Domain）的JavaScript文件，jQuery還能確保在所有瀏覽器下的JavaScript的執(zhí)行順序嗎？
也就是說(shuō)在當(dāng)前流行的靜態(tài)資源的CDN加速情況下，jQuery.html是不是一個(gè)完全之策呢？
請(qǐng)看下篇如何確保JavaScript的執(zhí)行順序 - 之jQuery.html并非萬(wàn)能鑰匙。待續(xù)。。。

您可能感興趣的文章: