宝哥软件园

jQuery.html深入分析如何保证JavaScript的执行顺序

编辑:宝哥软件园 来源:互联网 时间:2021-10-20

我们先简单回顾一下HTML源代码(test2.htm):复制的代码如下: HTML Head Title/Title Script src=' http : js/jQuery-1 . 4 . 4 . js ' type=' text/JavaScript '/Script $(function(){ $(' # container ')。html('script src='http:/service.ashx?file=js/jquery-ui . jsdelay=2000 ' type=' text /JavaScript ' /script ' ' script alert(type of(jquery . ui));/script’);});/script/head body div id=' container '/div/body/html 2。调试、单步跟进、逐行分析jQuery源代码都挺无聊的。我将以test2.htm为目标,调试并输入jQuery源代码。1)首先在html:中命中断点,刷新页面

这里的值是一个字符串:“script src=”http :/service.ashx?file=js/jquery-ui . jsdelay=2000 ' type=' text/JavaScript '/script script alert(type of(jquery . ui));/script '我们将进入条件分支:首先,什么是rnocache?

可以看出,值包含脚本字符串,不会进入第二个条件分支。2)输入html函数的最后一个条件分支

让我们看看附加函数:

3)进入domManip功能

继续单步调试,找到目标。以下是脚本的长度判断:

它应该已经分析了输入字符串并提取了脚本标记。我们在这里看一下局部变量脚本的内容:

4)我们发现这里的两个局部变量脚本和evalScript是我们关注的重点。让我们看一下:scripts,它是一个包含两个脚本标记的数组:[script src='。/service.ashx?file=js/jquery-ui . jsdelay=2000 ' type=' text/JavaScript '/script,script alert(type of(jquery . ui));/script] evalScript,这是jQuery .每个函数调用的函数,上面数组中的每个值都会作为参数传递给这个函数执行:复制的代码如下:函数evalScript(i,elem){ if(elem . src){ jquery . Ajax({ URL : elem . src,async: false,datatype 3360 ' script ' });} else { jquery . global eval(elem . text | | elem . text content | | elem . innerhtml | | ' ');} if(elem . parent node){ elem . parent node . remove child(elem);}} 3.哦,我看到通过上面的分析,我们清楚地看到jQuery.html函数将首先检索其中的脚本,然后将evalScript函数应用于每个脚本标签。在这个函数中,外部JavaScript和内联JavaScript的处理方式是不同的。1)jquery . html如何处理字符串中的外部脚本标签,复制代码如下: jquery . Ajax({ URL 3360 elem . src,async3360 false,datatype 3360 ' script ' });对于外部脚本标记,例如:script src=' http:/service.ashx?文件=js/jQuery-ui . js delay=2000 ' type=' text/JavaScript '/script,jQuery采用同步Ajax方案(async: false)。这也是保证动态JS在各种浏览器中加载顺序的关键。2)jquery . html如何处理字符串中的内联脚本标记jquery . global eval(elem . text | | elem . text content | | elem . innerhtml | | ' ');看看globalEval函数的定义:

因此,对于内联脚本标记,jQuery通过在head中创建脚本标记来执行。4.后记目前,一切似乎都清晰可见。有没有考虑过,如果动态加载不同域名下的JavaScript文件,jQuery也能保证JavaScript在所有浏览器下的执行顺序?也就是说,在目前流行的静态资源CDN加速下,jQuery.html是否是一个完整的战略?请看如何保证JavaScript在下一个section-jQuery.html的执行顺序不是万能钥匙。待续。

更多资讯
游戏推荐
更多+