有效组织页面中的Javascript脚本

有效地组织页面中复杂的JavaScript脚本

 

当我们用 JavaScript 编写较复杂的页面功能时，常常会出现脚本编写混乱，不堪入目，调试时也很难找到问题所在。为此，我想出一个有效组织脚本的结构（自己还没试过，呵呵），目标是减少代码的复杂性，并有效地组织脚本，提高脚本代码的可读性，同时在另一方面也能提高脚本的开发效率。

　　下面我对这个脚本体系结构作些简要的介绍：

　　先来一张结构图（乍一看是不是有点像MVC，呵呵）：

控制层 用于整个页面脚本体系的组织和关联，负责页面事件的检测及捕获，并对事件调用执行层相应的执行脚本。检测一般采用window.setTimeout()或window.setInterval()实现。比如检测页面中name为textName的文本框是否为空，可以这么实现：
<input type="text" name="textName"> <script language="javascript"> <!-- function checkIt() { if (document.all("textName").value == "") window.setTimeout("checkIt()", 500); else alert("Check!"); } checkIt(); //--> </script>
　　当调用checkIt()检测到textName不为空这个事件时，则弹出对话框提示"Check!"。这里还没关联到执行层，下面来看看执行层。

执行层 以.js的文件格式（JavaScript脚本文件）存放，每个.js文件代表了一系列动作。当控制层检测到某个事件时，就调用相应的.js文件以响应事件。因此上例代码可改为：
<input type="text" name="textName"> <script language="javascript" src="" id="activeScript"></script> <script language="javascript"> <!-- function checkIt() { if (document.all("textName").value == "") window.setTimeout("checkIt()", 500); else document.all("activeScript").src="alertIt.js"; } checkIt(); //--> </script>
　　其中alertIt.js就属于执行层，其内容如下： <!-- alert("Change!"); //-->
　　当checkIt()检测到textName不为空这个事件时，则调用alertIt.js脚本，弹出对话框提示"Check!"。执行效果应该与上例一样。

页面层 页面控件是页面层的主要内容，如<input>框，<div>区域等等。我们利用控制层检测页面层某个控件的状态，当它的状态发生变化时，则控制层立即对该事件进行处理，调用该事件在执行层相应的脚本文件，最终作用在页面层上。
　　利用这个结构，可以很容易地控制页面功能的流程，通过调用动态脚本文件，还可以对服务器端和数据库进行读操作；如果能结合IFRAME，并利用表单，还可以进行写操作。

（以上实例在IE6.0及Opera7.5下测试通过，很可惜，在Mozilla/FireFox里不能通过。）

转载于:https://www.cnblogs.com/dyson/archive/2007/04/25/726773.html