如何确保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 相关文章推荐
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
vue环形进度条组件实例应用
Oct 10 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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/25 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
javascript实现动态标签云
2015/10/16 Javascript
微信小程序入门教程
2016/11/18 Javascript
vuejs如何配置less
2017/04/25 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
Python中return语句用法实例分析
2015/08/04 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python放大图片和画方格实现算法
2018/03/30 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python判断无向图环是否存在的示例
2019/11/22 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers