如何确保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 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
详解JavaScript 异步编程
Jul 13 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
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
宿舍标语大全
2014/06/19 职场文书
法学自荐信
2014/06/20 职场文书
大学生党性分析材料
2014/12/19 职场文书
入党培养人考察意见
2015/06/08 职场文书
早安问候语大全
2015/11/10 职场文书