给JS程序一个统一的入口

浏览数：141 / 时间：2015年06月09日

JS程序包含框架部分，和应用部分。

框架部分提供代码的组织作用，包括定义全局变量，定义命名空间方法等，和具体应用无关，每个页面都需要包含相同的框架，框架部分在每个页面都相同。

应用部分提供页面的逻辑功能。

1.要将应用部分的代码组织起来，给他们一个统一的入口。例如：将应用部分的代码放到函数init中

function init() { ...... }

2.需要在适当的时候调用这个入口函数，完成页面程序的初始化。

如果JS程序控制控制某个DOM节点，而改节点当时还没载入，程序就会报错。

因此，我们可以监听程序的onload事件，当程序触发onload事件后调用脚本。

<script type="text/javascript">
    window.onload=function() {
        alert(document.getElementById("test").innerHTML);
    }
　　//window.lonload = init;   
</script>

<div id="test">hello world</div>

还存在一个问题，window的onload时间要求网页内所有元素全部加载完毕后才会触发，如果网页里有很大的图片，加载时间就会边长，初始化函数就会延时很久才被执行。

为了解决这个问题，很多JS框架提供了DOMReady事件代替window.onload.DOMReady只判断DOM节点是否已经全部生成，至于节点内容是否加载完毕并不关心。

JQ的DOMReady

<script>
    alert(document.getElementById("test").innerHTML);
    $(document).ready(init);
</script>
<div id="test">hello world</div>

如果不使用JS框架，我们有一种简单的方法实现和DOMReady相似的功能

<script type="text/javascript">
    function init() {
        alert(document.getElementById("test").innerHtml);
    }

</script>
<body>
<div id="test">hello world</div>
...
<script type="text/javascript">
    init();
</script>
</body>

我们定义init函数，但并不急着立即调用它，我们可以在页面的最后，即</body>标签之前再调用init函数，此时页面内的DOM节点不一定都“加载完成了”，但一定都生成了，从而模拟DOMReady效果。

JS的框架部分代码清单如下

<script type="text/javascript">
    var GLOBAL={};
    GLOBAL.namespace=function(str) {
        var arr=str.split("."),o=GLOBAL;
        for (i=(arr[0]=="GLOBAL") ? 1 : 0; i<arr.length; i++) {
                o[arr[i]] = o[arr[i]] || {};
                o = o[arr[i]];
        }
    }
</script>

<script type="text/javascript">
    function init() {
        //应用部分代码
    }
</script>
...
<script type="text/javascript">
    init();
</script>