快捷導(dǎo)航

如何確保JavaScript的執(zhí)行順序之jQuery.html并非萬能鑰匙

更新時間：2011年03月03日 22:48:08 作者：

在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之jQuery.html深度分析》中，我們揭示了jQuery.html函數(shù)之所以能在各種瀏覽器下保持動態(tài)JS順序執(zhí)行，其秘密在于 – 同步AJAX獲取外部JavaScript。

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

順便一提的是，通過這種方式加載的外部JavaScript不可以在Firebug中調(diào)試，因為AJAX結(jié)束后外部JavaScript的解析和內(nèi)聯(lián)JavaScript的解析是一樣的（都是調(diào)用jQuery.globalEval）：

下面進入本篇文章的主題：如果加載的JS是在其它域下面的，jQuery.html還能在各個瀏覽器下都能保證JS的順序執(zhí)行么？
2. 建立測試案例
1) 準(zhǔn)備兩個域名
為了測試，我在個人主頁（http://sanshi.me/）下面臨時創(chuàng)建了兩個子域名，分別是：
http://test.sanshi.me/
http://test1.sanshi.me/
2) 更新Demo頁面（test2_1.htm）
我會把test2_1.htm放在第一個子域名下，訪問地址為http://test.sanshi.me/jsorder/test2_1.htm，其源代碼如下：

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

 
<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函數(shù)動態(tài)加載其它域下的JavaScript
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

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

看來我們在第二篇文章中看到的這個函數(shù)（evalScript）內(nèi)部并非真的通過同步AJAX來獲取數(shù)據(jù)：

4. 深入jQuery.ajax函數(shù)，看看怎么加載不同域下的JS文件

注釋已經(jīng)寫的很清楚了，如果是通過GET方式請求JavaScript文件，并且這個文件是在其他域下面的（remote），那么就通過在head中添加script標(biāo)簽來處理，而不是走AJAX的流程。所以在這個條件分支結(jié)束的時候，直接從函數(shù)體返回：

經(jīng)過分析，我們發(fā)現(xiàn)在動態(tài)加載不同域的JavaScript時，jQuery.html其實采用了在head中添加script標(biāo)簽的做法（不管是外部JS或者內(nèi)聯(lián)JS），這和我們在第一篇文章中提到的test3.htm是一模一樣的邏輯，這也驗證了我們的想法：