如何确保JavaScript的执行顺序 之实战篇_javascript技巧

1. 引言
我曾在文章《如何在多个页面使用同一个HTML片段 - 续》的最后提到JavaScript顺序执行的特性。虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。
为了更好的测试这个过程，我写了一个简单的HTTP处理程序页面 service.ashx，它可以接受两个参数：
1. file，需要返回文件的服务器端路径。
2. delay，延迟一定时间后再返回本次HTTP请求（毫秒）。
一个典型的页面比如：./service.ashx?file=js/jquery-ui.js&delay=2000，表示延迟2秒钟后再返回服务器端的js/jquery-ui.js文件。
service.ashx 的关键代码如下：

复制代码 代码如下:

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. 通过script标签直接引入JavaScript（test1.htm）
首先我们分析下在标签中顺序引入JavaScript的情况。test1.htm的页面源代码如下：

复制代码 代码如下:

<script> <BR>alert(typeof (jQuery.ui)); <BR></script>

我们分别在各种浏览器中测试这个例子：
test1.htm
通过script标签直接引入JavaScript

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

 

可以看出各个主流浏览器的行为一致。虽然jQueryUI在服务器延迟了2秒钟再返回，但是后引入的内联JavaScript还是等待了2秒，等前面引入的JavaScript执行完毕才执行。这也是著名的JavaScript顺序执行的特性。
3. 通过JavaScript添加script标签（test3.htm）
我们首先定义一个addScript函数，用来引入外部或者内联JavaScript。test3.htm的页面源代码如下：

复制代码 代码如下:

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

我们分别在各种浏览器中测试这个例子：
test3.htm
通过JavaScript添加<script>标签 <BR> <TABLE style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; MARGIN-LEFT: 10.5pt; BORDER-LEFT: medium none; WIDTH: 413.1pt; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=689 border=1> <TBODY> <TR> <TD style="BORDER-RIGHT: 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: medium none; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: 1pt solid; WIDTH: 67.25pt; PADDING-TOP: 0cm; BORDER-BOTTOM: 1pt solid" vAlign=top width=112> <P align=left><SPAN>Firefox 3.6</script>

IE 8

Chrome 10

Safari 4

Opera 11

可见，通过JavaScript在DOM加载完毕后再引入外部或者内联JavaScript时，Firefox和Opera的行为一致，能够确保JavaScript的执行顺序和引入顺序一致。但是IE8, Chrome, Safari 却不能保证这个执行顺序。

虽然各种浏览器在确保执行顺序方面不尽相同，不过这时的最大好处是多个JavaScript文件能够并行下载，这在所有浏览器中行为一致。当然这不是这篇文章的主题，可以Google更多细节。

如何解决各个浏览器的不一致性，下面提供了两个解决方案：
4. 方案一，如何在动态添加script标签时确保执行顺序
有时页面逻辑要求我们必须通过上面的方式动态执行JavaScript，那么如何确保所有浏览器下的执行顺序（目前只有Firefox和Opera确保执行顺序）。
其实解决方案很简单，我们为函数执行添加一个complete的回调函数就行了。下面的test4.htm给出了具体的解决方案：

复制代码 代码如下:

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

此时所有浏览器中的行为一致：
test4.htm
通过回调函数解决动态添加JavaScript的顺序问题

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

5. 方案二，使用jQuery的html函数动态添加JavaScript
jQuery的html函数用来更新一个DOM片段，我们可以很方便的通过这个函数来动态加载JavaScript，请看示例test2.htm：

复制代码 代码如下:

<script> <BR>$(function(){ <BR>$('#container').html('<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>'); <BR>}); <BR></script>

此时，各个浏览器中的行为一致：
test2.htm
通过jQuery的html函数解决动态添加JavaScript的顺序问题

Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

6. 后记
为什么jQuery的html函数能够确保动态加载JavaScript的执行顺序呢？
我们知道通过简单的 .innerHTML 更新DOM节点，是不会让其中的JavaScript的执行，我们可以简单的把这个例子的源代码改成：
$('#container')[0].innerHTML = '

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript