之前对html中的js脚本的运行顺序一直没有认真的去理清思路,只是把几个用到的脚本文件随便放在头部,后面的文本中调用。
但是没有了解其运行顺序,在写代码是有时候会造成混乱。
今天抽了点时间测试了一下。
一、当有外联js时:
外联js出现在<head>标签中的时候,这时候的脚本是最早运行的,同时也是按照文档顺序自上而下运行的。
2、外联js出现在<body>标签中的时候,这时候脚本也是按照文档顺序运行的,与内嵌<body>的js脚本一样,执行到该语句就运行。
二、当<head>标签中有js脚本段落时,如果没有在$(function(){ }); 中的话:它会立即执行。如果是在$(function(){ }); 里面, 但它将在文档加载完毕后执行的。
三、<body>标签的js脚本段运行的顺序是: 当执行到该语句就运行。
四、可能的话,js脚本的具体执行语句一般放在<body>最后面中,这样可以确定js脚本是在所有页面元素加载完后才执行的。
PS: 对于一些公用函数的外联脚本,尽可能的放在<head>标签前部。 在一个js文件中,函数的调用可以不考虑它定义的顺序。但在多个js文件中,不同
文件中的函数的相互调用就要考虑这些函数的定义顺序了,不然会出现undefined错误。
$(function(){});
见例子:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script> // 最先加载
<script type="text/javascript" src="js/first.js"></script>
<script type="text/javascript" src="js/second.js"></script>
<script type="text/javascript">
var app = {}; // 紧跟着外联js运行
$(function(){ // 将会在document文件加载完毕后运行,一般卸载这个js片段的尾部
function a1(){
}
b(); // 调用文档底部的b()函数成功
});
var dpp = {}; // 紧跟app执行
a1(); // 调用失败,a1()函数 未定义
b(); // 调用失败,b() 函数为定义,因为不是出在同意js代码段,b()函数在这里还没有定义。
a2(); // 调用成功,同一个js代码段的函数无先后顺序
function a2(){
}
</script>
</head>
<body>
<script type="text/javascript" src="js/body.js"></script> // 程序执行到这里将会加载外联js
<script type="text/javascript">
a1(); // 将会调用失败,函数未定义
a2(); // 能调用成功,函数已经在前面的js片段中定义了
b(); // 成功调用本js代码片段的函数
function b(){
}
$(function(){ // 这里面的代码将在前面的$(function(){}) 执行后在执行
// 代码
})
</script>
</body>
</html>