小经验： html中 js脚本运行顺序：思路整理

　　之前对html中的js脚本的运行顺序一直没有认真的去理清思路，只是把几个用到的脚本文件随便放在头部，后面的文本中调用。

　　但是没有了解其运行顺序，在写代码是有时候会造成混乱。

　　今天抽了点时间测试了一下。

　　一、当有外联js时：

         1、外联js出现在<head>标签中的时候，这时候的脚本是最早运行的，同时也是按照文档顺序自上而下运行的。

　　　2、外联js出现在<body>标签中的时候，这时候脚本也是按照文档顺序运行的，与内嵌<body>的js脚本一样，执行到该语句就运行。

　　二、当<head>标签中有js脚本段落时，如果没有在$(function(){ }); 中的话：它会立即执行。如果是在$(function(){ }); 里面， 但它将在文档加载完毕后执行的。

　　三、<body>标签的js脚本段运行的顺序是： 当执行到该语句就运行。

　　四、可能的话，js脚本的具体执行语句一般放在<body>最后面中,这样可以确定js脚本是在所有页面元素加载完后才执行的。


PS: 对于一些公用函数的外联脚本，尽可能的放在<head>标签前部。 在一个js文件中，函数的调用可以不考虑它定义的顺序。但在多个js文件中，不同

　　文件中的函数的相互调用就要考虑这些函数的定义顺序了，不然会出现undefined错误。

　　2、可以概括的讲，在没有用 $(function(){}); 包住的js脚本将会按照document文档的顺序执行，并且对于其函数的调用没有顺序要求，只要定义了就可以调用。 而被$(function(){}); 包住的js脚本，则是在文档加载完毕后在按照document文档顺序执行，其优先级将会低于外部。

 

见例子：

 

<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>

 

 

 

posted @ 2012-08-17 10:34  oaijuru  阅读(1888)  评论(1)  编辑  收藏  举报