Ajax库大比拼：Dojo与YUI

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");
 

--------------------------------------------------------------------------------

获取帮助

     无论您选择哪个库，有时您都可能需要一些帮助。YUI 和 Dojo 的特色是都有广泛的在线文档，从全面教程到详细的、循序渐进的例子。它们也有许多书供您选择，以便具有一个供探索的物理工件，它们都有充满活力的社区，乐于回答问题。最好的出发点就是它们的网站（参见 参考资料 中的链接）。

--------------------------------------------------------------------------------

结束语

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