我們知道javaScript是一種解釋型語(yǔ)言，他的執(zhí)行是自上而下，但是各個(gè)瀏覽器對(duì)于至上而下的理解是有細(xì)微差別的，而代碼的上下游也就是程序流又對(duì)于程序正確至關(guān)重要，所以我覺(jué)得有必要深入理解多個(gè)js塊兒的執(zhí)行順序。
首先得知道有多少方法能把javaScript加入到頁(yè)面中呢？常見(jiàn)下述的前2種，其實(shí)還有更多。
1.頁(yè)面中直接引入外部js文件：<script src="my.js"></script>
2.頁(yè)面中直接寫(xiě)如js片段<script>alert(1)</script>
3.在js中引入js文件document.write("<scr"+"ipt src='my.js'></scr"+"ipt>");
注意:這時(shí)候"..</script>"必須拆成"</scr"+"ipt>",否則瀏覽器可能會(huì)把父js片段關(guān)閉掉,出錯(cuò);
4.同樣在js中引用其他js片段，document.write("<scr"+"ipt>alert(1)</scr"+"ipt>");
你可能覺(jué)得這個(gè)并沒(méi)有必要，既然已經(jīng)在script中了還套一層干嘛？呵呵，怎么說(shuō)也是一種寫(xiě)法，而且它具有其特殊的行為，稍后我們討論到。
5.使用Ajax中的xmlHttpRequest結(jié)合eval()來(lái)引入js，我最早在Dojo的代碼見(jiàn)到，寫(xiě)的詳細(xì)些：
var ajaxRequest = getXmlHttpRequest()//省去各個(gè)瀏覽器得到xmlHttpRequest的部門(mén)
ajaxRequest.open("GET","my.js",false);//使用xmlHttpRequest對(duì)象Get方法的同步調(diào)用
ajaxRequest.send(null);
sJsFragment = ajax.responseText;//得到字符串為js片段
eval(sJsFragment);//執(zhí)行js片段
注意:這里要求my.js即后來(lái)的sJsFragment內(nèi)容得是非常規(guī)范的js，切沒(méi)有//開(kāi)頭的注釋，怎樣檢查js是否規(guī)范呢？去http://jslint.com/
6.無(wú)所不能的Dom方法，這個(gè)我最早在Yahoo的前端代碼中見(jiàn)到，非常厲害，也寫(xiě)的詳細(xì)些：
var oScript = document.createElement("script");//創(chuàng)建一個(gè)Script元素
oScript.src = "my.js";//制定src屬性
document.getElementsByTagName("head")[0].appendChild(oScript);
說(shuō)明：my.js的內(nèi)容會(huì)在oScript加入到文檔中之后獲得并執(zhí)行。仔細(xì)看下這段容易發(fā)現(xiàn)這個(gè)調(diào)用是異步的，可以在文檔載入之后通過(guò)事件觸發(fā)，我用它變通了一下，作為了xmlHttpRequest的Get方法在跨域取數(shù)時(shí)的替代，獲得了很完美的效果，以后有機(jī)會(huì)專門(mén)寫(xiě)篇文。
六種不少吧，可能還會(huì)有吧，而且這幾種之間還可能相互嵌套，變化無(wú)常。
其中1、2、4、6種方式引入的javaScript的執(zhí)行順序是非常自然的，隨著頁(yè)面的載入以及后續(xù)的事件觸發(fā)，它們遵守先來(lái)后到、而其內(nèi)部自上而下。
我們主要關(guān)注的是第3、4種引入js方法帶來(lái)的問(wèn)題（轉(zhuǎn)帖請(qǐng)注明出處：http://blog.csdn.net/lenel）

最新評(píng)論