javascript框架比较（四）

 

最后，让我们看看 Prototype 中的请求是否具有显着的不同（请看清单 13）。

清单 13. 一个 Prototype Ajax 请求

new　Ajax.Request('server-script.php',　{　
　　params:　{　
　　　　name1:　'value1',　
　　　　name2:　'value2'　
　　},　
　　method:　'post',　
　　onSuccess:　function(transport)　{　
　　　　alert(transport.responseText);　
　　}　
});　

　　同样，Prototype 的工作方式基本一致，只是有些句法上的小差别。首先，Prototype 的 Request 对象为其构造函数获取两个参数。第一个参数是请求将被发送到的 URL，第二个参数是一个具有典型 Ajax 选项的对象，如前两个例子所见。当然，由于 URL 现在作为单独的参数传递，它没有出现在选项列表中。同样需要注意，与 MooTools 不同，Prototype Ajax Request 对象构造函数隐式地发送请求，因此不需要调用任何方法来实际发起 HTTP 请求。

　　大多数 JavaScript 框架中的 Ajax 支持要比此处演示的内容更加深入。重要的增强功能包括使用接收到的响应自动更新元素，而不需要任何特殊的 onSuccess 函数。一些库甚至包含预建的自动完成功能，如您在 Google 搜索引擎中所看到的，在输入时会出现常见搜索项。

　　在下一节中，您将学习 JavaScript 框架为 Web 开发人员提供的用户体验（UX）增强功能。

　　UX 增强功能

　　到目前为止，本文全部关注的是使用 JavaScript 框架的编程优势以及它们如何简化交互式应用程序的编写。然而，对于大多数框架，还有另外一个更吸引人的方面：用户界面（UI）组件以及用户体验增强，这些在以前需要付出很大努力构建的工作现在可以轻松完成。

　　本节将分别介绍以下框架的 UX 增强功能：Prototype、jQuery、YUI、ExtJS 和 MooTools。

　　Prototype

　　Prototype 是少数几个不提供开箱即用 UI 组件和 UX 增强功能的 JavaScript 框架之一。它将这些内容转移到其姊妹库 script.aculo.us（最新版本是 Scripty2）中。Script.aculo.us 还添加了对 Prototype 中的各种效果和行为的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us 还提供拖放支持，例如滑块、in-place Ajax 编辑器和 autocompleters。与其他框架不同，Script.aculo.us 将所有控件（例如滑块和 autocompleters）的设计留给开发人员，并且未提供标准界面。

　　jQuery

　　与 Prototype 不同，jQuery 核心库中包含一些基本的 UX 增强。这些增强与 script.aculo.us 中的一些基本效果类似。例如 sliding 和 fading。然而，要获得更高级的 UX 特性，就需要下载 jQuery UI 库，它包含比 jQuery 核心库更多的效果，以及交互特性，如拖放、调整大小和排序。与 script.aculo.us 不同的是，jQuery UI 还包含一些小部件或组件，它们使开发具有吸引力的界面变得更加容易。目前，这些组件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。这些小部件都可以划分主题，并且 jQuery UI 包含各种各样的主题，可以适合您自己的特定 Web 站点或 Web 应用程序的组件。图 1 演示了 jQuery UI Datepicker 小部件的例子，该小部件的主题为 Cupertino。

图 1. jQuery UI Datepicker Widget

　　YUI

　　Prototype 和 jQuery 不包含开箱即用的 UI 小部件，但是 Yahoo! User Interface 库 (YUI) 包含一个 bucketload。除了支持拖放和调整大小外，YUI 第二版还包含 autocompleters、calendar 控件、carousel 组件、绘图、对话框、进度条、富文本编辑器（所见即所得文本区）、滑块、选项卡、树等等。在撰写本文时，上述小部件都没有包含在 YUI 第三版中。图 2 是结合使用这些组件的一个例子。

图 2. 复杂的 YUI 应用程序示例

　　ExtJS

　　和 YUI 一样，ExtJS 包含大量开箱即用的组件，其中有很多功能强大的网格控件，支持内联编辑、分页、筛选、分组、汇总、缓冲和数据绑定。ExtJS 组件具有非常专业的外观，并且分门别类。其他小部件包括选项卡、图表、窗口（对话框）、树、布局管理器、增强的表单控件、工具栏和菜单、拖放操作和直接远程功能（direct remoting）。这仅仅是 ExtJS 所提供的一小部分，如果要查找更多 RIA 组件，请登录 ExtJS 网站。图 3 是用 ExtJS 开发的 Web 桌面程序示例，展示了这个库的丰富特性。

图 3. ExtJS 桌面应用程序示例

　　MooTools

　　MooTools 和 Prototype、jQuery 一样，也不包含开箱即用的 UI 控件和小部件。与 jQuery 一样，它包含一组有限的效果。其更高级的 UX 增强包含在 MooTools.More.js 扩展中。这个扩展不仅仅是简单的 UX/UI 插件，而是包含对 Array、Date、Hash 和 String 类以及额外的 Element 扩展的一些有趣的附加功能。至于 UX 增强功能，MooTools.More.js 包含拖放支持以及一些其他效果。这些附加功能还包括一些 UI 控件，如 accordion、可排序的 HTML 表、scroller、工具提示和 Ajax spinner overlays。然而，与 script.aculo.us 一样，您需要自己设计这些控件。

　　Framework 比较

　　表 1 是本文介绍的五个框架所含特性的详细比较。

表 1. 框架特性比较

　 Prototype jQuery YUI ExtJS MooTools
最新版本 1.6.1 1.3.2 3.00 3.1 1.2.4
许可证 MIT MIT & GPL BSD Commercial & GPL v3 MIT
　 　 　 浏览器兼容性 　 　
支持 IE 6.0+ 6.0+ 6.0+ 6.0+ 6.0+
支持 Firefox 1.5+ 2.0+ 3.0+ 1.5+ 2.0+
支持 Safari 2.0.4+ 3.0+ 4.0+ 3.0+ 2.0+
支持 Opera 9.25+ 9.0+ 10.0+ 9.0+ 9.0+
支持 Chrome 1.0+ 1.0+ 未验证 未验证 未验证
　 　 　 核心特性 　 　
支持 Ajax 是 是 是 是 是
DOM 操作 是 是 是 是 是
DOM 遍历 是 是 是 是 是
事件处理 是 是 是 是 是
JSON 是 是 是 是 是
选择器 是 是 是 是 是
　 　 　 UX/UI 增强功能 　 　
Accordion 否 jQuery UI 否 是 MooTools More
动画 scriptaculous 是 是 是 是
自动完成 scriptaculous 否 是 否 否
浏览器历史 scriptaculous 否 是 是 否
日历 否 jQuery UI 是 是 否
绘图 否 否 是 是 否
拖拽 scriptaculous jQuery UI 是 是 MooTools More
网格 否 否 是 是 MooTools More
进度条 否 jQuery UI 是 是 否
重新调整大小 否 jQuery UI 是 是 否
富文本编辑器 否 否 是 是 否
滑块 scriptaculous jQuery UI 是 是 MooTools More
选项卡 否 jQuery UI 是 是 否
主题 否 jQuery UI 是 是 MooTools More
树视图 否 否 是 是 否

 PrototypejQueryYUIExtJSMooToolsLatest Version1.6.11.4.13.003.11.2.4LicenseMITMIT & GPLBSDCommercial & GPL v3MIT   Browser Compatibility  IE Support6.0+6.0+6.0+6.0+6.0+Firefox Support1.5+2.0+3.0+1.5+2.0+Safari Support2.0.4+3.0+4.0+3.0+2.0+Opera Support9.25+9.0+10.0+9.0+9.0+Chrome Support1.0+1.0+Not verifiedNot verifiedNot verified   Core Features  Ajax SupportYesYesYesYesYesDOM ManipulationYesYesYesYesYesDOM TraversalYesYesYesYesYesEvent HandlingYesYesYesYesYesJSONYesYesYesYesYesSelectorsYesYesYesYesYes   UX/UI Enhancements  AccordionNojQuery UINoYesMooTools MoreAnimationscriptaculousYesYesYesYesAuto CompletionscriptaculousNoYesYesNoBrowser HistoryscriptaculousNoYesYesNoCalendarNojQuery UIYesYesNoChartingNoNoYesYesNoDrag and DropscriptaculousjQuery UIYesYesMooTools MoreGridsNoNoYesYesMooTools MoreProgress BarNojQuery UIYesYesNoResizingNojQuery UIYesYesNoRich Text EditorNoNoYesYesNoSliderscriptaculousjQuery UIYesYesMooTools MoreTabsNojQuery UIYesYesNoThemesNojQuery UIYesYesMooTools MoreTree ViewsNoNoYesYesNo

　　其他重要框架

　　限于篇幅，本文只介绍了五个比较常见的 JavaScript 框架。这并不表示它们是最流行的、最好的或是功能最多的框架。

　　其他一些 JavaScript 框架也值得注意，包括：

　　Cappuccino

　　Dojo

　　Glow

　　GWT

　　MochiKit

　　Qooxdoo

　　Rialto

　　Rico

　　SproutCore

　　Spry

　　UIZE

　　结束语

　　本文向您介绍了 JavaScript 框架的概念以及它为什么会给 Web 网站和 Web 应用程序开发带来好处。本文对这些框架的常见功能作了简要描述，并举例说明在较常见的库中如何实现这些特性。本文还分别讲解了作为这五个框架的一部分或作为单独的附加功能的 UI 和 UX 增强。最后，还提供了一个直观的特性对比图表，其中列出了各个框架各自具备和缺乏的选项。有了这些知识，您应该就可以进行更深入的研究，然后明智地选择适合您及您的开发团队的框架。

该文章转摘自-网页制作大宝库(www.dabaoku.com) - 原文链接：http://www.dabaoku.com/jiaocheng/biancheng/javascript/201009136832_4.shtml