js調用其他js文件的函數,以及js加載過程

我們在編寫js時,通常會需要在一個js文件中調用另一個js文件的函數,那麼如何調用呢?
例如我有一個a.js文件,裏面有個功能函數a,我在b.js文件中需要調用這個功能函數,寫法如下(函數開頭彈窗是驗證js加載順序)

/*a.js文件*/
alert("function a");
定義一個功能函數a
function a(s){
 alert(s);
}
/*b.js文件*/
假設這裏需要用到a函數
alert("function b");
function b(){
  var s="hello word"
 // 調用a函數  
  a(s);
}
window.οnlοad=function(){
    alert("window onload");
    b();

}

//最後只需在html文件引入兩個js文件即可
.......
<body>

  <script src="scripts/b.js"></script>
  <script src="scripts/a.js"></script>
</body>

/*引入順序可以調換,因爲window.onload是在文檔加載完畢的時候觸發
可以看出window.onload事件是指文檔結構包括js都加載完畢纔會觸發的函數
兩個js文件都已經被加載了*/

上面代碼的執行順序爲:
html加載到時加載b.js文件,並運行裏面的立即執行函數如(alert(‘function b’)) -> 加載a.js文件,並運行裏面的立即執行函數-> 文檔全部加載完畢 -> 觸發window.onload,執行b()函數
執行順序結果圖如下:
先加載b.js

在加載a.js

文檔加載完畢後觸發window.onload

最後執行函數b()

發佈了42 篇原創文章 · 獲贊 26 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章