Ajax 库大比拼:Dojo 与 YUI

红薯 发布于 2011/01/09 22:56
阅读 5K+
收藏 11

创建一个现代的基于 Web 的应用程序比起几年前所需更多。现在,开发人员的任务是利用 Ajax 工具箱中所有技术来创建丰富的交互式 UI。这些方法最初引入时,许多专家认为只有业内行家才能掌握,尽管现在并没有变简单,但是高质量的框架已经可以帮您的大忙了。本文探讨 Dojo 和 Yahoo! UI Library (YUI) 这类流行的库如何简化当今 JavaScript 开发人员的工作,为什么应该一开始就使用库,以及如何选择库。也提供了一些 Dojo 和 YUI 的具体例子。

为什么应该使用库?

回到早期网络时代,就是 20 世纪 90 年代后期,我们这些做客户端开发的人面前困难重重。比起今天时髦的智能电话,我们的显示器分辨率很低;浏览器大战如火如荼,带给我们的是各种各样的不兼 容;我们的工具箱只比那些使用穿孔卡片的人好一点点,我们艰难地进行着工作。使 JavaScript 跨浏览器正常工作是一项艰巨的任务,在早期的项目中,我们遇到了很多麻烦,管理员规定 “只能使用让应用程序运转所需的最小限度的 JavaScript 代码”。那段日子不堪回首。

问题已经得到了妥善的处理,但是浏览器问题到今天仍然存在(Windows® Internet Explorer® 6 ,我将目光投向你)。今天,除了改进很大的工具箱外,您还可以利用大量的库,来减轻开发跨浏览器前端代码的压力。事实上,您总是面临一个 选择的悖论,选择正好合适的框架使您轻松很多 — 但是,您不得不花大量时间在 Y 操作系统上调试浏览器 X 的这种间歇性问题。现在,您应该关注使用库为您的编码工作建立基础 — 在各种浏览器和您所写的代码之间有不同的虚拟机。

除了消除浏览器之间的差别外,在您的日常编码工作中,工具包也会给您额外的帮助。有些库是极简的,仅仅只做一件事,而有些库则像包罗万象的厨 房,包含所有型号(sink-sized)的工具箱,试图改正 Web 中的所有缺陷。尽管每个库都是不一样的,但仍然有一些共同点。大部分提供:

  • 一个包装 XMLHttpRequest (XHR) 对象的事务包装器
  • 跨浏览器 CSS 选择符
  • 简化的事件处理
  • 各种各样的动画、效果和小部件
  • 各种应用函数

您怎么选择这个库,而不选另一个?唯一错误的回答是手工编写代码 — 不使用任何 库。选择库可能很困难,但是比起自己手工编写代码来说,就无足轻重了。在您为必须选择一个库而慌乱之前,要知道它们大多数都可以很好地协同工作(合理范围内)。有时候,混合和匹配是最好的选择。不管怎么样,以下建议供您选择库时参考:

  • 您想从中得到什么?您想要寻找一个几乎可以完全替代页面上所有 UI 元素的替代品?或者您正在寻找某种方式来简化 JavaScript 编程?
  • 代码有多容易阅读?尽管过去几年中文档有了很大的改进,但是有时您也必须深入钻研代码。托付给一个库之前,有必要花点时间研究一下源代码。它容易理解吗?或者,甚至原作者也在此遇到了麻烦?
  • 文档有多好?清晰易读的代码能弥补文档的不足,但是除了教程和例子,没有什么能够帮助您开始。随便看看维基百科和网站,查看他们提供了什么。例子是清晰易读的吗?Google 的快速搜索能带给您合适的资料吗?
  • 此库相关的社区是什么样的?查看邮件列表,是否有很多邮件?新人受到尊重还是嘲笑?代码近期有更新,或者还是多年前的版本?
  • 您能得到帮助吗?尽管这涉及到社区早期内容,但浏览社区看看人们正在用什么,总是有价值的。浏览求职板块,对简历中频繁出现的库有一个大概了解。

做最终决定之前,一定要花一点时间考虑备选库。一些库有自己的风格 — 比如,Prototype 会为 JavaScrip 编程带入大量的 Ruby。如果您认为 Ruby 是所有语言的终结,那么这就是它的一个特征。但是如果阅读使您的眼睛不舒服,Prototype 可能就不是最好的选择。跟着教程阅读代码是不错,但是,在您用一个给定库实际解决自己 的问题时,很难知道哪个适合您。

为什么选用 YUI 和 Dojo?

有这么多优秀的方案供您选择,为什么选择 YUI 或 Dojo?一个词:完整性。不像其他方案需要附加的库或插件,Dojo 和 YUI 有现代前端工程师需要的一切(甚至更多)。这既有益处,也有害处,如果您是在市场上一次性购足 Ajax,那它们是两个强大的竞争者。除了大量的 JavaScript 助手和工具之外,两者都提供一流的小部件和控件 — 远远超出标准浏览器有限的调板。

事实上,YUI 和 Dojo 是十分相似的。两者都提供一个健壮的核心实用工具和帮助函数,并且各自都有一个极好的小部件和组件的集合。除了日历、树、菜单 这类旧备用组件之外,还有一个聊天选项。您可以选择一个强大的、充满生机的社区为您解答疑难、修复 bug、向其中增加新函数。他们有很多优秀的网站,其中有代码示例,参考资料,新手指南,以及 — 如果您喜欢纸质的 — 他们也提供书,书中有许多令人印象深刻的库。

JavaScript 语言缺少名称空间或程序包,Dojo 和 YUI 克服了代码命名和包装的困难。在 YUI 中,代码位于 YAHOO 之下,附加一些 “包” 名。例如 YUI 的事件实用工具看起来像这样:

YAHOO.util.Event.addListener

Dojo 遵循类似的方法,但它的实现简单一些。尽管小部件位于 dijit 之下,但您可以使用 Dojo 作为顶层包装器访问核心组件。

这两个库相似,但彼此并不完全相同。Dojo 允许您以声明编程 的方式使用它的小部件。换句话说,您可以使用您自己的标记为小部件配置特定属性,或者可以使用标准 JavaScript 代码 — 可任意混合和匹配。Dojo 附带一个相当有用的依赖项管理器;当您需要一个特定模块时,Dojo 确保您具有所需要的一切。它也确保依赖项已经加载一次,且仅加载一次。

Ajax 简单方法

尽管 XHR 对象自身不是很复杂,但这也有足够的细微差别使您很快就能理解当今 Ajax 库中的抽象层。Dojo 和 YUI 也不例外,它们都提供一个易于使用的包装器。当您使用一个库处理 XHR 时,能发现一些常见主题。至少,包装器应该:

  • 提供被调用资源的 URI
  • 提供传递参数的方式
  • 提供一种指定被调用 HTTP 方法(get、post)的方法
  • 包括一种处理调用结果的回调技术

YUI 和 Ajax

YUI 将其 XHR 包装器隐藏在连接管理器中。API 很直观:您调用单个方法,并返回一个连接对象。一个典型的调用如清单 1 所示。

清单 1. 一个 YUI Ajax 调用样例

				
var url = "/fooApp/validate";
var msg_div = document.getElementById("messages");

var callback =
{
success: function(o) { msg_div.innerHTML = o.responseText},
failure: function(o) { console.debug("An error occurred: ", o);}
};

function validate() {
var form = document.getElementById("pim");
YAHOO.util.Connect.setForm(form);
var transaction = YAHOO.util.Connect.asyncRequest("GET", url, callback);
}

 

比起其他库,这看起来有点冗长,这是因为,为了便于阅读我展开了一些。您可以将回调函数和 URL 直接放入调用函数 Connect.asyncRequest 中。如您所见,您能检索某些元素 — 在本例中是一个 <div>,它将容纳服务器返回的信息 — 以及包含您想要发送到服务器的数据的表单。在连接管理器上调用 setForm 方法,会基于您所做的调用类型(在本例中是 GET 请求),收集表单并将它们适当地打包。当验证方法被调用时,对服务器的异步调用将被触发。

Dojo 和 Ajax

Dojo 的方法类似于 YUI 方法,只不过没那么冗长。Dojo 的 XHR 包装器在 Dojo Base 内,并且提供针对几个主要 HTTP 动词(post、get、put 和 delete)的方法。清单 2 中有一种调用 Dojo 方法的方式。


清单 2. 一个 Dojo Ajax 调用样例

				
var xhrParms = {
url: "/fooApp/validate",
load: function(response){
dojo.byId("messages").innerHTML = response;
},
error: function(data){
console.debug("An error occurred: ", data);
},
timeout: 2000,
form: "pim"
};

function validate() {
dojo.xhrGet(xhrParms);
}

我再次选择展开代码来提高可读性,但是,如果您喜欢,您可以将参数直接放在调用函数 dojo.xhrGet 中。正如您所见,这个例子和 YUI 有点相似,但有一些很有趣的差异。第一,您可能注意到明显缺乏 document.getElementById 调用。通过 ID 获取元素是常用的方法,但是超过 20 个字符时很容易发生输入错误!很多库提供各种形式的快捷方式,Dojo 提供 dojo.byId。尽管不如 Prototype 的 $ 这样精炼,但仍然是一个很大的改进。同样,当 validate 方法被调用时,您对服务器的调用将被调用。

选择器的功能

在 web 开发人员的工具箱中,CSS 选择器是一个功能强大的工具,但是跟 JavaScript 一样,浏览器支持不具有普遍性。幸好,现在的库填补了这个空缺,给我们提供 CSS 选择器的全部功能。

YUI 和 CSS 选择器

YUI 利用其 Selector 实用工具为您提供 CSS 3 选择器的全部功能。本质上就是,您在一个特定的CSS 选择器上创建一个 “查询” ,就能够得到一个匹配该条件的元素集。例如,见清单 3。

清单 3. 利用 YUI 实现的 CSS 选择器

				
YAHOO.util.Event.onDOMReady(bindEvents);

function bindEvents() {
var headers = YAHOO.util.Selector.query('.header');
YAHOO.util.Event.on(headers, 'click', toggleSection);
}

在本例中,您是在寻找具有报头样式的元素,并对返回的每个元素应用一个事件侦听器(更多介绍见下节)。可以看出来,这是一个简洁的、功能强大的元素检索方法,在此代码中,每当有人单击一个 header 样式的元素时,toggleSection 方法就将被调用。

Dojo 和 CSS 选择器

Dojo 有一个功能同样强大的选择器机制供其使用。它也调用它的查询 实现,同上面一样,您给它一个 CSS 选择器,它就返回一个元素集(如清单 4 所示)。

清单 4. 利用 Dojo 实现的 CSS 选择器

				
dojo.addOnLoad(bindEvents);

function bindEvents() {
dojo.query('.header').forEach(
function(header) {
dojo.connect(header, "click", toggleSection);
});
}

收到每个带有 header 样式的元素后,用 forEach 方法遍历集合,对每个元素应用一个事件侦听器。

事件处理

unobtrusive JavaScript 时代,事件处理尤为常见。现代的浏览器不总是能完成任务,但是库设计者再次独自揽下重任,以简化我们的生活。在前一节,您已经看见两种绑定到单击事件的方法:YUI 的 Event 和 Dojo 的 connect。 在这两个例子中,您要求事件发生时能得到通知,以便采取措施 — 在上面例子中是进行切换(也就是说,如果是可见的,则隐藏,如果是隐藏的,则使其可见)。您可以直接向您的标记添加事件处理程序,但是跟您在这里看到的一 样使用抽象则更为简洁,因为它将您的业务逻辑从表示中分离出来,使标记更简洁、代码更容易理解。

您不能将事件附加到元素上,除非该元素已加载 — 但是您如何知道这什么时候发生?Dojo 和 YUI 为您提供一个帮助方法。在 YUI 中,我们有:

YAHOO.util.Event.onDOMReady()

Dojo 为您提供:

dojo.addOnLoad()

不管哪种情况,您都可以利用这些帮助工具,来确保文档就绪时附加事件。完成该任务还有一些其他的方法,但是没有几种比这两种方法更容易理解。

小部件:窗口、日期选择器等

现代网页设计的调板很单调:只有文本框、文本区、按钮等,不是很多。再次,当浏览器让您失望时,库设计者让您恢复信心。现在,您几乎具有了富 桌面应用程序中可用的每一样东西:有日期选择器、菜单、树、滑块,窗口等等。这是一个真正的聚宝盆!让我们看看 YUI 和 Dojo 中的日期选择器。

YUI 的日期选择器

YUI 提供一组丰富的控件和小部件,使用它们能使您的应用程序更流行。手工输入日期很容易出错,多数用户期盼着能有某种控件。YUI 有一个很棒的日期选择器,位于 Calendar 组件中(如清单 5 所示)。

清单 5. YUI 中的日期选择器

				
var cal = new YAHOO.widget.Calendar("cal", "cal1Container", {navigator:true});
var bday = document.getElementById("bday");
YAHOO.util.Event.addListener(bday, "focus", renderCal);

function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];

bday.value = month + "/" + day + "/" + year;
cal.hide();
}

function renderCal() {
cal.selectEvent.subscribe(handleSelect, cal, true);
cal.render();
cal.show();
}

这有许多函数,但是其中很多您以前都见过。调用 YAHOO.widget.Calendar 创建一个日历小部件,并在 birthday 字段上建立一个监听器,这使得在接收到焦点时,日历出现。handleSelect 函数将用户选择的值输入到 birthday 字段。这只是冰山一角。YUI 日历很容易配置,它也支持国际化。

Dojo 的日期选器

Dojo 也有许多优秀的小部件 — 这些小部件被设计得可访问且支持国际化。在本例中,我们来看 Dojo 的声明式程序设计风格;不是手写几行 JavaScript 代码,可以只是将下面这一行代码:

dojoType="dijit.form.DateTextBox"

添加到您想转变成日期选择器的字段。通过增加清单 6 的这两行代码,就能得到一个日历,几乎不费任何力气!

清单 6. Dojo 中的日期选择器

				
dojo.require("dojo.parser");
dojo.require("dijit.form.DateTextBox");

结束语

本文在有限的篇幅内涵盖了很大的范围,坦白地说,这仅仅触及到这两个重要库的表面。如果您现在还没有使用某一个,我希望我能说服您试用 Dojo 或 YUI。每个都有充满热情的追随者,因此,都试一试,看它们怎么能帮助您向用户交付更好的体验。

加载中
0
夏小八
夏小八

为什么 DOJO 加载起来好慢。

全部JS 都加载上去。怎么解决啊

0
ddatsh
ddatsh

上次听IBM 的人讲DOJO

记不太清了,好像说是可以有选择性的加载DOJO中的哪些东东

本身提供了一个可以打包JS的工具

另,我非做广告

以前公司用到商业的DORADO,那确实是让人眼前一亮的东东

我认为开发效率极高,效率也高,他们自己出了个小型的IDE,ECLIPSE中也有插件

0
YANGL
YANGL

引用来自#3楼“dd”的帖子

上次听IBM 的人讲DOJO

记不太清了,好像说是可以有选择性的加载DOJO中的哪些东东

本身提供了一个可以打包JS的工具

另,我非做广告

以前公司用到商业的DORADO,那确实是让人眼前一亮的东东

我认为开发效率极高,效率也高,他们自己出了个小型的IDE,ECLIPSE中也有插件

 哥们是在上海做开发吧?

dorado的UI还是非常给力的,太保用这东西用的挺多的。

0
开源中国射线科科长
开源中国射线科科长

现在研究创新和软件工程的团队 更多关心的是 效率和学习成本 YUI和Dojo的学习成本太大了 尤其是YUI ,可以说它正在把JavaScript这门原生语言引上一个类似Java的胡同(个人眼光有局限,且不下结论是否是死胡同) 这也是为什么所有开发者宁可用jQuery + magento在VPS上架设一百个分销小网站 也不要选择做一个交易平台的原因 能力 资金 才是Triz理论中的冲突所在 

复杂的终究会被简约取代  Dojo dojoX jQuery,jQueryUI用起来很方便 改起来很快速很顺手 这就够了 

0
夏小八
夏小八

jQuery UI 虽说请来很快速很顺手。但老感觉UI看起来不咋的。

虽然说可定制。

0
panhan
panhan
现在时过境迁了没?
0
杨鹏伟
杨鹏伟
我来晚了!楼上问“ 时过境迁了没”,我也再问,个人感觉现在Ext js和easyui比较火的。据说Ext js早期来源于YUI,easy ui是用jquery模仿Ext js。就学习成本而言,确实easy ui真的easy,但是Ext js呢?它也火啊!学习成本也很高啊!但是它就很火啊!个人认为虽然学习成本高,但是有助提高javascript编程思维。
返回顶部
顶部