程序员人生 网站导航

译文:JavaScript框架比较(一)

栏目:jscript时间:2013-12-07 15:03:01
摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互。特别是通过不刷新页面的异步请求来返回数据或从服务器端的脚本(或数据系统)中得到响应。在这篇文章中,你将会了解到javascript框架如何更快、更方便的创建互动性强、相应快得网站和web应用程序。

导言:JavaScript是一种面向对象的脚本语言,一直以来用作Web浏览器应用程序客户端脚本接口的选择。JavaScript允许Web开发人员编程与网页上的对象的工作,为凭空操作这些对象提供了一个平台。当JavaScript最初推出时,它通常用来提供一些微不足道的功能,如时钟、在浏览器状态栏中滚动文本。另外一个常用特色就是“rollover link”,即当用户的鼠标滑过对象时,其文本的颜色或背景图片发生改变。然而,近年来Ajax为网络编程带来了全新的互动,JavaScript几经发展变得更加有用。在Ajax之前,任何服务器端处理或数据库访问都需要整页面被“刷新”或由浏览器呈现新的页面。这不仅缓慢,令用户失望,而且也浪费了带宽和资源。

Ajax就是异步的JavaScript和XML,虽然引用XML不在有效,但是Ajax能对除了XMl的其它几种格式的数据作出响应,如JSON(JavaScript对象表示法)。 Ajax的工作原理是,以异步的方式提交一个 HTTP请求提交到web服务器,不刷新也不呈现整个页面,仅呈现响应的内容。相反,开发人员通常使用DOM(文档对象模型)操作修改网页的一部分,HTTP响应返回的数据将反映这些改变。

什么是JavaScript框架?

JavaScript本身是一种非常强大的语言,你不需要任何额外的框架就可以创建由它支持的富互联网应用系统(RIA)。但是,使用JavaScript并不是一件容易的事,主要是因为在试图提供多种浏览器支持时各种并发症的出现。和HTML和CSS一样,不同的浏览器的JavaScript执行方式不同,那么确保您的JavaScript代码跨浏览器兼容可以说是一个恶梦。

一个JavaScript框架或库实际上是一系列工具和函数,它能更容易产生跨浏览器兼容的JavaScript代码。每个库在许多流行的最新版本的Web浏览器经过了严格测试。因此,您完全可以相信,使用这些框架中的任何一个,您的基于JavaScript的RIA在不同的浏览器和平台中将大体一致。

除了浏览器兼容性问题外,JavaScript框架可以更容易地编写代码去获取、遍历及操纵DOM元素。它们不仅能提供一个快捷的函数来获取一个DOM元素的引用,而且还允许菊花式的DOM遍历函数链查找父母、子女或任何深度的兄弟节点元素。最后,框架提供了一系列的函数,使其更容易的操纵这些对象,允许其内容更改、添加、删除,或者操纵class的样式而影响元素的外观。

JavaScript框架的另一个重要特色就是能更好的支持事件处理。由于浏览器之间的不同实现,跨浏览器事件处理可以说是一个恶梦。因此,JavaScript框架通常将浏览器事件包装起来,并提供一系列有用的跨浏览器函数来处理它们。一些框架也提供了标准化的代表键盘键码系列的事件(如Esc键、Enter键、光标等等)。

所有这些功能是非常有用的,JavaScript框架已在其最近流行Ajax应用中起重要作用。和JavaScript其他方面一样,每个Web浏览器倾向于支持以不同的方式Ajax,使Ajax支持所有的浏览器将是很繁重的工作。几乎所有的JavaScript框架都包括一定形式的Ajax库,通常是提供Ajax请求和响应对象,在对响应作出评价后,更新DOM元素,轮询一个特定的请求。

一个JavaScript框架的典型特征

现在让我们看看大多数JavaScript框架都具有的一些功能。这些特色有:

选择器
DOM遍历
DOM操作
实用函数
事件处理
Ajax
为了更好的诠释这些特色,我将从下面一个或多个JavaScript框架中列举一个例子:Prototype, jQuery, YUI,ExtJS和 MooTools。虽然每个框架的执行情况和语法不同,但其概念大致相同。每个框架有一个详细的API参考,你可以参考它决定如何使用这些特定库的特色功能。

选择器

大多数JavaScript框架可实现某种形式的快速元素选择。一般来说,这些选择器使获取一个元素的引用更加快捷,并允许你通过ID、class、元素类型或一些伪类选择符来选取元素。

例如,使用通常的JavaScript,你可以使用下面的代码借助ID来取得DOM元素。

var theElement = document.getElementById('the_element');
与其他几个框架一样,MooTools提供了一个执行该操作的快捷方法。除了选择元素,MooTools通过自己一系列的功能函数扩展了元素。

var theElement = $('the_element');
$函数在几个流行的框架(并非全部)中可用,其语法大致相同。Prototype更深一层,通过ID在任何时候可以选择多个元素,返回的是一个元素数组。与

MooTools一样,这些元素利用Prototype的实用函数扩展。利用Prototype库在任何时候选择多个元素的语法是这样的:

var elementArray = $('element_one', 'element_two', 'element_three');
在实用函数这一部分,你将了解到JavaScript框架提供的一些函数迭代我们的集合更加容易。

在前面的例子,你必须提供你欲选择元素的ID。但是,你要选择多个元素该怎么办?所有image、拥有特定className的表格的每一行。MooTools(其它的几个库)提供了一个非常简单的方法来做到这一点--$$函数。除了元素的ID外,他还可以接受以下参数:元素的名字、类名以及伪类选择器,其工作原理与$函数相似。例如,使用MooTools获取页面上所有的图片,你可以使用下面的代码:

var allImages = $$('img');
这将得到文档中所有imag的数组,每一个通过$函数和其实用函数进行扩展。

通过tag标签来选取对象是非常有用的,但如果你只想基于元素的class选取它的部分子集,遮盖怎么办?同样很简单。在下面的例子中,MooTools将选择table中class为“odd”的行,这在对每行进行操作时很有用(交替变换表格每一行的颜色)。

pre class=”brush:javascript”>
var allOddRows = $$(‘tr.odd’);

事实上,MooTools提供了一个更好的方法执行行操作。在前面的例子中,假定table的奇数行授予了类名“odd”。那么下面的代码不需要在table的每一行上定义任何类名。

var allOddRows = $$('tbody <IMG class=wp-smiley alt=:o src="http://www.denisdeng.com/wp-includes/images/smilies/icon_surprised.gif"> dd');
这是一个伪类选择器的例子,它返回匹配规范的任何对象。在这个例子中,结果为页面中tbody元素中所有奇数行的子元素。MooTools其它伪类元素的例子包括:

checked 所有被选中的元素(例如:选中的复选框);
enabled 所有可用的元素;
contains 所有包含文本(作为参数传递给选择器)的元素
如前所述,并非所有的JavaScript框架都使用$函数来选取DOM元素。在YUI(Yahoo用户界面)的第三个版本中,下面的代码是通过ID来选取元素的(注意:YUI3需要在ID前加上字符#)。

var theElement = Y.one('#the_element');
同样,通过tag或class来选取元素也不是使用$$函数,在YUI中你要使用Y.all来代替。

var allOddRows = Y.all('tr.odd');
ExtJS以同样的方式工作,通过ID选择元素用下面的语法:

var theElement = Ext.get('the_element') ;
而通过tag和class来获取元素则用下面的语法:

var allOddRows = Ext.select('tr.odd');
在下一章中,你将了解到如何使用JavaScript框架来轻松遍历DOM对象,换句话说,找到与选定元素有父子和兄弟关系的元素。

转载地址:http://www.denisdeng.com/?p=699

原文地址:http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐