如何确保JavaScript的执行顺序 之jQuery.html深度分析_jquery

我们先来简单回顾下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: 打一个断点,刷新页面

这里的value是字符串:"<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script><script>alert(typeof(jQuery.ui));</script>"
我们来看会进入那个条件分支:首先看看rnocache是啥?

可见value中含有 <script 字符串,不会进入第二个条件分支。
2) 进入html函数的最后一个条件分支

来看看append函数:

3) 进入domManip函数

继续单步调试,发现目标,这里有对scripts的长度判断:

应该是已经分析了输入字符串,并提取了其中的script标签,我们来看下这里的局部变量scripts的内容:

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函数的定义:

由此可见,对于内联的script标签,jQuery通过在head中创建script标签来执行。
4. 后记
目前来看,一切来龙去脉似乎清晰可见。那么大家有没有考虑过,如果动态加载加载不同域名下(Cross-Domain)的JavaScript文件,jQuery还能确保在所有浏览器下的JavaScript的执行顺序吗?
也就是说在当前流行的静态资源的CDN加速情况下,jQuery.html是不是一个完全之策呢?
请看下篇 如何确保JavaScript的执行顺序 - 之jQuery.html并非万能钥匙。待续。。。

时间: 2024-07-29 06:18:35

如何确保JavaScript的执行顺序 之jQuery.html深度分析_jquery的相关文章

如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙_jquery

1. 引言 在上一篇文章<如何确保JavaScript的执行顺序 - 之jQuery.html深度分析>中,我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行,其秘密在于 – 同步AJAX获取外部JavaScript. 我们先来简单回顾下HTML源代码(test2.htm): 复制代码 代码如下: <html> <head> <title></title> <script src="js/jquery-

如何确保JavaScript的执行顺序 之实战篇_javascript技巧

1. 引言 我曾在文章<如何在多个页面使用同一个HTML片段 - 续>的最后提到JavaScript顺序执行的特性.虽然现代浏览器可以并行的下载JavaScript(部分浏览器),但考虑到JavaScript的依赖关系,他们的执行依然是按照引入顺序进行的. 为了更好的测试这个过程,我写了一个简单的HTTP处理程序页面 service.ashx,它可以接受两个参数: 1. file,需要返回文件的服务器端路径. 2. delay,延迟一定时间后再返回本次HTTP请求(毫秒). 一个典型的页面比如

javascript的执行顺序

 JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行 如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜.   那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:   1.代码块 JavaScript中的代码块是指由<script>

深入理解javascript的执行顺序_基础知识

如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语: 1.代码块JavaScript中的代码块是指由<script>标签分割的代码段.例如: 复制代码 代码如下: <script type="text/javascript">     

你是否理解JavaScript的执行顺序?

javascript|执行 通常状况下,JavaScript作为一种解释性的脚本,都是从上而下顺序执行的,但是JavaScript还允许在其语句中嵌套,也就是这个样子: document.write("<script>alert(t);</scr"+"ipt>"); 注意:</script>不能写作</script>,要用字符串连接的形式来表述,否则会有语法错误,估计是因为JavaScript遇到</script

JavaScript 程序执行顺序问题总结_javascript技巧

顺序可能比较乱,写多了再整理,有些术语可能运用也不恰当,欢迎批评指正.以下使用的示例程序都经过了本人的实际验证,兼容各大浏览器.OK,步入正题. 1. 变量的声明和引用 变量必须先声明后引用,这个大家是都知道的,但还是要说说,因为后面要说到一个相关的问题. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2. 函数的声明和调用 JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行.函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序. 复制代码 代码如

jquery中ajax函数执行顺序问题之如何设置同步_jquery

JavaScript code 复制代码 代码如下: function existProduct(obj){ var productname = escape(obj.val()); $.getJSON("../product/searchProductByName.action",datat,function(data){ var falg; falg = data[0]['existproduct']; //falg返回为no 或yes, return falg; }); } fu

Ajax执行顺序流程及回调问题分析_基础知识

一个全局的变量var JsonData; 我这里有一个Ajax处理的方法: JScript code: 复制代码 代码如下: function GetJson(DataSourceName) { $.ajax({ type: "post", url: "Ajax/AjaxData.ashx?MethodName=" + DataSourceName, contentType: "application/json;", data: "&q

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析_jquery

deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn上添加新的属性和方法,jQuery的其他模块大都是这么实现的. 给jQuery添加扩展时用$.extend()如:jQuery.extend({add:function(a,b){return a+b}}) 使用:$.add(1,3)=====>4; 给jQuery实例对象添加扩展时用$.fn.extend(); $.fn.extend({gys:function(){$(