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

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

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

我們先來簡單回顧下HTML源代碼（test2.htm）：

 
<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)試，單步跟進
逐行分析jQuery源代碼是一件相當枯燥的事情。我這里會以test2.htm為目標，調(diào)試進入jQuery源代碼。
1) 首先在html: 打一個斷點，刷新頁面

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

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

來看看append函數(shù)：

3) 進入domManip函數(shù)

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

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

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

復制代碼代碼如下:

 
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. 哦，明白了
通過上面的分析，我們清楚的看到jQuery.html函數(shù)會首先把其中的script檢索出來，然后對于每個script標簽應用evalScript函數(shù)。
在這個函數(shù)中，對于外部JavaScript個內(nèi)聯(lián)JavaScript，進行了不同的處理。
1)jQuery.html如何處理字符串中的外部script標簽

復制代碼代碼如下:

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

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

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

您可能感興趣的文章: