如何确保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代码
Nov 09 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
JavaScript中的相等操作符使用详解
Dec 21 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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实现文件下载功能的几个代码分享
2014/05/10 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
33道php常见面试题及答案
2015/07/06 PHP
php实现上传图片文件代码
2015/07/19 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
python海龟绘图实例教程
2014/07/24 Python
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python 监测文件是否更新的方法
2019/06/10 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python Selenium 库的使用技巧
2020/10/16 Python
基于PyTorch中view的用法说明
2021/03/03 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
车间主管岗位职责
2013/11/14 职场文书
党支部承诺书
2015/01/20 职场文书
三峡人家导游词
2015/01/31 职场文书
技术负责人岗位职责
2015/02/10 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Python实现简繁体转换
2021/06/07 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript