简介
事实证明在现有的应用程序中添加功能是软件开发中最具挑战性的任务之一除了不改变现有的代码外还要确保新增的代码满足所有易用性和性能需求在本文中学习如何在 Web 项目的后期阶段引入新功能以及如何无缝地把修改集成到现有项目中
本文介绍的方法在软件开发生命周期的以下阶段中尤其有意义
开发阶段客户要求开发团队在产品中集成新功能从而提高易用性（由于项目采用迭代式的敏捷开发方法这种情况越来越常见了）这要求在短时间内对新功能进行快速分析和集成而且不能破坏应用程序的健壮性和标准
维护阶段常常需要添加和删除功能开发团队还可能需要为特定的客户接入或取消某些功能还常常需要进行其他的定制工作
分析了这个问题之后团队应该开发一个灵活的体系结构从而支持无缝地添加和删除功能而不需要修改产品或应用程序核心功能的代码在理想情况下应该根本不修改属于核心功能的代码因为在这部分代码的测试和稳定性处理方面已经投入了大量时间本文中的用例演示如何开发这样的应用程序并指出一些挑战
用例
一个博客应用程序已经开发完并投入使用了但是客户又提出了一项新要求在博客系统中增加邮件功能客户已经有一个邮件服务器希望以某种方式把这两个应用程序集成起来客户希望
每当用户单击有效的 URL 时都给他们提供一个窗口
这个窗口包含邮件组件提供的所有选项
邮件窗口可以向邮件服务器发送邮件
挑战
开发团队不愿意为了添加邮件功能而修改博客系统的核心功能因为这样做的风险太大了如果开发团队在开发核心功能时使用了第三方软件而这些软件不允许他们修改源代码那么情况就更加麻烦了另外管理人员也反对修改现有的表示层和业务层
解决方案
开发团队可以选用两种方法图 展示了核心功能和新功能并不紧密集成的方法体系结构使新功能与核心功能松散地耦合
图 核心功能和新功能并不紧密集成
图 展示了核心功能和新功能紧密集成的方法在这个体系结构中新功能成为核心功能的固有部分
图 核心功能和新功能紧密集成
开发团队决定采用第一种方法（图 ）这种方法具备与松散耦合体系结构相关的所有优点比如代码可重用性而且限制了测试所需的工作量
他们将使用 Dojo 开发组件并以松散耦合方式把它们集成到主应用程序中他们选择 Dojo 是因为
Dojo 是基于 JavaScript 的工具包能够满足对集成简便性的需求只需包含 JavaScript开发人员就可以享受到一个强大 API 带来的好处这个 API 对于大多数开发任务应该足够了它使团队能够开发出功能丰富外观漂亮的组件而且很容易把这些组件集成到应用程序中
Dojo 支持 Ajax这意味着应用程序的响应性更好总体效率更高更重要的是可以与主应用程序非常快速地交互
Ajax 是一种用来创建交互式 Web 应用程序的 Web 开发技术它在幕后与服务器交换少量数据这样就不必在用户每次发出请求时都重新装载整个 Web 页面从而使 Web 页面显得响应性更好这种技术会增加 Web 页面的交互性速度功能和易用性关于 Ajax 的更多信息参见 参考资料
添加 Dojo 组件
首先需要设置 Dojo（设置方法参见 参考资料）在设置 Dojo 之后
需要创建一个 js 文件这个文件将包含后面编写的大多数代码在插入所需的功能时只需把这个 js 包含在表示层（jspHTML 等等）中
为了避免在表示层中包含 Dojo 库应该在步骤 中创建的 js 文件中包含它们清单 给出的示例代码启用了 dojojs 的包含
清单 启用 dojojs 的包含
function addOnJsFiles(file)
{
var scriptTag= documentcreateElement(script);
scriptTagsrc= file;
scriptTagtype = text/javascript;
scriptTagdefer = true;
documentgetElementsByTagName(headem()appendChild(scriptTag);
}
/*Take special care that you have not included the dojojs in the jsp also as this
is known to cause problem in IE though it works fine with Firefox Ifyou have
included both dojojs and the js file in which this function is to implemented
you should remove inclusion of dojojs from jsp file*/
根据目录结构的不同可能需要像清单 这样调用清单
清单 调用清单 中的功能
addOnJsFiles(js/dojo/dojojs);
/* Take care of the directory structure */
通过一个解析机制可以找到用户在屏幕上输入的任何电子邮件地址可以使用 JavaScript 的正则表达式完成这个任务如清单 所示
清单 搜索所有有效的电子邮件模式
var email = /(([azAZ_])+@(([azAZ])+)+([azAZ]{})+)/g
编写一个代码片段把电子邮件地址包围在一个标签标记中如清单 所示
清单 替换所有有效的电子邮件模式
var htmlContent = documentbodyinnerHTML;
htmlContent=htmlContentreplace(email <label onclick=
sendmail($)>$</label>);
documentbodyinnerHTML=htmlContent;
使用 sendmail 函数包含用来创建和显示 Dojo 组件的主业务逻辑和代码根据使用的组件和 API包含组件所需的文件清单 给出一个示例
清单 包含必需的包
dojorequire(dojowidget*);
dojorequire(dojoevent*);
dojorequire(dojowidgetButton);
dojorequire(dojowidgetEditor);
dojorequire(dojowidgetTextbox);
即使只需包含特定的组件库（比如 dojowidgetButton）也必须包含 dojowidget* 等包这种方式与 Java 和其他语言不一样dojorequire 方法将动态地获取 JavaScript 代码并把它们装载到页面中如果没有包含 dojowidget* 和 dojowidgetButton就会遇到一个运行时异常因为还没有装载通用的组件库
Dojo 提供两种创建组件的方法
在构造函数中传递组件的父 id（见清单 ）这里的 父 是指组件将连接的 DOM 元素
清单 创建 Dojo 组件
var tmpDiv = documentgetElementById(divid);
var FloatingPaneWidget = dojowidgetcreateWidget(FloatingPane
{
id:panewindowState:minimized
title:Send Email hasShadow: true
resizable:truedisplayMinimizeAction:true
toggle:explodeconstrainToContainer: false
}
tmpDiv);
以程序方式创建组件并把它们插入 DOM 结构见清单
清单 创建 Dojo 组件
var newEditor = dojowidgetcreateWidget(Editor);
var layoutWinEd = dojowidgetcreateWidget(LayoutContainer
{layoutAlign:top});
layoutWinEdaddChild(newEditor);
清单 在布局容器中添加编辑器为了连接邮件组件可以包含以下代码
FloatingPaneWidgetaddChild(layoutWinEd);
为了添加业务逻辑（用来发送电子邮件的实际代码）Dojo 允许把定制的方法与工具包提供的基本方法连接在一起连接定制方法所用的代码如下
nnect(SubmitButtonIdonClick codeForSendingMail);
编写处理 onclick 事件的函数见清单
清单 处理事件的示例代码
function codeForSendingMail () {
alert(Special handling for onclick );
Your logic goes here
}
最后显示组件
dojowidgetbyId(pane)show();
为了异步地提交数据需要使用 dojoio 库这个库提供一个相当简单的接口可以通过 bind 方法异步地提交表单数据清单 给出一个示例
清单 处理事件
var myform = dojobyId(myform);
dojoiobind({
url:
/* This is not required if the form has an action element defined */
formNode: myform
method: thod/* Get or Post */
load: myCallBackFuntion
error: function(type error)
{
alert(Error: + type + n + error);
}
});
Dojo 支持跨域通信因为这个应用程序需要跨不同的域（应用服务器邮件服务器）进行通信所以需要使用 Dojo 的 XhrIframeProxy 库在前面编写的 js 文件中添加清单 中的代码
在 Dojo 的 bind 函数中包含 dojoioXhrIframeProxy这个库完成所有 Iframe 工作
dojorequire(dojoioXhrIframeProxy);
清单 Dojo 的绑定调用
dojoiobind({
IframeProxyUrl:
url:
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 文件 l 应该包含 js 文件或者直接在脚本标记中实现清单 中的函数
清单 远程 HTML 应该包含的函数
function isAllowedRequest(request){
/*
Return true if you want to allow cross domain interaction
else return false
*/
}
结束语
在本文中学习了如何添加一个浮动面板（Dojo 组件）并在不修改原来的代码的情况下把它集成到主应用程序中这种开发战略的优点包括
不同的团队可以分别开发项目的各个独立部分这样就可以同时开发不同的模块这种开发方式支持开发和集成独立且可重新发布的代码
显着降低测试和接受代码所需的工作量测试人员只需关注要集成的新功能而不需要重新测试整个应用程序
可以根据业务需求进行灵活的定制可以在任何时候添加或删除功能
