知识大全用Dojo和Ajax创建可重用和可重新发布

Posted 2022-07-14 知

篇首语：见君一眼，倾卿一心，误我一生，伤我一心。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全用Dojo和Ajax创建可重用和可重新发布相关的知识，希望对你有一定的参考价值。

用Dojo和Ajax创建可重用和可重新发布 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　简介

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

　　本文介绍的方法在软件开发生命周期的以下阶段中尤其有意义

　　开发阶段客户要求开发团队在产品中集成新功能从而提高易用性（由于项目采用迭代式的敏捷开发方法这种情况越来越常见了）这要求在短时间内对新功能进行快速分析和集成而且不能破坏应用程序的健壮性和标准

　　维护阶段常常需要添加和删除功能开发团队还可能需要为特定的客户接入或取消某些功能还常常需要进行其他的定制工作

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

　　用例

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

　　每当用户单击有效的 URL 时都给他们提供一个窗口

　　这个窗口包含邮件组件提供的所有选项

　　邮件窗口可以向邮件服务器发送邮件

　　挑战

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

　　解决方案

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

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

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

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

　　开发团队决定采用第一种方法（图）这种方法具备与松散耦合体系结构相关的所有优点比如代码可重用性而且限制了测试所需的工作量

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

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

　　Dojo 支持 Ajax 这意味着应用程序的响应性更好总体效率更高更重要的是可以与主应用程序非常快速地交互

　　Ajax 是一种用来创建交互式 Web 应用程序的 Web 开发技术它在幕后与服务器交换少量数据这样就不必在用户每次发出请求时都重新装载整个 Web 页面从而使 Web 页面显得响应性更好这种技术会增加 Web 页面的交互性速度功能和易用性关于 Ajax 的更多信息参见参考资料

　　添加 Dojo 组件

　　首先需要设置 Dojo（设置方法参见参考资料）在设置 Dojo 之后

　　需要创建一个 js 文件这个文件将包含后面编写的大多数代码在插入所需的功能时只需把这个 js 包含在表示层（jsp HTML 等等）中

　　为了避免在表示层中包含 Dojo 库应该在步骤中创建的 js 文件中包含它们清单给出的示例代码启用了 dojo js 的包含

　　清单启用 dojo js 的包含

　　function addOnJsFiles(file)　　var scriptTag= document createElement( script );　　scriptTag src　= file;　　scriptTag type = text/javascript ;　　scriptTag defer = true;　　document getElementsByTagName( head em( ) appendChild(scriptTag);/*Take special care that you have not included the dojo js in the jsp also as thisis known to cause problem in IE though it works fine with Firefox If　you haveincluded both dojo js and the js file in which this function is to implemented you should remove inclusion of dojo js from jsp file */

　　根据目录结构的不同可能需要像清单这样调用清单

　　清单调用清单中的功能

　　addOnJsFiles( js/dojo/dojo js );　/* Take care of the directory structure */

　　通过一个解析机制可以找到用户在屏幕上输入的任何电子邮件地址可以使用 JavaScript 的正则表达式完成这个任务如清单所示

　　清单搜索所有有效的电子邮件模式

　　var email = /(([a zA Z _ ])+@(([a zA Z ])+ )+([a zA Z ] )+)/g

　　编写一个代码片段把电子邮件地址包围在一个标签标记中如清单所示

　　清单替换所有有效的电子邮件模式

　　var Content = document body innerHTML;Content=Content replace(email <label onclick=　　 sendmail( $ ) >$ </label> );document body innerHTML=Content;

　　使用 sendmail 函数包含用来创建和显示 Dojo 组件的主业务逻辑和代码根据使用的组件和 API 包含组件所需的文件清单给出一个示例

　　清单包含必需的包

　　dojo require( dojo widget * );dojo require( dojo event * );dojo require( dojo widget Button );dojo require( dojo widget Editor );dojo require( dojo widget Textbox );

　　即使只需包含特定的组件库（比如 dojo widget Button）也必须包含 dojo widget * 等包这种方式与 Java 和其他语言不一样 dojo require 方法将动态地获取 JavaScript 代码并把它们装载到页面中如果没有包含 dojo widget * 和 dojo widget Button 就会遇到一个运行时异常因为还没有装载通用的组件库

　　Dojo 提供两种创建组件的方法

　　在构造函数中传递组件的父 id（见清单）这里的父是指组件将连接的 DOM 元素

　　清单创建 Dojo 组件

　　var tmpDiv = document getElementById(divid);var FloatingPaneWidget = dojo widget createWidget( FloatingPane 　　　　　　id: pane windowState: minimized 　　　　title: Send Email hasShadow: true 　　　　resizable: true displayMinimizeAction: true 　　　　toggle: explode constrainToContainer: false 　　　　tmpDiv);

　　以程序方式创建组件并把它们插入 DOM 结构见清单

　　清单创建 Dojo 组件

　　var newEditor = dojo widget createWidget( Editor );var layoutWinEd = dojo widget createWidget( LayoutContainer 　 layoutAlign: top );layoutWinEd addChild(newEditor);

　　清单在布局容器中添加编辑器为了连接邮件组件可以包含以下代码 FloatingPaneWidget addChild(layoutWinEd );

　　为了添加业务逻辑（用来发送电子邮件的实际代码） Dojo 允许把定制的方法与工具包提供的基本方法连接在一起连接定制方法所用的代码如下 nnect(SubmitButtonId onClick codeForSendingMail );

　　编写处理 onclick 事件的函数见清单

　　清单处理事件的示例代码

　　function codeForSendingMail () 　　alert( Special handling for onclick );　　 Your logic goes here

　　最后显示组件 dojo widget byId( pane ) show();

　　为了异步地提交数据需要使用 dojo io 库这个库提供一个相当简单的接口可以通过 bind 方法异步地提交表单数据清单给出一个示例

　　清单处理事件

　　var myform = dojo byId( myform );dojo io bind(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 函数中包含 dojo io XhrIframeProxy 这个库完成所有 Iframe 工作 dojo require( dojo io XhrIframeProxy );

　　清单 Dojo 的绑定调用

　　dojo io bind(　IframeProxyUrl: 　url: 　content:　　　To:toVal From: fromVal CC: ccVal BCC:bccVal Subject: subVal Message:　　　 messageText　　load: showSucessMessage 　　　　　　　　　　　error: showErrorMessage 　method: POST 　mimetype: text/ );

　　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 组件）并在不修改原来的代码的情况下把它集成到主应用程序中这种开发战略的优点包括

　　不同的团队可以分别开发项目的各个独立部分这样就可以同时开发不同的模块这种开发方式支持开发和集成独立且可重新发布的代码

　　显著降低测试和接受代码所需的工作量测试人员只需关注要集成的新功能而不需要重新测试整个应用程序

cha138/Article/program/net/201311/13756

知识大全 用Dojo和Ajax创建可重用和可重新发布

知识大全用Dojo和Ajax创建可重用和可重新发布