快捷導(dǎo)航

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

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

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

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

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

下面進(jìn)入本篇文章的主題：如果加載的JS是在其它域下面的，jQuery.html還能在各個(gè)瀏覽器下都能保證JS的順序執(zhí)行么？
2. 建立測(cè)試案例
1) 準(zhǔn)備兩個(gè)域名
為了測(cè)試，我在個(gè)人主頁(yè)（http://sanshi.me/）下面臨時(shí)創(chuàng)建了兩個(gè)子域名，分別是：
http://test.sanshi.me/
http://test1.sanshi.me/
2) 更新Demo頁(yè)面（test2_1.htm）
我會(huì)把test2_1.htm放在第一個(gè)子域名下，訪問地址為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腳本指向的是第二個(gè)域名下的（test1.sanshi.me）。
3) 在不同瀏覽器下測(cè)試

	test2_1.htm 使用jQuery.html函數(shù)動(dòng)態(tài)加載其它域下的JavaScript
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

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

看來我們?cè)诘诙恼轮锌吹降倪@個(gè)函數(shù)（evalScript）內(nèi)部并非真的通過同步AJAX來獲取數(shù)據(jù)：

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

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

經(jīng)過分析，我們發(fā)現(xiàn)在動(dòng)態(tài)加載不同域的JavaScript時(shí)，jQuery.html其實(shí)采用了在head中添加script標(biāo)簽的做法（不管是外部JS或者內(nèi)聯(lián)JS），這和我們?cè)诘谝黄恼轮刑岬降?/SPAN>test3.htm是一模一樣的邏輯，這也驗(yàn)證了我們的想法：

由此可見，如果想兼容CDN加速靜態(tài)資源的情況，還必須使用第一篇文章中提到的“方案一，如何在動(dòng)態(tài)添加script標(biāo)簽時(shí)確保執(zhí)行順序”。

5. 后記

本來這個(gè)系列的文章到這就應(yīng)該結(jié)束了。不過在我測(cè)試jQuery1.5.1后，居然發(fā)現(xiàn)和我用的jQuery1.4.4是有差異的，早就聽說jQuery1.5.1對(duì)AJAX部分進(jìn)行了重構(gòu)，沒想到還真的對(duì)我們的代碼有點(diǎn)影響。

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

您可能感興趣的文章: