如何确保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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js charAt的使用示例
Feb 18 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
JavaScript实现Excel表格效果
Feb 07 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
一个取得文件扩展名的函数
2006/10/09 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
JPA的特点
2014/10/25 面试题
优良学风班申请材料
2014/02/13 职场文书
我的中国梦口号
2014/06/16 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
《自己去吧》教学反思
2016/02/16 职场文书