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.onload=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()

你可能感兴趣的:(javascript)