如何确保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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
Js切换功能的简单方法
Nov 23 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
layui实现数据分页功能
Jul 27 Javascript
JS实现动态无缝轮播
Jan 11 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 代码规范小结
2012/03/08 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
python简单猜数游戏实例
2015/07/09 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
详解python做UI界面的方法
2019/02/27 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
2014年毕业演讲稿范文
2014/05/13 职场文书
国家助学金感谢信
2015/01/21 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
2015年党小组工作总结
2015/05/26 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
高二数学教学反思
2016/02/18 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL