大家都知道，没有人喜欢步行，给你个轮子，你去一个目的地的速度会大大提升。编程也是一样，给你个可复用的类，比自己一遍又一遍写一拖代码要省事的多。我们在写Java代码的时候知道要分模块，当然写Javascript也一样，我们天天写Java代码都知道，当所有的代码都耦合在一起的时候，无论是开发还是维护都无比烦躁，特别是我们做的后台系统的维护工作，很多时候，对于新功能的引进最好是无侵入式的，对于原有代码（无BUG的那种）改动越小越好，就像盖楼一样，你接着别人盖好的继续往上盖可以，但是你要把别人的转头上打个洞，硬塞一些新的东西，这个楼房不倒才怪^_^。带着这样的疑问，我们开始第二章的讲解，表现层的分层技巧。
Ok，还是来看上面的例子，
Test.htm
＜script type="text/javascript" src="test.js"＞＜/script＞
＜input type=”text” id=”comId” value=”请输入公司ID” _disibledevent=function(){}那么就会把原来的onblur事件给盖掉，当然这个是我们不希望看到的，我们希望的结果是给该元素添加另外一个出发事件，同时不影响当前的事件。解决方法是:
if (navigator.userAgent.indexOf("MSIE") ＞ 0) {
document.getElementById('comId').attachEvent('onblur', function() {
// IE下的事件代码
});
} else {
document.getElementById('comId').addEventListener('onblur', function() {
// FF下的事件代码
})
}
代码里面考虑了IE和FF下的为元素添加监听事件方法的不同，所以有个浏览器的判断，然后分别调用IE或者FF的特有方法，给元素注册了一个新的监听事件，这个事件与原有事件，是没有冲突的，可以认为是并行存在且运行的。同时，你还会发现，原本是硬编码实现的onblur事件，而现在onblur是一个字符串作为参数传递到方法中，而我们刚才是说元素和事件做了分离，现在对于事件来说，事件的触发条件，事件的执行内容，也有了一层分离，可以单独做为参数来传递，进一步降低了代码的耦合度，在后面的Js操作DOM的高级技巧中，我们会进一步做阐述。
第三个问题是，我们刚才对于一个元素，是在它下面定义了一块script区，当页面有多个元素需要这样的功能模块时，我们怎么做到批量的添加Ajax事件呢，难道还是要在每一个元素后写一段script区域代码？答案是否定的。我们应该把类似的script代码统一集中在一个地方，这样维护起来也方便，所以修改如下：
Test.js文件内容修改
(function PageInit() {
if (navigator.userAgent.indexOf("MSIE") ＞ 0) {
document.attachEvent('onload', function() {
PageRegistedEvent();
})
} 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代码的角度来谈谈，对于表现层的页面逻辑层如何抽象和封装。
最新评论