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


Posted in Javascript onMarch 03, 2011

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):

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


下面进入本篇文章的主题:如果加载的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文档是怎么说的:

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

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

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


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

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

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

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

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

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

 

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

5.     后记

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

 

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

Javascript 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 #Javascript
jQuery 操作option的实现代码
Mar 03 #Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 #Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 #Javascript
基于jQuery的简单的列表导航菜单
Mar 02 #Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 #Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 #Javascript
You might like
星际实力自我测试
2020/03/04 星际争霸
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
python 生成器协程运算实例
2017/09/04 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Pytorch释放显存占用方式
2020/01/13 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
初一学生期末评语
2014/04/24 职场文书
五一活动标语
2014/06/30 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python