如何确保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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
瀑布流布局代码一例
Apr 11 Javascript
javascript去除空格方法小结
May 21 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php创建sprite
2014/02/11 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
js实现日历与定时器
2017/02/22 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python自动翻译实现方法
2016/05/28 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
银行职员思想汇报
2013/12/31 职场文书
小学语文国培感言
2014/03/04 职场文书
绩效管理实施方案
2014/03/19 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
个人安全承诺书
2014/05/22 职场文书
2015年妇女工作总结
2015/05/14 职场文书