如何确保JavaScript的执行顺序 之jQuery.html深度分析


Posted in Javascript onMarch 03, 2011

我们先来简单回顾下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>

2.调试,单步跟进
逐行分析jQuery源代码是一件相当枯燥的事情。我这里会以test2.htm为目标,调试进入jQuery源代码。
1) 首先在html: 打一个断点,刷新页面
如何确保JavaScript的执行顺序 之jQuery.html深度分析
这里的value是字符串:"<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script><script>alert(typeof(jQuery.ui));</script>"
我们来看会进入那个条件分支:首先看看rnocache是啥?
如何确保JavaScript的执行顺序 之jQuery.html深度分析
可见value中含有 <script 字符串,不会进入第二个条件分支。
2) 进入html函数的最后一个条件分支
如何确保JavaScript的执行顺序 之jQuery.html深度分析

来看看append函数:

如何确保JavaScript的执行顺序 之jQuery.html深度分析

3) 进入domManip函数

如何确保JavaScript的执行顺序 之jQuery.html深度分析

继续单步调试,发现目标,这里有对scripts的长度判断:

如何确保JavaScript的执行顺序 之jQuery.html深度分析

应该是已经分析了输入字符串,并提取了其中的script标签,我们来看下这里的局部变量scripts的内容:
如何确保JavaScript的执行顺序 之jQuery.html深度分析
4)发现目标
这里的两个局部变量scripts和evalScript是我们重点需要关注的,我们分别来看下:
scripts,这是一个数组,包含两个script标签:
[<script src=​"./​service.ashx?file=js/​jquery-ui.js&delay=2000" type=​"text/​javascript">​</script>​
, <script>​alert(typeof(jQuery.ui));​</script>​]
evalScript,这是一个函数,通过jQuery.each函数来调用,上述数组中的每个值都会作为参数传到这个函数中执行:

function evalScript( i, elem ) { 
if ( elem.src ) { 
jQuery.ajax({ 
url: elem.src, 
async: false, 
dataType: "script" 
}); 
} else { 
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" ); 
} 
if ( elem.parentNode ) { 
elem.parentNode.removeChild( elem ); 
} 
}

3. 哦,明白了
通过上面的分析,我们清楚的看到jQuery.html函数会首先把其中的script检索出来,然后对于每个script标签应用evalScript函数。
在这个函数中,对于外部JavaScript个内联JavaScript,进行了不同的处理。
1)jQuery.html如何处理字符串中的外部script标签
jQuery.ajax({ 
url: elem.src, 
async: false, 
dataType: "script" 
});

对于外部script标签,比如:<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>,jQuery采用了同步Ajax方案(async: false)。这也是在各种不同浏览器中能够保证动态JS的加载顺序的关键所在。
2)jQuery.html如何处理字符串中的内联script标签
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
来看下globalEval函数的定义:
如何确保JavaScript的执行顺序 之jQuery.html深度分析
由此可见,对于内联的script标签,jQuery通过在head中创建script标签来执行。
4. 后记
目前来看,一切来龙去脉似乎清晰可见。那么大家有没有考虑过,如果动态加载加载不同域名下(Cross-Domain)的JavaScript文件,jQuery还能确保在所有浏览器下的JavaScript的执行顺序吗?
也就是说在当前流行的静态资源的CDN加速情况下,jQuery.html是不是一个完全之策呢?
请看下篇 如何确保JavaScript的执行顺序 - 之jQuery.html并非万能钥匙。待续。。。

Javascript 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
javascript操作ul中li的方法
May 14 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue实现自定义多选按钮
Jul 16 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
jquery一句话全选/取消全选
Mar 01 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP实现的购物车类实例
2015/06/17 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python 性能提升的几种方法
2016/07/15 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python3.x实现发送邮件功能
2018/05/22 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python超时重新请求解决方案
2019/10/21 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python 如何展开嵌套的序列
2020/08/01 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
简述DNS进行域名解析的过程
2013/12/02 面试题
EJB的角色和三个对象
2015/12/31 面试题
学生安全教育材料
2014/02/14 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
培训班主持词
2014/03/28 职场文书
学习型班组申报材料
2014/05/31 职场文书
花田少年史观后感
2015/06/16 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记