现在前端用javascript用的比较多，当然真心的说这个语言是一个非常业余的语言，但是用的人很多，所以也比较火。今天想完成一个javascript外部文件自动加载的设计（类似于java或者php的import和require_once)，因此仔细研究了下Javascript的解析顺序，发现要真正的实现javascript的动态加载是无法完美实现的（所以现在所有的js库都会放在一个js文件里面，然后让你在head部分通过src引入）。其实javascript的解析顺序非常的简单，Javascript解析的基本顺序原则是：从上到下，同步解析。也就是解析完前一段javascript代码，才会继续解析后面的代码。如果通过javascript代码动态加载的代码部分，这属于异步解析的，通常会在整个HTML解析完毕之后才会解析动态加载的部分。（IE10，Chrome29，FireFox34上得到验证）。
示例代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <script>window.console.log("html befor...");</script>
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <script src=‘myjs/autoload.js‘></script>
8 <title>New Web Project</title>
9 </head>
10 <script>window.console.log("head after...");</script>
11 <script src=‘myjs/autoload.js‘></script>
12 <body>
13 <script src=‘myjs/HelloDate.js‘></script>
14 <script src=‘myjs/Student.js‘></script>
15 <script>
16 LoadScriptEnd("myjs/HelloDate.js", loadend);
17 LoadScriptEnd("myjs/Student.js",loadend2);
18 function loadend()
19 {
20 var obj = new HelloDate();
21 document.getElementsByTagName("h2")[0].innerHTML = obj.GetDateStr();
22
23 }
24
25 function loadend2()
26 {
27 var stu=new Student("1001","jackwong","man");
28 document.getElementsByTagName("h3")[0].innerHTML=stu.DispInfo();
29
30 }
31
32
33 </script>
34
35 <h1>New Web Project Page</h1>
36 <h2>this is end!</h2>
37 <h3>this is end2!</h3>
38
39 <script>window.console.log("body script end");</script>
40 </body>
41
42 <script>for(var i=0;i<100000000;i++)m++;</script>
43 <script>window.console.log("body after...");</script>
44 </html>
45 <script>window.console.log("html after...");</script>
以上代码里面LoadScriptEnd函数是动态加载外部 js文件的函数，你的你能说出里面的代码执行顺序吗？
正确的执行顺序应该是：
1 "html befor..." Jstest.html:3 2 "autoload begin" autoload.js:1 3 "autoload end" autoload.js:62 4 "head after..." Jstest.html:10 5 "autoload begin" autoload.js:1 6 "autoload end" autoload.js:62 7 "HelloDate begin" HelloDate.js:1 8 "HelloDate end" HelloDate.js:17 9 "Student begin" Student.js:1 10 "Student end" Student.js:13 11 "LoadScriptEnd begin" autoload.js:33 12 "LoadScriptEnd Return" autoload.js:60 13 "LoadScriptEnd begin" autoload.js:33 14 "LoadScriptEnd Return" autoload.js:60 15 "body script end" Jstest.html:40 16 "body after..." Jstest.html:44 17 "html after..." Jstest.html:46 18 "Student begin" Student.js:1 19 "Student end" Student.js:13 20 "LoadScriptEnd OK" autoload.js:55 21 "HelloDate begin" HelloDate.js:1 22 "HelloDate end" HelloDate.js:17 23 "LoadScriptEnd OK" autoload.js:55
时间： 2024-10-11 22:45:26