摘要：现代网站和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”的行，这在对每行进行操作时很有用（交替变换表格每一行的颜色）。
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对象，换句话说，找到与选定元素有父子和兄弟关系的元素。
DOM遍历
基于ID、元素类型、类名查找元素非常有用，但是如果你想基于它在DOM树中的位置来查找元素该怎么办？换句话说，你有一个给定的元素，你想查找它的父元素、子元素中的一个、它的上一个或下一个节点兄弟节点。例如，采用下面这段零碎的HTML代码：
清单1：HTML碎片（一个table）
<table>
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="row-001">
<td>Joe Lennon</td>
<td>joe@joelennon.ie</td>
<td><a href="#">Edit</a>
<a href="#">Delete</a></td>
</tr>
<tr id="row-002">
<td>Jill Mac Sweeney</td>
<td>jill@example.com</td>
<td><a href="#">Edit</a>
<a href="#">Delete</a></td>
</tr>
</tbody>
</table>
清单1使用缩进来说明其中每个元素节点在DOM树中的位置。在这个实例中，table元素是根元素，有两个子节点thead和tbody。thead元素有一个tr子节点，tr有三个孩子－－所有的th元素。tbody元素有两个tr子节点，每个tr节点有三个孩子。在上述每一行的第三个节点中进一步包含子节点，都是两个链接标记。
正如你知道的那样，你可以使用一个JavaScript框架的选择函数通过ID很轻松的选择一个元素。在这个实例中，有两个元素拥有ID，它们是ID分别为row-001和row-002的tr元素。使用Prototype库选择第一个tr，可以使用下面的代码：
var theRow = $('row-001');
在上一章，你还了解到，基于元素的类型或class使用选择器来获取元素。在这个实例中，你可以使用下面的语法来得到所有的td元素。
var allCells = $$('td');
改代码的主要问题在于它返回了每一个td 元素。但是，如果你只想得到ID为row-001的tr的所有td元素该怎么办？这正是DOM遍历函数发挥作用的地方。首先，让我们使用原型来选择ID为row-001的tr的所有的子级。
var firstRowCells = theRow.childElements();
这将返回theRow变量（你最初设置的ID为row-001的tr）所有子元素的数组。
接下来，我们假设你只想得到该行的第一个子元素。在本例中，即包含“Joe Lennon”文本的td元素。要做到这一点，使用下面的语句：
var firstRowFirstCell = theRow.down();
真简单！这个特定的使用方法等价于：
var firstRowFirstCell = theRow.childElements()[0];
也可以这样表示：
var firstRowFirstCell = theRow.down(0);
JavaScript的索引从零开始，所以上面的语句主要告知JavaScript来选择第一个子元素。要选择第二个子元素（单元格包含电子邮件地址joe@joelennon.ie），你可以这样用：
var firstRowSecondCell = theRow.down(1);
或者，你可以在兄弟节点之间浏览DOM。本例中，第二个单元格是第一个单元格的下一个兄弟节点。因此，你可以使用下面的语句：
var firstRowSecondCell = firstRowFirstCell.next();
与down()函数工作一样，选择第三个单元格可以这样使用。
var firstRowThirdCell = firstRowFirstCell.next(1);
除了使用索引来查找特定节点外，Prototype库还可以使用CSS选择器语法。在清单1中，我们要找到第二个包含 Jill Mac Sweeney’ 详细信息的链接（“删除”链接）。
var secondRowSecondLink = $('row-002').down('a', 1);
在本例中，使用$函数来查找ID为row-002的那一行，向下遍历到第二个后代a元素（锚点）。
一些框架还允许“菊花链式”的遍历功能，这意味着你可以彼此连接遍历命令。上面的例子中，Prototype库的另一种表达方式是这样的：
var secondRowSecondLink = $('row-002').down('a').next();
看看下面的例子：
var domTraversal = $('row-001').down().up().next().previous();
正如你所见，菊花链允许你连接多个DOM遍历语句。事实上，上述例子实际上最终选择ID为row-001的tr元素，所以菊花链又回到了开始的地方。
DOM操作
在此之前，你已经看到JavaScript框架使用选择器和DOM遍历可以很容易的获得特定的元素。但是，为了改变网页上特定元素的内容和外观，你需要操作DOM并应用改变。使用纯粹的JavaScript将是一件繁重的工作，但幸运的是，大多数JavaScript框架提供有用的函数，可以很容易地做到这些。
假设你有一个ID为the-box的盒子。
<div id="the-box">Message goes here</div>
使用jQuery将其文本改变为“Message goes here”，可以很简单的这样使用：
$('#the-box').html('This is the new message!');
事实上，你可以在函数中使用HTML代码，它能被浏览器解析，例如：
$('#the-box').html('This is the <strong>new</strong> message!');
在本例中，DIV元素中的内容看起来像这样：
<div id="the-box">This is the <strong>new</strong> message!'</div>
当然，在实例中你需要使用大于或小于等特殊字符，而不是指定特殊的HTML实体代码。你可以使用jQuery的text函数来代替：
$('#the-box').text('300 >200');
div元素更新后代码如下：
<div id="the-box">300 > 200</div>
在上面的例子中，现有的内容被替换为新的内容。如果你只想给文本附加一些信息该怎么办？幸运的是，jQuery提供append函数达到此目的。
$('#the-box').append(', here goes message');
对原始的div作如上操作后，div元素里的内容看起来是这样的：
<div id="the-box">Message goes here, here goes message</div>
除了追加，你可以在前面追加内容，将其插入到现存内容的前面而不是后面。此外，jQuery提供的函数可以在给定元素内插入内容，要么在前要么在后。还有函数替换内容、清空内容、移除元素、克隆元素等等。
除了DOM操作函数外，JavaScript框架通常还包含几个函数操作元素的样式和class。例如，你有一个表格，当鼠标经过时高亮显示某行。你可以创建一个特殊的类名hover，你可以将该类动态的添加到某行。利用YUI你可以使用下面的代码判断该行是否拥有hover类名，有则免之，无则加之。
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
同样，大多数JavaScript框架都拥有操作CSS的内置函数。
实用函数
许多JavaScript框架都带有大量的实用函数，这些函数使得应用JavaScript开发应用程序更加容易。这篇文章有太多内容需要补充，所以我将讨论大多数框架中更为引人注目的函数中的一个。
如果你曾经使用过JavaScript数组，你可能对使用循环来迭代数组操作其值非常熟悉。例如，想想清单2的代码：
清单2：迭代JavaScript数组的传统方法
var fruit = ['apple', 'banana', 'orange'];
for(var i = 0; i < fruit.length; i++) {
alert(fruit[i]);
}
清单2中的代码没错，但有点麻烦。大多数JavaScript框架包括each功能，它为数组中的每一个元素调用一个特定的函数。使用MooTools，用清单3中的代码可以完成清单2中相同的操作。
清单3：使用MooTools的each函数
['apple', 'banana', 'orange'].each(function(item) {
alert(item);
});
清单3中在语法上与Prototype和jQuery是相同的，YUI 和 ExtJS.略微不同。但是，当应用到hash或对象时，不同的框架语法是不同的。例如，在MooTools中，你可以使用下面清单中的代码：
清单4：对键/值对的各个对象使用MooTools的each函数
var hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(value, key) {
alert(key + ": " + value);
});
但是，使用Prototype库，这看起来就像清单5的代码：
清单5：对键/值对的各个对象使用Prototype的each函数
var hash = $H({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(pair) {
alert(pair.key + ": " + pair.value);
});
每个框架包含了许多更实用的函数，通常分为String函数、 Number函数、Array函数、Hash函数、 Date函数等等。要了解更多信息，请参阅相关JavaScript框架的API手册。
事件处理
每个JavaScript框架都实现跨浏览器的事件处理，鼓励你摆脱旧式的内联附加事件而使用精简的线性方法。看看清单6的jQuery例子，使用hover事件高亮显示div元素。
清单6：使用jQuery附加hover事件
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
这是jQuery的一个特殊事件，你会发现它提供了两个函数。第一个在onMouseOver事件触发时调用，第二个函数在onMouseOut事件触发时调用。这是因为hover没有标准的DOM事件。让我们看看更为典型的事件，如click（瞧瞧清单7）：
清单7：使用jQuery附加click事件
$('#the-button').click(function() {
alert('You pushed the button!');
});
正如你看到的那样，实例中只有一个函数参数。jQuery中大多数事件均采用同样的方式处理，在jQuery中使用事件处理程序，上下文指的是触发事件的哪个对象。一些框架并不以这种方式工作，拿Prototype来说，清单7中的代码看起来就像清单8中的那样。
清单8：使用Prototype附加click事件
$('the-button').observe('click', function(e) {
alert('You pushed the button!');
});
你首先会注意到，没有click函数，而是一个observe函数，它在引用自身之前接受一个事件参数。您还会注意到该函数接受一个参数e，这里的上下文指的是触发事件的元素。看看它如何工作，让我们用Prototype重写清单6中的代码（看清单9）。
清单9：使用Prototype附加悬停事件
$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('highlight');
});
jQuery也不同，你只需要使用$函数得到上下文变量，Prototype库则使用Event.element() 函数。此外，你注意到你需要将mouseover和mouseout 事件分开。
通过该文章的一些教程，你可以看到函数以内联的方式创建，并不命名。这意味着它不能重复使用，Prototype的悬停示例也给了我们一个如何使用命名函数的机会。清单10说明了这个方法。
清单10：使用Prototype改进悬停事件
function toggleClass(e) {
var el = Event.element(e);
if(el.hasClassName('highlight'))
row.removeClassName('highlight');
else
row.addClassName('highlight');
}
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);
您会注意到，此时你只需定义一个函数。它同时被mouseover和mouseout事件调用。该函数根据元素是否有“highlight”的类名，并基于结果添加或删除之。你也会注意到，参数e隐式传递。换句话说，你给observe函数传递了一个不明确的参数。
Ajax
使用JavaScript框架最令人信服的理由是跨浏览器的标准化Ajax请求。Ajax请求是异步的HTTP请求，向服务器端脚本发送请求，然后得到一个响应结果，如如XML、JSON、HTML、纯文本格式的数据。大多数JavaScript框架有一定形式的Ajax请求对象，它接受一系列选项作为参数。这些选项包括回调函数，在得到Web服务器的响应时调用，ExtJS、MooTools和Prototype的Ajax请求看起来是这样的：
清单11：一个ExtJS 库中的Ajax请求
Ext.Ajax.request({
url: 'server_script.php',
params: {
name1: 'value1',
name2: 'value2'
},
method: 'POST',
success: function(transport) {
alert(transport.responseText);
}
});
ExtJS接受一个参数，包括url、params、method 和succcess处理函数等字段，url字段包含服务器端脚本的地址，被Ajax请求调用。Params本身就是一个对象，由键/值对组成，然后传递到服务器。method 字段有两个可选值：GET或POST，默认为post方法。最后一个字段是succcess，在服务器得到成功响应后调用。该例中，假定服务器端返回纯文本，这个文本通过alert()方法呈现给用户。
接下来，让我们进一步探讨MooTools中 Ajax的请求。
清单12：MooTools中的Ajax请求
new Request({
url: 'server-script.php',
data: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onComplete: function(response) {
alert(response);
}
}).send();
正如你看见，MooTools与ExtJS很相似。你会注意到，变量通过data字段传递，方法字段需要小写。此外，与success处理函数不同，MooTools使用onComplete函数。最后，与ExtJS不同，MooTools实际上用Request的send()函数发送请求。
最后，让我们看看Prototype 有哪些明显的不同。
清单13：Prototype 中的Ajax请求
new Ajax.Request('server-script.php', {
params: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onSuccess: function(transport) {
alert(transport.responseText);
}
});
看看，Prototype以同样的方式工作，但语法小有差异。对于初学者来说，原型的Request对象接受两个参数传递给构造函数。第一个参数是发送请求的URL地址，正如你在前面两个例子看到的那样，第二个参数是一个对象，包含各个Ajax请求的选项。当然，URl作为一个单独的参数传递，他不在选项列表中。另外，值得注意的是，与MooTools不同，Prototype 对象的构造函数隐式的发送请求，所以不需要调用任何方法触发HTTP请求。
大多数JavaScript框架对Ajax的支持已经超越了我这里所说的。一些明显的增强功能包括在接到响应后自动更新元素，而无需任何特殊的onSuccess 函数。一些库已经预先构建了自动完成功能，正如你在google搜索引擎看到的那样，在键入时给你一些查询建议。
在接下来的章节中，您将了解到JavaScript框架给络开发者带来的用户体验（UE）的提升。
提升用户体验（UE）
到目前为止，这篇文章完全集中于使用JavaScript框架的好处，以及如何更容易的构建交互式应用程序。但是，另一方面，各个框架都有各自诱人的前景，包括用户界面（UI）组件和用户体验（UE）增强，这需要花大量的精力。
这章将分别探讨下面框架的用户体验：Prototype、 jQuery、YUI、ExtJS和MooTools。
Prototype
Prototype是少数几个不包括现成的UI组件或用户体验提升。相反，它顺从所有姊妹库script.aculo.us （Scripty2，这是所知的最新版本）。script.aculo.us 增加了对Prototype效果和行为的广泛支持。这些效果包括：高亮、变形、折叠、震颤、滑动、膨胀。script.aculo.us 还支持拖拽、滑动、Ajax实时编辑以及自动提示。Script.aculo.us将控件（如：slider和autocomplete）的设计交给开发者，没有提供标准的皮肤。
jQuery
与Prototype库不一样，jQuery的核心中包括一些基本的用户体验。这与Script.aculo.us的一些简单效果相似，如slide、fade。但是，对于更为高级的用户体验功能，你需要下载 jQuery UI库，其中包括更多的效果，如拖拽、缩放、排序。与Script.aculo.us不同，jQuery UI还包括一些小的部件或组件，并给开发者提供更具吸引力的借口，这样开发更为简单。目前，这些组件包括： Accordion、 Datepicker、Dialog、Progressbar、Slider和Tabs。这些部件完全主题化，jQuery UI有广泛的主题，可以用来满足自己网站或网络应用程序的需要。图1显示了jQuery UI Datepicker部件和苹果主题。
图1：jQuery UI Datepicker部件
框架比较
表1对本文中讨论的五个框架提供详细的比较
| Prototype | jQuery | YUI | ExtJS | MooTools | |
|---|---|---|---|---|---|
| Latest Version | 1.6.1 | 1.4.1 | 3.00 | 3.1 | 1.2.4 |
| License | MIT | MIT & GPL | BSD | Commercial & GPL v3 | MIT |
| Browser Compatibility | |||||
| IE Support | 6.0+ | 6.0+ | 6.0+ | 6.0+ | 6.0+ |
| Firefox Support | 1.5+ | 2.0+ | 3.0+ | 1.5+ | 2.0+ |
| Safari Support | 2.0.4+ | 3.0+ | 4.0+ | 3.0+ | 2.0+ |
| Opera Support | 9.25+ | 9.0+ | 10.0+ | 9.0+ | 9.0+ |
| Chrome Support | 1.0+ | 1.0+ | Not verified | Not verified | Not verified |
| Core Features | |||||
| Ajax Support | Yes | Yes | Yes | Yes | Yes |
| DOM Manipulation | Yes | Yes | Yes | Yes | Yes |
| DOM Traversal | Yes | Yes | Yes | Yes | Yes |
| Event Handling | Yes | Yes | Yes | Yes | Yes |
| JSON | Yes | Yes | Yes | Yes | Yes |
| Selectors | Yes | Yes | Yes | Yes | Yes |
| UX/UI Enhancements | |||||
| Accordion | No | jQuery UI | No | Yes | MooTools More |
| Animation | scriptaculous | Yes | Yes | Yes | Yes |
| Auto Completion | scriptaculous | No | Yes | Yes | No |
| Browser History | scriptaculous | No | Yes | Yes | No |
| Calendar | No | jQuery UI | Yes | Yes | No |
| Charting | No | No | Yes | Yes | No |
| Drag and Drop | scriptaculous | jQuery UI | Yes | Yes | MooTools More |
| Grids | No | No | Yes | Yes | MooTools More |
| Progress Bar | No | jQuery UI | Yes | Yes | No |
| Resizing | No | jQuery UI | Yes | Yes | No |
| Rich Text Editor | No | No | Yes | Yes | No |
| Slider | scriptaculous | jQuery UI | Yes | Yes | MooTools More |
| Tabs | No | jQuery UI | Yes | Yes | No |
| Themes | No | jQuery UI | Yes | Yes | MooTools More |
| Tree Views | No | No | Yes | Yes | No |
其他值得注意的框架
为了简洁，本文只讨论五个比较流行的框架，这并不意味着这是最流行的、最好的、功能最丰富的。
其它的一些框架也值得一提、值得一看。
- Cappuccino
- Dojo
- Glow
- GWT
- MochiKit
- Qooxdoo
- Rialto
- Rico
- SproutCore
- Spry
- UIZE
回顾
在本文中，你已经了解到JavaScript框架的概念，知道它在网站和网络应用发展中的好处。对这些框架的共同功能有一个总体描述，并用实例说明了它的应用。同时你也了解到五个框架的一个或一些用户体验和用户界面。最后，你得到了一份直观的表格，突出显示每个框架具有或不具有的特色。有了这些信息，在为你或你的团队作出明智选择之前，你可以进一步研究这些框架。
资源
- (developerWorks, November 2005) explains how to
build Ajax-based Web applications. - Learn about Dojo.
- Read the articleDojo concepts for Java developers(developerWorks, October 2008) to bridge the gap from Java code to Dojo so that you can get up to speed quickly and use the toolkit when developing your applications.
- Read Call SOAP Web services with Ajax,
Part 1: Build the Web services client
(developerWorks, October 2005) to learn how to implement a Web browser-based
SOAP Web services client using the Ajax design pattern. - Overcome
security threats for Ajax applications
(developerWorks, June 2007) discusses the
threats associated with Ajax technologies and gives you some best
practices to avoid them. - Mastering
Ajax, Part 1: Introduction to Ajax
(developerWorks, December 2005) explains how HTML,
JavaScript, DHTML, and DOM work together to make extremely efficient Web
development an easy reality. - Simplify Ajax development with jQuery
(developerWorks, April 2007) examines the jQuery
philosophy, explains its features and functions, and gives you some common
Ajax tasks. - Using Ajax with DB2
(developerWorks, August 2007) shows how the IBM Information
on Demand 2006 Conference Personal Planner uses Ajax to work with
DB2®. - To listen to interesting interviews and
discussions for software developers, check out developerWorks podcasts. - developerWorks technical events and webcasts:
Stay current with developerWorks technical events and webcasts.
获得产品和技术
- Download the Dojo toolkit. Dojo toolkit.
- Get the Prototype Javascript framework.
- Get jQuery.
- The jQuery User Interface provides
abstractions for low-level interaction and animation, advanced effects and
high-level, themeable widgets, built on top of the jQuery JavaScript
Library. - Get script.aculo.us.
- Get MooTools.
- Download and
learn about the Yahoo! YUI Library. - Get ExtJS.
- Innovate your
next open source development project with IBM trial software,
available for download or on DVD. - Download IBM product evaluation versions,
and get your hands on application development tools and middleware
products from DB2, Lotus®, Rational®, Tivoli®, and
WebSphere®.
关于作者
Joe Lennon is a 24-year-old software developer from Cork, Ireland. Joe is author of the forthcoming Apress book Beginning CouchDB, and has contributed several technical articles and tutorials to IBM developerWorks. In his spare time, Joe likes to play football (soccer), tinker with gadgets and work on his Xbox 360 gamer score.