快捷導(dǎo)航

如何確保JavaScript的執(zhí)行順序之實(shí)戰(zhàn)篇

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

我曾在文章《如何在多個(gè)頁(yè)面使用同一個(gè)HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現(xiàn)代瀏覽器可以并行的下載JavaScript（部分瀏覽器），但考慮到JavaScript的依賴關(guān)系，他們的執(zhí)行依然是按照引入順序進(jìn)行的。

1. 引言
我曾在文章《如何在多個(gè)頁(yè)面使用同一個(gè)HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現(xiàn)代瀏覽器可以并行的下載JavaScript（部分瀏覽器），但考慮到JavaScript的依賴關(guān)系，他們的執(zhí)行依然是按照引入順序進(jìn)行的。
為了更好的測(cè)試這個(gè)過(guò)程，我寫了一個(gè)簡(jiǎn)單的HTTP處理程序頁(yè)面 service.ashx，它可以接受兩個(gè)參數(shù)：
1. file，需要返回文件的服務(wù)器端路徑。
2. delay，延遲一定時(shí)間后再返回本次HTTP請(qǐng)求（毫秒）。
一個(gè)典型的頁(yè)面比如：./service.ashx?file=js/jquery-ui.js&delay=2000，表示延遲2秒鐘后再返回服務(wù)器端的js/jquery-ui.js文件。
service.ashx 的關(guān)鍵代碼如下：

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

 
public void ProcessRequest(HttpContext context) 
{ 
int delay = 0; 
if (!String.IsNullOrEmpty(context.Request["delay"])) 
{ 
delay = Convert.ToInt32(context.Request["delay"]); 
} 
if (delay > 0) 
{ 
System.Threading.Thread.Sleep(1000); 
} 
string filePath = context.Request["file"].ToString(); 
string fileContent = String.Empty; 
using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath))) 
{ 
fileContent = sr.ReadToEnd(); 
} 
if (filePath.EndsWith(".js")) 
{ 
context.Response.ContentType = "application/x-javascript"; 
} 
else 
{ 
context.Response.ContentType = "text/plain"; 
} 
context.Response.Write(fileContent); 
} 

2. 通過(guò)script標(biāo)簽直接引入JavaScript（test1.htm）
首先我們分析下在<head>標(biāo)簽中順序引入JavaScript的情況。test1.htm的頁(yè)面源代碼如下：

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

 
<html> 
<head> 
<title></title> 
<script src="./js/jquery-1.4.4.js" 
type="text/javascript"></script> 
<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" 
type="text/javascript"></script> 
<script> 
alert(typeof (jQuery.ui)); 
</script> 
</head> 
<body> 
</body> 
</html> 

我們分別在各種瀏覽器中測(cè)試這個(gè)例子：
test1.htm
通過(guò)script標(biāo)簽直接引入JavaScript

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

可以看出各個(gè)主流瀏覽器的行為一致。雖然jQueryUI在服務(wù)器延遲了2秒鐘再返回，但是后引入的內(nèi)聯(lián)JavaScript還是等待了2秒，等前面引入的JavaScript執(zhí)行完畢才執(zhí)行。這也是著名的JavaScript順序執(zhí)行的特性。
3. 通過(guò)JavaScript添加script標(biāo)簽（test3.htm）
我們首先定義一個(gè)addScript函數(shù)，用來(lái)引入外部或者內(nèi)聯(lián)JavaScript。test3.htm的頁(yè)面源代碼如下：

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

 
<html> 
<head> 
<title></title> 
<script src="./js/jquery-1.4.4.js" type="text/javascript"></script> 
<script> 
function addScript(url, inline) { 
var head = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
if (inline) { 
script.text = url; 
} else { 
script.src = url; 
} 
head.appendChild(script); 
} 
$(function () { 
addScript('./service.ashx?file=js/jquery-ui.js&delay=2000'); 
addScript('alert(typeof(jQuery.ui));', true); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 

我們分別在各種瀏覽器中測(cè)試這個(gè)例子：
test3.htm
通過(guò)JavaScript添加<script>標(biāo)簽

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

可見(jiàn)，通過(guò)JavaScript在DOM加載完畢后再引入外部或者內(nèi)聯(lián)JavaScript時(shí)，Firefox和Opera的行為一致，能夠確保JavaScript的執(zhí)行順序和引入順序一致。但是IE8, Chrome, Safari 卻不能保證這個(gè)執(zhí)行順序。

雖然各種瀏覽器在確保執(zhí)行順序方面不盡相同，不過(guò)這時(shí)的最大好處是多個(gè)JavaScript文件能夠并行下載，這在所有瀏覽器中行為一致。當(dāng)然這不是這篇文章的主題，可以Google更多細(xì)節(jié)。

如何解決各個(gè)瀏覽器的不一致性，下面提供了兩個(gè)解決方案：
4. 方案一，如何在動(dòng)態(tài)添加script標(biāo)簽時(shí)確保執(zhí)行順序
有時(shí)頁(yè)面邏輯要求我們必須通過(guò)上面的方式動(dòng)態(tài)執(zhí)行JavaScript，那么如何確保所有瀏覽器下的執(zhí)行順序（目前只有Firefox和Opera確保執(zhí)行順序）。
其實(shí)解決方案很簡(jiǎn)單，我們?yōu)楹瘮?shù)執(zhí)行添加一個(gè)complete的回調(diào)函數(shù)就行了。下面的test4.htm給出了具體的解決方案：

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

 
<html> 
<head> 
<title></title> 
<script src="./js/jquery-1.4.4.js" type="text/javascript"></script> 
<script> 
function addScript(url, inline, callback) { 
var head = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
if (inline) { 
script.text = url; 
} else { 
script.src = url; 
script.onload = script.onreadystatechange = function () { 
if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') { 
if (callback) { 
callback(); 
} 
script.onload = script.onreadystatechange = null; 
}; 
}; 
} 
head.appendChild(script); 
if (inline && callback) { 
callback(); 
} 
} 
$(function () { 
addScript('./service.ashx?file=js/jquery-ui.js&delay=2000', false, function () { 
addScript('alert(typeof(jQuery.ui));', true); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 

此時(shí)所有瀏覽器中的行為一致：
test4.htm
通過(guò)回調(diào)函數(shù)解決動(dòng)態(tài)添加JavaScript的順序問(wèn)題

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

5. 方案二，使用jQuery的html函數(shù)動(dòng)態(tài)添加JavaScript
jQuery的html函數(shù)用來(lái)更新一個(gè)DOM片段，我們可以很方便的通過(guò)這個(gè)函數(shù)來(lái)動(dòng)態(tài)加載JavaScript，請(qǐng)看示例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> 

此時(shí)，各個(gè)瀏覽器中的行為一致：
test2.htm
通過(guò)jQuery的html函數(shù)解決動(dòng)態(tài)添加JavaScript的順序問(wèn)題

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

6. 后記
為什么jQuery的html函數(shù)能夠確保動(dòng)態(tài)加載JavaScript的執(zhí)行順序呢？
我們知道通過(guò)簡(jiǎn)單的 .innerHTML 更新DOM節(jié)點(diǎn)，是不會(huì)讓其中的JavaScript的執(zhí)行，我們可以簡(jiǎn)單的把這個(gè)例子的源代碼改成：
$('#container')[0].innerHTML = '<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>';
這種情況下jQueryUI根本不會(huì)加載。
那么jQuery是如果做到的呢？下篇文章我們會(huì)追根溯源，詳細(xì)分析jQuery源代碼，請(qǐng)繼續(xù)瀏覽：如何確保JavaScript的執(zhí)行順序 – 之jQuery.html深度分析

您可能感興趣的文章: