驗證a 、b兩點疑惑:
a.<script src="./main.js"></script>中的window.onload是在html全部加載完了才執行,還是其在html中所處位置之前的加載完就執行?
b. <script src="./main.js"></script>中window.onload有和沒有 的區別是什么?
結論:
a.
answer:在html全部加載完了才執行。
b.
answer:區別就是,window.onload是html頁面的所有文檔都加載完畢后,執行window.onload里的內容。因而加了window.onload的main.js不論在html的哪個位置引入,均不會出現html元素找不到的錯誤 。 沒有window.onload的js文件,需要在其所關聯html的那部分代碼后面引入,方可,否則,會出現html元素找不到的錯誤 。
以下為驗證全過程:
代碼結構預覽
main.js :
window.onload=function(){ var app=new Vue({ el:"#app-4", data:{ todos:[{ text:"first one" },{ text:"second one" },{ text:"third one" }] } }) alert("app did!") }
index.html :
<html> <head> <title>xx</title> <script src="./vue.js"></script> <script src="./main.js"></script> <a href="./vue.js"></a> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> </body> </html>
執行過程(按chrome中真實的執行順序羅列)
1.
2.
說明:是先走到main.js里的window.onload,之后再顯示出html的其余部分。
========================================================================================================
//現在將html的<script src="./main.js"></script>代碼位置稍作調整,為謹慎起見,增加一行<div>html中Dom的加載。。。</div>
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <a href="./vue.js"></a> </head> <body> <div>html中Dom的加載。。。</div> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script src="./main.js"></script> </body> </html>
1.
2.
說明:有window.onload的main.js在哪里引入都一樣。【注意:均不會出現html元素找不到的錯誤】
=========================================================================
以上說述,是main.js中有window.onload時。
=========================================================================
// 現在,將window.onload去掉!!!
=========================================================================
以下所述,是main.js中沒有window.onload時。
=========================================================================
main.js :
// window.onload=function(){ var app=new Vue({ el:"#app-4", data:{ todos:[{ text:"first one" },{ text:"second one" },{ text:"third one" }] } }) alert("app did!") // }
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <script src="./main.js"></script> <a href="./vue.js"></a> </head> <body> <div>html中Dom的加載。。。</div> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> </body> </html>
1.
2.
說明:先加載的main.js中的內容,此時html並沒有加載完(后面需要顯示的內容還沒有加載)【注意:此時,出現html元素找不到的錯誤(2.圖)】
=============================================================
//將index.html中的<script src="./main.js"></script>代碼位置稍作調整
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <a href="./vue.js"></a> </head> <body> <div>html中Dom的加載。。。</div> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script src="./main.js"></script> </body> </html>
1.
2.
說明:html加載完(后面需要顯示的內容還沒有加載),之后加載main.js中的內容【此時,與有window.onload時的場景下,呈現順序一致】