首页 > 代码库 > 给JS程序一个统一的入口
给JS程序一个统一的入口
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>
给JS程序一个统一的入口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。