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

2020-05-23 06:06:42易采站长站整理

我们先来简单回顾下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>​]