如何确保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注入技巧
Jun 22 Javascript
javascript multibox 全选
Mar 22 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python sys.argv用法实例
2015/05/28 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python判断输入日期为第几天的实例
2018/11/13 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python实现三种随机请求头方式
2021/01/05 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
中考标语大全
2014/06/05 职场文书
经典演讲稿开场白
2014/08/25 职场文书
离职报告格式
2014/11/04 职场文书
放飞理想主题班会
2015/08/14 职场文书