如何确保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 25 Javascript
js实现表格字段排序
Feb 19 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
JS原形与原型链深入详解
May 09 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 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中截取字符串支持utf-8
2007/01/18 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php 数组使用详解 推荐
2011/06/02 PHP
php学习笔记之面向对象
2014/11/08 PHP
js计算页面刷新的次数
2009/07/20 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python实现的堆排序算法示例
2018/04/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
毕业生实习证明
2014/09/19 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS