如何确保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操作css实现js改变背景图片示例
Mar 10 Javascript
js分页代码分享
Apr 28 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
微信小程序自定义组件实现环形进度条
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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
解析php入库和出库
2013/06/25 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python面向对象 反射原理解析
2019/08/12 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
《满井游记》教学反思
2014/02/26 职场文书
《叶问2》观后感
2015/06/15 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL