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

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們先來簡單回顧下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.調試，單步跟進
逐行分析jQuery原始碼是一件相當枯燥的事情。我這裡會以test2.htm為目標，調試進入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函數的最後一個條件分支

來看看append函數：

3) 進入domManip函數

繼續單步調試，發現目標，這裡有對scripts的長度判斷：

應該是已經分析了輸入字串，並提取了其中的script標籤，我們來看下這裡的局部變數scripts的內容：

4)發現目標
這裡的兩個局部變數scripts和evalScript是我們重點需要關注的，我們分別來看下：
scripts，這是一個數組，包含兩個script標籤：
[<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>
, <script>alert(typeof(jQuery.ui));</script>]
evalScript，這是一個函數，通過jQuery.each函數來調用，上述數組中的每個值都會作為參數傳到這個函數中執行：複製代碼代碼如下: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函數會首先把其中的script檢索出來，然後對於每個script標籤應用evalScript函數。
在這個函數中，對於外部JavaScript個內聯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）。這也是在各種不同瀏覽器中能夠保證動態JS的載入順序的關鍵所在。
2)jQuery.html如何處理字串中的內聯script標籤
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
來看下globalEval函數的定義：

由此可見，對於內聯的script標籤，jQuery通過在head中建立script標籤來執行。
4. 後記
目前來看，一切來龍去脈似乎清晰可見。那麼大家有沒有考慮過，如果動態載入載入不同網域名稱下（Cross-Domain）的JavaScript檔案，jQuery還能確保在所有瀏覽器下的JavaScript的執行順序嗎？
也就是說在當前流行的靜態資源的CDN加速情況下，jQuery.html是不是一個完全之策呢？
請看下篇如何確保JavaScript的執行順序 - 之jQuery.html並非萬能鑰匙。待續。。。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More