如何确保JavaScript的执行顺序之jQuery.html并非万能钥匙

更新时间：2011年03月03日 22:48:08 作者：

在上一篇文章《如何确保JavaScript的执行顺序 - 之jQuery.html深度分析》中，我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行，其秘密在于 – 同步AJAX获取外部JavaScript。

1. 引言
在上一篇文章《如何确保JavaScript的执行顺序 - 之jQuery.html深度分析》中，我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行，其秘密在于 – 同步AJAX获取外部JavaScript。
我们先来简单回顾下HTML源代码（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> 

顺便一提的是，通过这种方式加载的外部JavaScript不可以在Firebug中调试，因为AJAX结束后外部JavaScript的解析和内联JavaScript的解析是一样的（都是调用jQuery.globalEval）：

下面进入本篇文章的主题：如果加载的JS是在其它域下面的，jQuery.html还能在各个浏览器下都能保证JS的顺序执行么？
2. 建立测试案例
1) 准备两个域名
为了测试，我在个人主页（http://sanshi.me/）下面临时创建了两个子域名，分别是：
http://test.sanshi.me/
http://test1.sanshi.me/
2) 更新Demo页面（test2_1.htm）
我会把test2_1.htm放在第一个子域名下，访问地址为http://test.sanshi.me/jsorder/test2_1.htm，其源代码如下：

复制代码代码如下:

 
<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函数动态加载其它域下的JavaScript
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

3. jQuery.html并非万能钥匙，那么
不知道大家是否还记得我们在第一篇文章中提到的test3.htm不，这个结果和那个示例的结果一模一样，jQuery.html也并非万能钥匙。这不禁让我们怀疑这两个示例的内部逻辑是否一样？
但是第二篇文章不是明明白白告诉我们，jQuery.html使用的是同步AJAX的机制来加载外部JS的么？等等。。。。。。
大家有没有从上面的分析中发现问题，AJAX来加载其他域的资源，这不是明摆着违背了大名鼎鼎的同源策略（Same Origin Policy）了么？所以jQuery不可能这么实现，我们来看看jQuery.ajax文档是怎么说的：

看来我们在第二篇文章中看到的这个函数（evalScript）内部并非真的通过同步AJAX来获取数据：

4. 深入jQuery.ajax函数，看看怎么加载不同域下的JS文件

注释已经写的很清楚了，如果是通过GET方式请求JavaScript文件，并且这个文件是在其他域下面的（remote），那么就通过在head中添加script标签来处理，而不是走AJAX的流程。所以在这个条件分支结束的时候，直接从函数体返回：

经过分析，我们发现在动态加载不同域的JavaScript时，jQuery.html其实采用了在head中添加script标签的做法（不管是外部JS或者内联JS），这和我们在第一篇文章中提到的test3.htm是一模一样的逻辑，这也验证了我们的想法：

由此可见，如果想兼容CDN加速静态资源的情况，还必须使用第一篇文章中提到的“方案一，如何在动态添加script标签时确保执行顺序”。

5. 后记

本来这个系列的文章到这就应该结束了。不过在我测试jQuery1.5.1后，居然发现和我用的jQuery1.4.4是有差异的，早就听说jQuery1.5.1对AJAX部分进行了重构，没想到还真的对我们的代码有点影响。

具体是哪方面的影响，请看下一篇文章：如何确保JavaScript的执行顺序 - 之jQuery1.5.1与jQuery1.4.4的细微差异。待续。。。

您可能感兴趣的文章:

jQuery选择器之层次选择器用法实例分析
这篇文章主要介绍了jQuery选择器之层次选择器用法,结合实例形式分析了jQuery后代元素选择器、子元素选择器、相邻元素选择器、兄弟元素选择器等相关使用技巧,需要的朋友可以参考下
2019-02-02
使用jQuery操作Cookies的实现代码
Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术
2011-10-10
jQuery操作json常用方法示例
这篇文章主要介绍了jQuery操作json常用方法,结合实例形式分析了jQuery针对json的获取、创建等常见操作技巧,需要的朋友可以参考下
2017-01-01
jquery iframe操作详细解析
这篇文章主要是对jquery中iframe的操作进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
jQuery实现新消息闪烁标题提示的方法
这篇文章主要介绍了jQuery实现新消息闪烁标题提示的方法,实例分析了jQuery操作样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
js实现表格筛选功能
本文主要介绍了js实现表格筛选功能的代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
jquery隔行换色效果实现方法
这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
用jquery中插件dialog实现弹框效果实例代码
这篇文章介绍了jquery中插件dialog实现弹框效果实例代码，有需要的朋友可以参考一下
2013-11-11
jQuery仿移动端支付宝键盘的实现代码
最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。项目只是单纯的手机网站，所以这个功能由前端来实现，下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码，需要的朋友参考下吧
2018-08-08
jQuery实现图片加载完成后改变图片大小的方法
这篇文章主要介绍了jQuery实现图片加载完成后改变图片大小的方法,结合实例形式分析了jQuery图片样式与页面元素属性动态操作的相关技巧,需要的朋友可以参考下
2016-03-03