如何確保JavaScript的執(zhí)行順序 之實(shí)戰(zhàn)篇
我曾在文章《如何在多個(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)鍵代碼如下：
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è)面源代碼如下：
<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í)行的特性。 Firefox 3.6 IE 8 Chrome 10 Safari 4 Opera 11
3. 通過(guò)JavaScript添加script標(biāo)簽（test3.htm）
我們首先定義一個(gè)addScript函數(shù)，用來(lái)引入外部或者內(nèi)聯(lián)JavaScript。test3.htm的頁(yè)面源代碼如下：
<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)簽
可見，通過(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è)解決方案： Firefox 3.6 IE 8 Chrome 10 Safari 4 Opera 11 Firefox 3.6 IE 8 Chrome 10 Safari 4 Opera 11
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給出了具體的解決方案：
<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)題
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：
<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)題
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深度分析
相關(guān)文章
js實(shí)現(xiàn)二代身份證號(hào)碼驗(yàn)證詳解
本文給大家分享一段超級(jí)全面的二代身份證號(hào)碼驗(yàn)證程序，由JS編寫而成，可以校驗(yàn)身份證的地址碼、出生日期碼、順序碼和數(shù)字校驗(yàn)碼。是身份證去偽存真的一大利器。2014-11-11
RxJS中有四種不同類型的Subject，它們分別是Subject、BehaviorSubject、ReplaySubject和AsyncSubject，本文將介紹這四種Subject的用法、區(qū)別以及適用的應(yīng)用場(chǎng)景，并提供代碼示例,需要的朋友可以參考下2023-07-07
JavaScript實(shí)現(xiàn)文本中間縮略的兩種方案
項(xiàng)目中經(jīng)常會(huì)遇到縮略展示文字的場(chǎng)景,即要求文字在一行不換行展示,超出自動(dòng)展示...,常用的展示效果有兩種,文字中間縮略以及文字末尾縮略,本文將通過(guò)代碼示例給大家詳細(xì)的講一下這兩種方案,需要的朋友可以參考下2024-06-06
echarts折線圖流動(dòng)特效的實(shí)現(xiàn)全過(guò)程(非平滑曲線)
最近因?yàn)楣緲I(yè)務(wù)需求,需要實(shí)現(xiàn),當(dāng)Echarts重新加載數(shù)據(jù)時(shí)實(shí)現(xiàn)動(dòng)態(tài)效果,下面這篇文章主要給大家介紹了關(guān)于echarts折線圖流動(dòng)特效實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-03-03
Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
這篇文章主要介紹了Bootstrap導(dǎo)航欄各元素操作方法，針對(duì)表單、按鈕、文本進(jìn)行操作，感興趣的小伙伴們可以參考一下2015-12-12
javascript對(duì)下拉列表框(select)的操作實(shí)例講解
這篇文章主要介紹了javascript對(duì)下拉列表框(select)的操作。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解
這篇文章主要介紹了微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
js中常用的4種模糊查詢?cè)斀?includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品,所以模糊查詢和下拉匹配也成了前端必備的一個(gè)小技能,需要的朋友可以參考下2023-11-11
js驗(yàn)證真實(shí)姓名與身份證號(hào)是否匹配
使用javascript技術(shù)驗(yàn)真實(shí)姓名，要用到unicode字符來(lái)匹配，由于中國(guó)人的姓名長(zhǎng)度一般是在2-4這個(gè)范圍內(nèi)，所以重復(fù)匹配{2,4}次。接下來(lái)，通過(guò)本文給大家分享js驗(yàn)證省份證號(hào)與真實(shí)姓名是否匹配，需要的朋友可以參考下2015-10-10