安全、高速、放心的軟件下載

用Dojo和Ajax創建可重用和可重新發布

時間:2019-05-21 09:21:14來源:www.iimmyzlw.icu人氣:0
歡迎進入.NET社區論壇,與200萬技術人員互動交流 >>進入簡介  事實證明,在現有的應用程序中添加功能是軟件開發中最具挑戰性的任務之一。除了不改變現有的代碼外,還要確保新增的代碼滿足所有易用性和性能需求。在本文中,學習如何在 Web 項目的后期階段引入新功能,以及如何無縫地把修改集成到現有項目中。  本文介紹的方法在軟件開發生命周期的以下階段中尤其有意義:  開發階段。客戶要求開發團隊在產品中集成新功能,從而提高易用性(由于項目采用迭代式的敏捷開發方法,這種情況越來越常見了。)這要求在短時間內對新功能進行快速分析和集成,而且不能破壞應用程序的健壯性和標準。  維護階段。常常需要添加和刪除功能。開發團隊還可能需要為特定的客戶接入或取消某些功能。還常常需要進行其他的定制工作。  分析了這個問題之后,團隊應該開發一個靈活的體系結構,從而支持無縫地添加和刪除功能,而不需要修改產品或應用程序核心功能的代碼。在理想情況下,應該根本不修改屬于核心功能的代碼,因為在這部分代碼的測試和穩定性處理方面已經投入了大量時間。本文中的用例演示如何開發這樣的應用程序,并指出一些挑戰。  用例  一個博客應用程序已經開發完并投入使用了。但是,客戶又提出了一項新要求:在博客系統中增加郵件功能。客戶已經有一個郵件服務器,希望以某種方式把這兩個應用程序集成起來。客戶希望:  每當用戶單擊有效的 URL 時,都給他們提供一個窗口。  這個窗口包含郵件組件提供的所有選項。  郵件窗口可以向郵件服務器發送郵件。  挑戰  開發團隊不愿意為了添加郵件功能而修改博客系統的核心功能,因為這樣做的風險太大了。如果開發團隊在開發核心功能時使用了第三方軟件,而這些軟件不允許他們修改源代碼,那么情況就更加麻煩了。另外,管理人員也反對修改現有的表示層和業務層。   解決方案  開發團隊可以選用兩種方法。圖 1 展示了核心功能和新功能并不緊密集成的方法;體系結構使新功能與核心功能松散地耦合:  圖 1. 核心功能和新功能并不緊密集成        圖 2 展示了核心功能和新功能緊密集成的方法;在這個體系結構中,新功能成為核心功能的固有部分。  圖 2. 核心功能和新功能緊密集成    開發團隊決定采用第一種方法(圖 1)。這種方法具備與松散耦合體系結構相關的所有優點,比如代碼可重用性,而且限制了測試所需的工作量。  他們將使用 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 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.*/  根據目錄結構的不同,可能需要像清單 2 這樣調用清單 1:  清單 2. 調用清單 1 中的功能addOnJsFiles(js/dojo/dojo.js); /* Take care of the directory structure */  通過一個解析機制,可以找到用戶在屏幕上輸入的任何電子郵件地址。可以使用 JavaScript 的正則表達式完成這個任務,如清單 3 所示:  清單 3. 搜索所有有效的電子郵件模式var email = /(([a-zA-Z0-9_-])[email protected](([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 組件),并在不修改原來的代碼的情況下把它集成到主應用程序中。這種開發戰略的優點包括:  不同的團隊可以分別開發項目的各個獨立部分,這樣就可以同時開發不同的模塊。這種開發方式支持開發和集成獨立且可重新發布的代碼。  顯著降低測試和接受代碼所需的工作量。測試人員只需關注要集成的新功能,而不需要重新測試整個應用程序。  可以根據業務需求進行靈活的定制。可以在任何時候添加或刪除功能。
網友評論
刮刮乐怎么做