论文导读：由此可以看出，在实现某些功能的时候，开发人员为了兼顾多个浏览器，必须要投入成倍的工作量。JavaScript框架实际上是一系列工具和函数，它能更容易产生跨浏览器兼容的JavaScript代码。除了浏览器兼容性问题外，JavaScript框架可以更容易地编写代码去获取、遍历及操纵DOM元素。JQUERY是一个快速的，简洁的JAVASCRIPT库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
关键词：浏览器，兼容性，JAVASCRIPT，框架
0.引言
随着Internet和WWW的流行，以往的主机/终端和C/S都无法满足当前的全球网络开放、互连、信息随处可见和信息共享的新要求，于是就出现了B/S型模式，即浏览器／服务器结构。近年来，.net和JAVA等一些WEB应用程序编程工具的发展，使B/S模式在保留自身诸如开发、维护及布署简单等优点之外，还在事务处理能力等方面做出了极大的提升，而这些特性以往只能在C/S模式中才能见到。因此越来越多的公司和个人在进行业务系统开发的时候更愿意选择B/S模式。各种各具特色的浏览器应运而生。这些浏览器给广大WEB应用程序的使用者提供了更多的选择。但是，于开发者而言，由于目前各个浏览器对WEB标准的支持程度不同，在开发过程中，要使程序能显示出相同的或者预期的效果是一件并不容易的事情。例如，为改善用户体验，在web2.0中提出异步通信的概念，在具体实现的时候是使用xmlHttp对象。然而，在不同的浏览器中该对象建立的方式也不一样。如果要兼容目前主流的浏览器的话。基本代码如下：
var xmlHttp;
try
{// Firefox, Opera8.0+, Safari
xmlHttp=newXMLHttpRequest();
}
catch (e)
{ // InternetExplorer
try
{
xmlHttp=newActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
xmlHttp=newActiveXObject('Microsoft.XMLHTTP');
}
catch(e)
{
alert('该浏览器不支持AJAX！');
}
}
}
由此可以看出，在实现某些功能的时候，开发人员为了兼顾多个浏览器，必须要投入成倍的工作量。
1.什么是JavaScript框架
JavaScript框架实际上是一系列工具和函数，它能更容易产生跨浏览器兼容的JavaScript代码。每个框架在许多流行的Web浏览器上经过了严格测试。除了浏览器兼容性问题外，JavaScript框架可以更容易地编写代码去获取、遍历及操纵DOM元素。JavaScript框架的另一个重要特色就是能更好的支持事件处理。
几种框架的对比：
1.1Dojo
是一个用 JavaScript 编写的开源的DHTML工具箱。Dojo 很想做一个“大一统”的工具箱的。Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API，包括了 JS 本身的语言扩展，以及各个方面的工具类库，和比较完善的 UI 组件库。Dojo 现在比较新的版本是1.4。Dojo 强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。
优点：库相当完善，发展时间也比较长，功能强大，得到 IBM和SUN 的支持。
缺点：文件体积比较大，200多KB，初次下载相当慢，此外，Dojo 的类库使用显得不是那么易用，JS语法增强方面不如 Prototype。
1.2 Prototype
定义了 JS 的面向对象扩展，DOM 操作API，事件等等，以 Prototype为核心，形成了一个外围的各种各样的 JS 扩展库，是现实中应用最广的库类。目前最新的版本为1.6。
优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积较小。
缺点：如果说缺点，所提供的功能相对来说比较少。
1.3 JQUERY
其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+,FF 1.5+, Safari 2.0+, Opera 9.0+）。JQUERY是一个快速的，简洁的JAVASCRIPT库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。目前最新的版本为1.4.2 。
优点：体积小，提供了强大的选择器，封装了大量常用DOM操作，完善的AJAX功能，超强的浏览器兼容性问题，支持链式操作，有丰富的插件及文档。
缺点：缺乏对面向对象的支持。
各种框架有着各自的优缺点。JQUERY简洁，高效，兼容性强，所以我们决定以为它为基础来讨论。免费论文网。
2. JQUERY在兼容性方面带来的好处
脚本在浏览器兼容方面的问题比较多。根据其问题的现象进行分类。对不同类型的问题，JQUERY的解决办法不同。具体如下：
1）文档对象模型及浏览器模型中，提供了很多对象，但这些对象在不同的浏览器中获取方式或者声明方式是不一样的。实际上在本文引言中所提到的问题就是此类问题的一个典型代表。从引言中的代码，我们可以看到xmlhttp对象在不同的浏览器中的建立方式是不相同的。传统的JAVASCRIPT的做法是通过一定手段，检测出当前所使用的浏览器的种类或者版本。然后根据浏览器的要求，建立该对象。
然而，在JQUERY中提供了很多种AJAX的使用方法。比较完整的一种写法如下：
$.ajax({
url:'',
type:'get',
cache: false,
data:' ',
success:function(msg){}
})
这行代码实现了xmlhttp对象的建立，参数的传递，状态的检测，以及请求成功后的事件处理。免费论文网。开发人员就可以比较方便的使用AJAX而不用考虑用户具体使用的是什么浏览器，因为JQUERY已经将这些差异考虑进去，并封装成一个方法。
2）HTML对象有着各自的属性。这些属性虽然能够存在于不同的浏览器，但因为各浏览器对这些属性的解释不同所以得出的结果也会有所差异。
比如offsetLeft属性可以返回当前元素距父元素或body元素的左侧距离．
该属性值在对HTML元素进行定位的时候非常有用，但在不同的浏览器中取值不一样给开发人员带来很大的困扰。因为offsetLeft是相对于offsetParent属性来定位的．这取决于浏览器对offsetParent属性的支持．经过测试在IE和Opera浏览器里offsetParent属性会返回当前元素的直接父元素，而在FireFox浏览器里则返回body元素。同样类型的还有offsetTop等属性。
这种问题要直接通过JAVASCRIPT来解决，是比较麻烦的。在JQUERY中，对这类属性做了专门处理。就上文提到的属性，JQUERY根据不同浏览器的解释，将其获取写成了方法。offset（）就是用于获取这两个属性的方法。这个方法在所支持的浏览器中统一了对offset等的相关属性的解释。那么如果要获取offsetLeft的值，则直接使用offset().left就行了。
3）在文档对象选择时，存在比较多的问题。例如在IE下面，可以直接通过对象的ID属性来获取该对象，在FireFox下面则不行。这个问题只能要求开发人员在代码编写的时候使用getElementById('idName')方法来获取对象。还有集合类对象问题，现有代码中许多集合类对象取用时使用闭合的圆括号()，IE 能接受，FireFox不能接受。
然而在现在网页编写时，用JAVASCRIPT对文档对象的操作非常频繁。JQUERYr 的选择器非常灵活好用。例如，要用对象的ID选择，使用$(“#IDNAME”);要使用样式来选择，则为$(“.CLASSNAME”)。实际上，在这个框架中，可以用于文档对象选择的方式非常多，也非常灵活。除了上面提到的可以通过ID或者样式名等一些控件的属性外，还可以使用对象所包含的文字，对象的层级关系等等。在对集合类对象的操作中，除保留（）对每个元素的使用之外，还引入each()方法对符合匹配条件的元素进行遍历，而且因其优秀的编写方法，遍历的效率非常高。
4）在对元素绑定特定事件时，兼容性最好的做法就是在元素的标识中添加相应事件的属性。免费论文网。但是如果要通过JAVASCRIPT代码对事件进行绑定则是一个非常大的挑战。在IE中使用document.attachEvent()方法，在FireFox，Safari等浏览器中则使用document.addEventListener()。Opera 则两种都支持。
而通过JQUERY，我们只需要利用方法bind()就可以对满足条件的元素进行相应事件的绑定。
3.总结
从上述文字我们可以看到，JAVASCRIPT框架的引入，不仅可以极大程度的简化编程，减少程序员的工作量，更重要的是，对市面上各色浏览器所带来的大部分兼容性问题能极大程度上包容。虽然目前在某些兼容性问题上面还是未能完全解决，但是相信在以后的版本中，这些问题会逐一得到解决，真正实现让开发人员专注于代码编写，减少其它方面带来的影响。
【参考文献】
[1] jQuery 官方网站, http://www.jquery.com.
[2] 使用jQuery 简化Ajax 开发,http://www.ibm.com/developerworks/cn/xml/x- ajaxjquery.html.
[3] Getting Startedwith jQuery, http://jquery.bassistance.de/jquerygetting-started.html.
[4] jQuery 中文API,http://www.visualjquery.com/index.xml.
[5] Dino Esposito,罗小平小议JavaScript库——Dojo、jQuery和PrototypeJS的比较 程序员2008-08
[6]Javascript的IE和Firefox兼容性汇编http://dev.csdn.net/article/74/74639.shtm
|
