如何确保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 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
javascript 数组操作详解
Jan 29 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
javascript代码实现简易计算器
Jan 25 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语言认识上需要避免的10大误区
2014/06/12 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
React中常见的动画实现的几种方式
2018/01/10 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
利用python爬取有道词典的方法
2020/12/08 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
西安当代医院管理研究院笔试题
2015/12/11 面试题
人事部经理岗位职责
2014/03/07 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
幼儿发展评估方案
2014/06/11 职场文书
驻村工作先进事迹
2014/08/14 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis