本文配套源码
简介
我们最近刚刚完成了一个Web 2.0 Dojo原型的开发。这个原型十分宽泛，为信息管理提 供了一个新的功能。我们还与用户体验团队协作以确保此应用程序可用。屏幕由一名图形Web设计人员设 计，以使它们看上去更专业一些。
本文记录了我们进行此原型的Web 2.0开发的实际体验。由于Web 2.0相对来说是个比较新的技术，所以在需要时，开始使用和进行定制可能会较为困难。我们并没有为我们的 Dojo应用程序使用开箱即用的 外观。因为我们需要的是一致的图形设计以符合我们产品线的品牌效应。因此，我们必须使用Dojo进行 定制。定制是绝大多数开发人员耗费时间最多的一项工作，对于那些不知道如何解决此问题的开发人员 ，更是如此。
由于本文的重点在于 Dojo应用程序的定制，所以这里我们不对示例中出现的每个小部件属性做详细 的描述。本文假设您对Dojo和CSS有一定的了解。本文中的示例所基于的是 Dojo1.1.0。
创建一个Dojo应用程序
设计方法
有经验的软件工程师在开发时大都习惯使用面向对象（Object Oriented，OO）技术 。我们希望我们的Web 2.0 应用程序开发也能沿袭我们用了很多年的 Java 编程原理。我们发现 在很大程度上我们可以通过使用 Dojo小部件和模板模式以及 JavaScript/Dojo对象来做到这一点。
Dojo小部件和模板模式的使用
我们编写了一些定制小部件，它们由 JavaScript 类组成 ，并包括 HTML 模板以便用来进行呈现。这让我们可以把更多的 OO 方法应用于我们的应用程序，而不 仅仅是编写一些使用全局 JavaScript 函数的 HTML 文件。通过这些定制的小部件，我们获得了多种特 性：可借助良好定义的小部件实现的对象隔离；在需要时可供那些使用 HTML 的小部件更新 DOM 的动态 内容；同一个 HTML 模板可有多个实例（通过使用定制小部件生成不同的 HTML ID）。我们还能扩展我 们自已编写的这些定制小部件，从而制做出更多的个性化版本。
清单 1 所示的是定制小部件 JavaScript 文件的一部分，该文件在 dijit._Widget 和 dijit._Templated 基础之上构建。
清 单 1. 定制小部件 JavaScript 文件
Dojo.provide ("mywidgets.MyWidget");
// put any other requires the widget needs here
Dojo.declare(
'mywidgets.MyWidget',
[dijit._Widget, dijit._Templated],
{
widgetsInTemplate: true,
templatePath: Dojo.moduleUrl( "mywidgets",
"../templates/mywidgets/templateMyWidget.html");
// put any other variables and methods for this widget here
// can also override methods from the base classes here
});
widgetsInTemplate 属性告知 Dojo它需要解析这个模板 文件，因它含有 Dojo小部件，而不只是 HTML 标记。templatePath 属性告知 Dojo这个小部件将使用这 个特定的 HTML 模板来进行呈现。当小部件被实例化时，比如使用 new mywidgets.MyWidget() 实例， 此模板的 HTML 在此对象在 DOM 的插入处被呈现。
清单 2 所示的是这个小部件的 HTML 模板文 件。
清单 2. HTML 模板
<div class="templateMyWidget">
<!-- Other Widgets and HTML can be included here -->
<button dojoType="dijit.form.Button" id="myButton_${id}"
label="My Button" dojoAttachPoint="myButton"></button>
</div>
在本例中，为了防止代码通过其 ID 访问此按钮，用变量替换了此 ID。 ${id} 被这个 ID 属性的值替换，这个属性继承自 dijit._Widget 类。此 ID 是惟一的；因而，将其用 作模板内的多个 ID 中的一个就能实现在实例化几个小部件的时候，每个小部件都具有一个惟一的 ID。 我们还包括了 dojoAttachPoint 属性。这就在小部件内创建了一个指向此 DOM 节点的属性。所以如果 已经访问了这个小部件（比如，myWidgetObj），就可以使用 myWidgetObj.myButton 访问到此 DOM 节 点。而无需知道此 ID 并且可以省去该属性，让系统创建该元素的惟一 ID。并且可以通过使用 myWidgetObj.myButton.id 检索这个由系统生成的 ID。
如果您下载了这些 Dojo 源代码，可能会注意到 Dojo 也是如此编写的。每个 Dojo 小部件都有一个 JavaScript 文件和与之相关的一个 HTML 文件（通常二者具有相同的名字）。这些模板可以在与小部件的 JavaScript 文件同级的 templates 的目录内找到。比如，此 Button 小部件的 JavaScript 文件是 <dojo_root>\dijit\form\Button.js，而其模板文件是 <dojo_root>\dijit\form\templates\Button.html，其中 <dojo_root> 是包含所下载的 Dojo 代码的那个目录。
JavaScript 和 Dojo对象的使用
在我们开始开发此原 型时，我们并不具备 JavaScript 的太多经验，但是，它的确可以让习惯于使用 OO 原理的人使用 JavaScript Object 进行开发。Dojo提供了使用 Dojo.declare 结构定义自己的类的更好方法。我们建 议您参阅 developerWorks 文章“针对 Java 开发人员的 Dojo概念”（参见 参考资料 小节 ）。与任何原型一样，我们的要求不仅限于初始设计，所以代码变得越来越复杂和混乱。所以最好是采 用足够多的设计模式。有关设计模式的文章很多，其中包含了 JavaScript 和 Dojo的示例。我们推荐其 中的一个称为 “MVC with JavaScript” 的示例（参见 参考资料）。