Web前端开发-给程序一个统一入口--window.onload和DOMReady

       JavaScript是一种脚本语言，浏览器下载到哪就会执行到哪，这种特性会为编程带来方便，但也容易让程序过于零散，为此我们从功能上将程序进行职能划分，我们把划分出来的应用部分组织起来，给他们一个统一的‘入口’，方便修改、添加功能的时候直接找到他。

<div>
    xxxxx
</div>
<script type='text/JavaScript'>
    xxxxx
</script>
<script type='text/JavaScript'>
function init(){
//功能A
(function (){})()
//功能B
(function (){})()
//功能C
(function (){})()
}
</script>
<div>
    xxxxx
</div>

      

       接下来就可以调用入口函数，完成页面的初始化。如果程序控制某个DOM节点，但是这个节点还没有被载入，程序就会报错，如下代码。

<script type='text/JavaScript'>
alert(document.getElementById('test').innerHTML);
</script>
<div id='test'>hello world</div>

     

      为了解决这个问题，我们可以把脚本移到后面，但是我们希望程序能够无视其位置，无视是否在相应的DOM节点之后。我么可以监听window的onload事件，当window触发onload事件后调用脚本。

<script type='text/JavaScript'>
function init(){
    alert(document.getElementById('test').innerHTML);
}
window.onload=init;
</script>
<div id='test'>hello world</div>

 

       在网页制作过程中，window的onload事件要求网页所有元素加载后才会触发，这样会给网页带来巨大的延迟，这是使用者所不能接受的。为了解决这个问题，很多Js框架提供了DOMReady事件代替window.onload事件,DOMReady只判断页面内所有的DOM节点是否完全生成，所以比window.onload更快。如果不使用任何Js框架，也可以模DOMReady事件，但是由于触发原理不同、不同浏览器原理还不同，我们可以绕开DOMReady事件以一种简单方式达到功能。

<script type='text/JavaScript'>
function init(){
    alert(document.getElementById('test').innerHTML);
}
</script>
<div id='test'>hello world</div>
.........
<script type='text/JavaScript'>
init();
</script>
</boday>

 

       实际工作中，网站的头部和尾部通常会做成单独文件，用服务器端语言include到网页中，一般来说，头尾文件比较稳定，全站统一，不会经常改动，但是主体部分文件各不相同，可能由多个工程师完成，其中有的页面可能不需要用Js写应用，主体部分不需要init函数，但是JS框架会在</body>前调用init函数，此时会报错，一个简单的处理方式便是在调用init函数前判断页面内是否已经定义了init函数，定义了才去执行。

<div class='foot'>
    ....
</div>
<script type='text/JavaScript'>
    if(init){
        init();
}
</script>