如何確保JavaScript的執行順序之jQuery.html並非萬能鑰匙

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

上載者：User

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

1. 引言
在上一篇文章《如何確保JavaScript的執行順序 - 之jQuery.html深度分析》中，我們揭示了jQuery.html函數之所以能在各種瀏覽器下保持動態JS順序執行，其秘密在於 – 同步AJAX擷取外部JavaScript。
我們先來簡單回顧下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>

順便一提的是，通過這種方式載入的外部JavaScript不可以在Firebug中調試，因為AJAX結束後外部JavaScript的解析和內聯JavaScript的解析是一樣的（都是調用jQuery.globalEval）：

下面進入本篇文章的主題：如果載入的JS是在其它域下面的，jQuery.html還能在各個瀏覽器下都能保證JS的順序執行嗎？
2. 建立測試案例
1) 準備兩個網域名稱
為了測試，我在個人首頁（http://sanshi.me/）下面臨時建立了兩個子網域名稱，分別是：
http://test.sanshi.me/
http://test1.sanshi.me/
2) 更新Demo頁面（test2_1.htm）
我會把test2_1.htm放在第一個子網域名稱下，訪問地址為http://test.sanshi.me/jsorder/test2_1.htm，其原始碼如下：複製代碼代碼如下:<html>
<head>
<title></title>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(function () {
$('#container').html('<script src="http://test1.sanshi.me/jsorder/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>

可以看到，其中的jQueryUI指令碼指向的是第二個網域名稱下的（test1.sanshi.me）。
3) 在不同瀏覽器下測試

	test2_1.htm 使用jQuery.html函數動態載入其它域下的JavaScript
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

3. jQuery.html並非萬能鑰匙，那麼
不知道大家是否還記得我們在第一篇文章中提到的test3.htm不，這個結果和那個樣本的結果一模一樣，jQuery.html也並非萬能鑰匙。這不禁讓我們懷疑這兩個樣本的內部邏輯是否一樣？
但是第二篇文章不是明明白白告訴我們，jQuery.html使用的是同步AJAX的機制來載入外部JS的嗎？等等。。。。。。
大家有沒有從上面的分析中發現問題，AJAX來載入其他域的資源，這不是明擺著違背了大名鼎鼎的同源策略（Same Origin Policy）了嗎？所以jQuery不可能這麼實現，我們來看看jQuery.ajax文檔是怎麼說的：

看來我們在第二篇文章中看到的這個函數（evalScript）內部並非真的通過同步AJAX來擷取資料：

4. 深入jQuery.ajax函數，看看怎麼載入不同域下的JS檔案

注釋已經寫的很清楚了，如果是通過GET方式請求JavaScript檔案，並且這個檔案是在其他域下面的（remote），那麼就通過在head中添加script標籤來處理，而不是走AJAX的流程。所以在這個條件分支結束的時候，直接從函數體返回：

經過分析，我們發現在動態載入不同域的JavaScript時，jQuery.html其實採用了在head中添加script標籤的做法（不管是外部JS或者內聯JS），這和我們在第一篇文章中提到的test3.htm是一模一樣的邏輯，這也驗證了我們的想法：

由此可見，如果想相容CDN加速靜態資源的情況，還必須使用第一篇文章中提到的“方案一，如何在動態添加script標籤時確保執行順序”。

5. 後記

本來這個系列的文章到這就應該結束了。不過在我測試jQuery1.5.1後，居然發現和我用的jQuery1.4.4是有差異的，早就聽說jQuery1.5.1對AJAX部分進行了重構，沒想到還真的對我們的代碼有點影響。

具體是哪方面的影響，請看下一篇文章：如何確保JavaScript的執行順序 - 之jQuery1.5.1與jQuery1.4.4的細微差異。待續。。。

本文章原先以中文撰寫並發佈於 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