用 Dojo 和 Ajax 创建可重用和可重新发布的组件

在本文中， 学习如何用 Dojo 和 Ajax  开发可以与核心应用程序轻松集成的可重用组件。本文通过一个逐步的示例讲解如何 开发一个可以向现有博客应用程序添加邮件功能的 Web 应用程序、生成邮件组件并处理复杂的跨域通信。

• 开发阶段。客户要求开发团队在产品中集成新功能，从而提高易用性（由于项目采用迭代式的敏捷开发方法，这种情况越来越常见了。）这要求在短时间内对新功能进行快速分析和集成，而且不能破坏应用程序的健壮性和标准。
• 维护阶段。常常需要添加和删除功能。开发团队还可能需要为特定的客户接入或取消某些功能。还常常需要进行其他的定制工作。

分析了这个问题之后，团队应该开发一个灵活的体系结构，从而支持无缝地添加和删除功能，而不需要修改产品或应用程序核心功能的代码。在理想情况下，应该根本不修改属于核心功能的代码，因为在这部分代码的测试和稳定性处理方面已经投入了大量时间。本文中的用例演示如何开发这样的应用程序，并指出一些挑战。

用例

developerWorks Ajax 资源中心 
请访问 Ajax 资源中心，这是与开发 Ajax 应用程序相关的免费工具、代码和信息的一站式中心。活跃的 Ajax 社区论坛 由 Ajax 专家 Jack Herrington 主持，这里的同行或许可以帮助您解答疑问。  

一个博客应用程序已经开发完并投入使用了。但是，客户又提出了一项新要求：在博客系统中增加邮件功能。客户已经有一个邮件服务器，希望以某种方式把这两个应用程序集成起来。客户希望： 

每当用户单击有效的 URL 时，都给他们提供一个窗口。 
这个窗口包含邮件组件提供的所有选项。 
邮件窗口可以向邮件服务器发送邮件。 

挑战

开发团队不愿意为了添加邮件功能而修改博客系统的核心功能，因为这样做的风险太大了。如果开发团队在开发核心功能时使用了第三方软件，而这些软件不允许他们修改源代码，那么情况就更加麻烦了。另外，管理人员也反对修改现有的表示层和业务层。

解决方案

开发团队可以选用两种方法。图 1 展示了核心功能和新功能并不紧密集成的方法；体系结构使新功能与核心功能松散地耦合：


图 1. 核心功能和新功能并不紧密集成


图 2 展示了核心功能和新功能紧密集成的方法；在这个体系结构中，新功能成为核心功能的固有部分。


图 2. 核心功能和新功能紧密集成


开发团队决定采用第一种方法（图 1）。这种方法具备与松散耦合体系结构相关的所有优点，比如代码可重用性，而且限制了测试所需的工作量。  Dojo
Dojo（即 Unified toolkit）是一个用 JavaScript 编写的开放源码 DHTML 工具包。可以使用 Dojo 在 Web 页面和支持 JavaScript 的任何其他环境中轻松地构建动态功能。通过使用 Dojo 提供的组件，可以提高 Web 站点的易用性、响应性和功能性。可以轻松地构建可分解的用户界面，快速地构建交互式组件和转换。可以使用 Dojo 提供的低级 API 和兼容性层编写可移植的 JavaScript 并简化复杂的脚本。Dojo 提供多个入口点和很有前景的 API，独立于解释器，而且非常关注消除使用方面的障碍。在 参考资料 中可以找到更多信息。 

他们将使用 Dojo 开发组件并以松散耦合方式把它们集成到主应用程序中。他们选择 Dojo 是因为： 

Dojo 是基于 JavaScript 的工具包，能够满足对集成简便性的需求。只需包含 JavaScript，开发人员就可以享受到一个强大 API 带来的好处，这个 API 对于大多数开发任务应该足够了。它使团队能够开发出功能丰富、外观漂亮的组件，而且很容易把这些组件集成到应用程序中。

Dojo 支持 Ajax，这意味着应用程序的响应性更好，总体效率更高。更重要的是，可以与主应用程序非常快速地交互。 
Ajax 是一种用来创建交互式 Web 应用程序的 Web 开发技术。它在幕后与服务器交换少量数据，这样就不必在用户每次发出请求时都重新装载整个 Web 页面，从而使 Web 页面显得响应性更好。这种技术会增加 Web 页面的交互性、速度、功能和易用性。关于 Ajax 的更多信息参见 参考资料。 


添加 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
        */
}