如何确保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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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无限分类的类
2007/01/02 PHP
解析argc argv在php中的应用
2013/06/24 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
深入理解Vuex 模块化(module)
2017/09/26 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
Python切片知识解析
2016/03/06 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
浅析python参数的知识点
2018/12/10 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
django model object序列化实例
2020/03/13 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
三年大学生活自我鉴定
2014/01/21 职场文书
小班秋游活动方案
2014/02/22 职场文书
工程建设实施方案
2014/03/14 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
社区服务活动报告
2015/02/05 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers