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

look_w

简介事实证明，在现有的应用程序中添加功能是软件开发中最具挑战性的任务之一。除了不改变现有的代码外，还要确保新增的代码满足所有易用性和性能需求。在本文中，学习如何在 Web 项目的后期阶段引入新功能，以及如何无缝地把修改集成到现有项目中。
本文介绍的方法在软件开发生命周期的以下阶段中尤其有意义：

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

分析了这个问题之后，团队应该开发一个灵活的体系结构，从而支持无缝地添加和删除功能，而不需要修改产品或应用程序核心功能的代码。在理想情况下，应该根本不修改属于核心功能的代码，因为在这部分代码的测试和稳定性处理方面已经投入了大量时间。本文中的用例演示如何开发这样的应用程序，并指出一些挑战。
用例developerWorks Ajax 资源中心
请访问 ，这是与开发 Ajax 应用程序相关的免费工具、代码和信息的一站式中心。 由 Ajax 专家 Jack Herrington 主持，这里的同行或许可以帮助您解答疑问。

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

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

挑战开发团队不愿意为了添加邮件功能而修改博客系统的核心功能，因为这样做的风险太大了。如果开发团队在开发核心功能时使用了第三方软件，而这些软件不允许他们修改源代码，那么情况就更加麻烦了。另外，管理人员也反对修改现有的表示层和业务层。
解决方案开发团队可以选用两种方法。图 1 展示了核心功能和新功能并不紧密集成的方法；体系结构使新功能与核心功能松散地耦合：
图 1. 核心功能和新功能并不紧密集成图 2 展示了核心功能和新功能紧密集成的方法；在这个体系结构中，新功能成为核心功能的固有部分。
图 2. 核心功能和新功能紧密集成DojoDojo（即 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 的包含

  1 2 3 4 5 6 7 8 9 10 11 12 13

  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.*/