如何确保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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
理解JS绑定事件
2016/01/19 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
详解在Python和IPython中使用Docker
2015/04/28 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python retrying模块的使用方法详解
2019/09/25 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python为什么要安装到c盘
2020/07/20 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
教师专业自荐书范文
2014/02/10 职场文书
社会学专业求职信
2014/02/24 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
股指期货心得体会
2014/09/10 职场文书
离婚协议书怎么写
2015/01/26 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
教师教育教学随笔
2015/08/15 职场文书
日元符号 ¥
2022/02/17 杂记