在本文中，学习如何用 Dojo 和 Ajax 开发可以与核心应用程序轻松集成的可重用组件。本文通过一个逐步的示例讲解如何开发一个可以向现有博客应用程序添加邮件功能的
Web 应用程序、生成邮件组件并处理复杂的跨域通信。
事实证明，在现有的应用程序中添加功能是软件开发中最具挑战性的任务之一。除了不改变现有的代码外，还要确保新增的代码满足所有易用性和性能需求。在本文中，学习如何在
Web 项目的后期阶段引入新功能，以及如何无缝地把修改集成到现有项目中。
本文介绍的方法在软件开发生命周期的以下阶段中尤其有意义：
- 开发阶段。客户要求开发团队在产品中集成新功能，从而提高易用性（由于项目采用迭代式的敏捷开发方法，这种情况越来越常见了。）这要求在短时间内对新功能进行快速分析和集成，而且不能破坏应用程序的健壮性和标准。
- 维护阶段。常常需要添加和删除功能。开发团队还可能需要为特定的客户接入或取消某些功能。还常常需要进行其他的定制工作。
分析了这个问题之后，团队应该开发一个灵活的体系结构，从而支持无缝地添加和删除功能，而不需要修改产品或应用程序核心功能的代码。在理想情况下，应该根本不修改属于核心功能的代码，因为在这部分代码的测试和稳定性处理方面已经投入了大量时间。本文中的用例演示如何开发这样的应用程序，并指出一些挑战。
一个博客应用程序已经开发完并投入使用了。但是，客户又提出了一项新要求：在博客系统中增加邮件功能。客户已经有一个邮件服务器，希望以某种方式把这两个应用程序集成起来。客户希望：
- 每当用户单击有效的 URL 时，都给他们提供一个窗口。
- 这个窗口包含邮件组件提供的所有选项。
- 邮件窗口可以向邮件服务器发送邮件。
挑战
开发团队不愿意为了添加邮件功能而修改博客系统的核心功能，因为这样做的风险太大了。如果开发团队在开发核心功能时使用了第三方软件，而这些软件不允许他们修改源代码，那么情况就更加麻烦了。另外，管理人员也反对修改现有的表示层和业务层。
开发团队可以选用两种方法。图 1 展示了核心功能和新功能并不紧密集成的方法；体系结构使新功能与核心功能松散地耦合：
图 1. 核心功能和新功能并不紧密集成
图 2 展示了核心功能和新功能紧密集成的方法；在这个体系结构中，新功能成为核心功能的固有部分。
图 2. 核心功能和新功能紧密集成
开发团队决定采用第一种方法（图 1）。这种方法具备与松散耦合体系结构相关的所有优点，比如代码可重用性，而且限制了测试所需的工作量。
他们将使用 Dojo 开发组件并以松散耦合方式把它们集成到主应用程序中。他们选择 Dojo 是因为：
首先，需要设置 Dojo（设置方法参见 参考资料）。在设置 Dojo 之后：
- 需要创建一个 .js 文件，这个文件将包含后面编写的大多数代码。在插入所需的功能时，只需把这个 .js 包含在表示层（jsp、HTML
等等）中。
- 为了避免在表示层中包含 Dojo 库，应该在步骤 1 中创建的 .js 文件中包含它们。清单 1 给出的示例代码启用了
dojo.js 的包含：
清单 1. 启用 dojo.js 的包含
function addOnJsFiles(file)
{
var scriptTag= document.createElement('script');
scriptTag.src = file;
scriptTag.type = 'text/javascript';
scriptTag.defer = true;
document.getElementsByTagName('head').item(0).appendChild(scriptTag);
}
/*Take special care that you have not included the dojo.js in the jsp also, as this
is known to cause problem in IE though it works fine with Firefox. If you have
included both dojo.js and the .js file in which this function is to implemented,
you should remove inclusion of dojo.js from jsp file.*/
|
根据目录结构的不同，可能需要像清单 2 这样调用清单 1：
清单 2. 调用清单 1 中的功能
addOnJsFiles('js/dojo/dojo.js');
/* Take care of the directory structure */
|
- 通过一个解析机制，可以找到用户在屏幕上输入的任何电子邮件地址。可以使用 JavaScript 的正则表达式完成这个任务，如清单
3 所示：
清单 3. 搜索所有有效的电子邮件模式
var email = /(([a-zA-Z0-9_\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+)/g
|
- 编写一个代码片段，把电子邮件地址包围在一个标签标记中，如清单 4 所示：
清单 4. 替换所有有效的电子邮件模式
var htmlContent = document.body.innerHTML;
htmlContent=htmlContent.replace(email, "<label onclick=
"sendmail('$1')\">$1</label>");
document.body.innerHTML=htmlContent;
|
- 使用 sendmail 函数包含用来创建和显示 Dojo 组件的主业务逻辑和代码。根据使用的组件和 API，包含组件所需的文件。清单
5 给出一个示例：
清单 5. 包含必需的包
dojo.require("dojo.widget.*");
dojo.require("dojo.event.*");
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.Editor2");
dojo.require("dojo.widget.Textbox");
|
即使只需包含特定的组件库（比如 dojo.widget.Button），也必须包含 dojo.widget.* 等包。这种方式与
Java 和其他语言不一样。dojo.require 方法将动态地获取 JavaScript
代码并把它们装载到页面中。如果没有包含 dojo.widget.* 和 dojo.widget.Button，就会遇到一个运行时异常，因为还没有装载通用的组件库。
- Dojo 提供两种创建组件的方法：
- 在构造函数中传递组件的父 id（见清单 6）。这里的 “父” 是指组件将连接的 DOM 元素。
清单 6. 创建 Dojo 组件
var tmpDiv = document.getElementById(divid);
var FloatingPaneWidget = dojo.widget.createWidget("FloatingPane",
{
id:"pane1",windowState:"minimized",
title:"Send Email", hasShadow: "true",
resizable:"true",displayMinimizeAction:"true",
toggle:"explode",constrainToContainer: "false"
},
tmpDiv);
|
- 以程序方式创建组件并把它们插入 DOM 结构，见清单 7：
清单 7. 创建 Dojo 组件
var newEditor = dojo.widget.createWidget('Editor2');
var layoutWinEd2 = dojo.widget.createWidget("LayoutContainer",
{layoutAlign:"top"});
layoutWinEd2.addChild(newEditor);
|
清单 7 在布局容器中添加编辑器。为了连接邮件组件，可以包含以下代码：
FloatingPaneWidget.addChild(layoutWinEd2); |
为了添加业务逻辑（用来发送电子邮件的实际代码），Dojo 允许把定制的方法与工具包提供的基本方法连接在一起。连接定制方法所用的代码如下：
dojo.event.connect(SubmitButtonId,"onClick", "codeForSendingMail"); |
编写处理 onclick 事件的函数，见清单 8：
清单 8. 处理事件的示例代码
function codeForSendingMail () {
alert("Special handling for onclick ...");
...Your logic goes here
}
|
最后，显示组件：
dojo.widget.byId('pane1').show(); |
- 为了异步地提交数据，需要使用 dojo.io 库。这个库提供一个相当简单的接口，可以通过
bind
方法异步地提交表单数据。清单 9 给出一个示例：
清单 9. 处理事件
var myform = dojo.byId("myform");
dojo.io.bind({
url: xyz.com,
/* This is not required if the form has an action element defined */
formNode: myform,
method: myform.method, /* Get or Post */
load: myCallBackFuntion,
error: function(type, error)
{
alert("Error: " + type + "n" + error);
}
});
|
- Dojo 支持跨域通信。因为这个应用程序需要跨不同的域（应用服务器，邮件服务器）进行通信，所以需要使用 Dojo 的 XhrIframeProxy
库。在前面编写的 .js 文件中添加清单 10 中的代码。
在 Dojo 的 bind 函数中包含 dojo.io.XhrIframeProxy，这个库完成所有
Iframe 工作：
dojo.require("dojo.io.XhrIframeProxy"); |
清单 10. Dojo 的绑定调用
dojo.io.bind({
IframeProxyUrl: http://externalDomain/myhtml.html,
url:http://externalDomain/path/myservlet.do,
content:
{
To:toVal, From: fromVal, CC: ccVal, BCC:bccVal, Subject: subVal, Message:
messageText
},
load: showSucessMessage,
error: showErrorMessage,
method: 'POST',
mimetype: "text/html"
});
|
IframeProxyUrl 是外部域上 HTML 文件的位置，这个域包含一个实现授权（isAllowedRequest）功能的
.js 文件。
externalDomain 域上的 HTML 文件 myhtml.html 应该包含 .js 文件或者直接在脚本标记中实现清单
11 中的函数：
清单 11. 远程 HTML 应该包含的函数
function isAllowedRequest(request){
/*
Return true if you want to allow cross domain interaction,
else return false
*/
}
|
在本文中，学习了如何添加一个浮动面板（Dojo 组件），并在不修改原来的代码的情况下把它集成到主应用程序中。这种开发战略的优点包括：
- 不同的团队可以分别开发项目的各个独立部分，这样就可以同时开发不同的模块。这种开发方式支持开发和集成独立且可重新发布的代码。
- 显著降低测试和接受代码所需的工作量。测试人员只需关注要集成的新功能，而不需要重新测试整个应用程序。
- 可以根据业务需求进行灵活的定制。可以在任何时候添加或删除功能。
学习
- 您可以参阅本文在 developerWorks 全球站点上的
英文原文 。
- 观看演示程序并了解关于 Dojo
的所有信息。
- 查阅 Dojo 的 FAQs。
- “使用
Dojo 开发 HTML 小部件”（Igor Kusakov，developerWorks，2007 年 2 月）解释了用
Dojo 开发 HTML 组件的基本知识，包括如何引用图像、如何在 HTML 页面中添加事件处理函数以及如何处理复合组件。
- 通过案例研究 “使用
Dojo 和 DB2 开发 Ajax Web 应用程序”（Leons Petrazickis，developerWorks，2007
年 2 月），学习如何用 IBM DB2 9 for Linux, UNIX, and Windows、XQuery、PHP
和 Dojo JavaScript Framework 快速创建优雅的响应性 Web 应用程序。
- “使用
Ajax 构建应用程序”（Naveen Balani 和 Rajeev Hathi，developerWorks，2005
年 11 月）通过构造一个图书订购应用程序，解释了如何构建基于 Ajax 的 Web 应用程序（包括实时检验，并避免页面刷新）。
- 在
技术书店 浏览关于这些主题和其他技术主题的图书。
获得产品和技术
- 下载
IBM 产品评估版，试用这些来自 DB2®、Lotus®、Rational®、Tivoli®
和 WebSphere® 的应用程序开发工具和中间件产品。
讨论
| 