如何确保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 js cookie的存储,获取和删除
Dec 29 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
js实现电灯开关效果
Jan 19 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php设计模式之委托模式
2016/02/13 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
几行js代码实现自适应
2017/02/24 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python requests指定出口ip的例子
2019/07/25 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
财务管理专业推荐信
2013/11/19 职场文书
创意广告词
2014/03/17 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
杨善洲电影观后感
2015/06/04 职场文书
在校生证明
2015/06/17 职场文书