如何确保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 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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 STRING 陷阱原理说明
2010/07/24 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
js 判断 enter 事件
2009/02/12 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
深入学习Python中的装饰器使用
2016/06/20 Python
python命令 -u参数用法解析
2019/10/24 Python
基于pandas中expand的作用详解
2019/12/17 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python流程控制常用工具详解
2020/02/24 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
岗位职责的含义
2013/11/17 职场文书
大专生简历的自我评价
2013/11/26 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
幸福中国演讲稿
2014/09/12 职场文书
义诊活动通知
2015/04/24 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android