我思故我強(qiáng)

通常狀況下，javascript作為一種解釋性的腳本，都是從上而下順序執(zhí)行的，但是JavaScript還允許在其語(yǔ)句中嵌套，也就是這個(gè)樣子：

document.write("<script>alert(t);</scr"+"ipt>");

注意：</script>不能寫(xiě)作</script>，要用字符串連接的形式來(lái)表述，否則會(huì)有語(yǔ)法錯(cuò)誤，估計(jì)是因?yàn)镴avaScript遇到</script>就以為腳本結(jié)束了。

在這種情況下，正常的腳本和嵌入的腳本的執(zhí)行順序就需要研究一下了。



b.js：

alert("5");


a.js：

alert("4");
document.write("<script src=b.js></scr"+"ipt>");
alert("6");


test.html：

<script src=a.js></script>
<script>
alert("1");
document.write("<script src=b.js></scr"+"ipt>");
document.write("<script>alert("3")</scr"+"ipt>");
alert("2");
</script>



執(zhí)行test.html，可以看到打印的順序是：4,6,5,1,3,2,5

還可以做一些相關(guān)測(cè)試，得出的結(jié)論是：
1.同級(jí)的不同的代碼塊，代碼塊間的執(zhí)行順序?yàn)閺纳系较拢?br />2.在代碼中嵌入代碼的情況下，先執(zhí)行上層代碼塊，再執(zhí)行子代碼塊；代碼中嵌入代碼是指一個(gè)文件引入另一個(gè)文件，而不是指所有的通過(guò)document.write形式打出的代碼。

---------------------------------------------------------------------------------------------

一、在HTML中嵌入Javasript的方法

1. 直接在Javascript代碼放在標(biāo)記對(duì)<script>和</script>之間
2. 由<script />標(biāo)記的src屬性制定外部的js文件
3. 放在事件處理程序中，比如：<p onclick="alert('我是由onclick事件執(zhí)行的Javascript')">點(diǎn)擊我</p>
4. 作為URL的主體，這個(gè)URL使用特殊的Javascript：協(xié)議，比如：<a href="javascript:alert('我是由javascript:協(xié)議執(zhí)行的javascript')">點(diǎn)擊我</a>
5. 利用javascript本身的document.write()方法寫(xiě)入新的javascript代碼
6. 利用Ajax異步獲取javascript代碼，然后執(zhí)行

第3種和第4種方法寫(xiě)入的Javascript需要觸發(fā)才能執(zhí)行，所以除非特別設(shè)置，否則頁(yè)面加載時(shí)不會(huì)執(zhí)行。

二、Javascript在頁(yè)面的執(zhí)行順序

1. 頁(yè)面上的Javascript代碼是HTML文檔的一部分，所以Javascript在頁(yè)面裝載時(shí)執(zhí)行的順序就是其引入標(biāo)記<script />的出現(xiàn)順序， <script />標(biāo)記里面的或者通過(guò)src引入的外部JS，都是按照其語(yǔ)句出現(xiàn)的順序執(zhí)行，而且執(zhí)行過(guò)程是文檔裝載的一部分。
2. 每個(gè)腳本定義的全局變量和函數(shù)，都可以被后面執(zhí)行的腳本所調(diào)用。
3. 變量的調(diào)用，必須是前面已經(jīng)聲明，否則獲取的變量值是undefined。

   <script type="text/javscrpt">//<![CDATA[
   alert(tmp);??//輸出 undefined
   var tmp = 1;alert(tmp);??//輸出 1
   //]]></script>

4. 同一段腳本，函數(shù)定義可以出現(xiàn)在函數(shù)調(diào)用的后面，但是如果是分別在兩段代碼，且函數(shù)調(diào)用在第一段代碼中，則會(huì)報(bào)函數(shù)未定義錯(cuò)誤。

   <script type="text/javscrpt">//<![CDATA[
   aa(); //瀏覽器報(bào)錯(cuò)
   //]]></script>
   <script type="text/javscrpt">//<![CDATA[
   aa();???//輸出 1 
   function aa(){
   ?? alert(1);}
   //]]></script>

5. document.write()會(huì)把輸出寫(xiě)入到腳本文檔所在的位置，瀏覽器解析完documemt.write()所在文檔內(nèi)容后，繼續(xù)解析document.write()輸出的內(nèi)容，然后在繼續(xù)解析HTML文檔。

   <script type="text/javascript">//<![CDATA[?????
   document.write('<script type="text/javascript" src="test.js">
   <\/script>');?????
   document.write('<script type="text/javascript">');?????
   document.write('alert(2);')?????
   document.write('alert("我是" + tmpStr);');?????
   document.write('<\/script>');?????
   //]]></script>???
   <script type="text/javascript">//<![CDATA[?????
   alert(3);?????
   //]]></script>

   test.js的內(nèi)容是：

   var tmpStr = 1;????? alert(tmpStr);

   • 在Firefox和Opera中的彈出值的順序是：1、2、我是1、3
   • 在IE中彈出值的順序是：2、1、3，同時(shí)瀏覽器報(bào)錯(cuò)：tmpStr未定義

   原因可能是IE在document.write時(shí)，并未等待加載SRC中的Javascript代碼完畢后，才執(zhí)行下一行，所以導(dǎo)致2先彈出，并且執(zhí)行到document.write(’document.write("我是" + tmpStr)’)調(diào)用tmpStr時(shí)，tmpStr并未定義，從而報(bào)錯(cuò)。

   解決這個(gè)問(wèn)題，可以利用HTML解析是解析完一個(gè)HTML標(biāo)簽，再執(zhí)行下一個(gè)的原理，把代碼拆分來(lái)實(shí)現(xiàn)：

   <script type="text/javascript">//<![CDATA[?????
   document.write('<script type="text/javascript" src="test.js">
   <\/script>');?????
   //]]></script>???
   <script type="text/javascript">//<![CDATA[?????
   document.write('<script type="text/javascript">');?????
   document.write('alert(2);')?????
   document.write('alert("我是" + tmpStr);');?????
   document.write('<\/script>');?????
   //]]></script>???
   <script type="text/javascript">//<![CDATA[?????
   alert(3);????? //]]>
   </script>

   這樣IE下和其他瀏覽器輸出值的順序都是一直的了：1、2、我是1、3。

三、如何改變Javascript在頁(yè)面的執(zhí)行順序

1. 利用onload

   <script type="text/javascript">//<![CDATA[
   window.onload = f;
   function f(){
   ??? alert(1);
   }alert(2);
   //]]></script>

   輸出值順序是 2、1。

   需要注意的是，如果存在多個(gè)winodws.onload的話，只有最有一個(gè)生效，解決這個(gè)辦法是：

   window.onload = function(){f();f1();f2();.....}

   利用2級(jí)DOM事件類型

   if(document.addEventListener){
   window.addEventListener('load',f,false);
   window.addEventListener('load',f1,false);...
   }else{
   window.attachEvent('onload',f);
   window.attachEvent('onload',f1);...
   }

2. IE中可以利用deferdefer作用是把代碼加載下來(lái)，并不立即執(zhí)行，等文檔裝載完畢之后再執(zhí)行，有點(diǎn)類似onload，但是沒(méi)有onload那樣的局限性，可以重復(fù)使用，但是只在IE中有效，所以上面的例子可以修改成為

   <script type="text/javascript">//<![CDATA[
   document.write('<script type="text/javascript" src="test.js"><\/script>');
   document.write('<script type="text/javascript" defer="defer">');
   document.write('alert(2);')
   document.write('alert("我是" + tmpStr);');
   document.write('<\/script>');
   //]]></script>
   <script type="text/javascript">//<![CDATA[
   alert(3);
   //]]></script>

   這樣IE就不報(bào)錯(cuò)了，輸出值的順序變成：1、3、2、我是1

3. 利用Ajax。
   因?yàn)閤mlhttpRequest能判斷外部文檔加載的狀態(tài)，所以能夠改變代碼的加載順序。