如何确保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 window.setTimeout() 的详细用法
Nov 04 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
js中文逗号转英文实现
Feb 11 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
Javascript之String对象详解
Jun 08 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
React SSR样式及SEO的实践
Oct 22 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP 强制下载文件代码
2010/10/24 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
图片按比例缩放函数
2006/06/26 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python如何获取apk的packagename和activity
2020/01/10 Python
学习python需要有编程基础吗
2020/06/02 Python
生产车间班组长岗位职责
2014/01/06 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
作文评语集锦大全
2014/04/23 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
小石潭记导游词
2015/02/03 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers