第三个问题是，我们刚才对于一个元素，是在它下面定义了一块script区，当页面有多个元素需要这样的功能模块时，我们怎么做到批量的添加Ajax事件呢，难道还是要在每一个元素后写一段script区域代码？答案是否定的。我们应该把类似的script代码统一集中在一个地方，这样维护起来也方便，所以修改如下：

Test.js文件内容修改

(function PageInit() {

if (navigator.userAgent.indexOf("MSIE") ＞ 0) {

document.attachEvent('onload', function() {

PageRegistedEvent();

}) www~phperz~com

} else {

document.addEventListener('onload', function() {

PageRegistedEvent();

})

}

function PageRegistedEvent() {

if (navigator.userAgent.indexOf("MSIE") ＞ 0) {

document.getElementById('comId').attachEvent('onblur', function() {

// IE下的事件代码

});

} else {

document.getElementById('comId').addEventListener('onblur',

function() {

// FF下的事件代码

})

}

}

})();

代码中定义了一个全局静态类PageInit()，该方法会在head加载Test.js时被执行，该方法注册了一个onload事件，当页面加载完毕后，会执行一个PageRegistedEventFor对应浏览器版本的方法，该方法里面定义了页面中所有元素的注册监听事件。

好了，到目前位置，我们已经把原本位于test.html文件中的所有Js脚本都被移到了test.js，在test.html中只在head里保留了对于test.js的引用，他们之间的联系建立在test.html的dom每个元素的唯一标记。相对于原本紧耦合的代码来说，这样的代码分离后，我们可以把test.js当作test.html的功能模块，可拆卸的，可复用的（基于页面的唯一标示符一直的理想情况下），易于维护和代码重构的（所有的逻辑代码都统一放在了test.js里面），从实现角度来说，看起来有点类似.net的code behind，只是这次分离的是表现层，把表现层分离为标准页面层和页面逻辑层。当然，仅仅是这样还是不够的，下面我们会从Javascirpt代码的角度来谈谈，对于表现层的页面逻辑层如何抽象和封装。