標簽‘dojo’

Ajax應用事件處理及瀏覽器內存泄漏實踐

事件處理是 Ajax 應用中的重要組成部分,也是應用動態變化的源動力。本文詳細介紹了瀏覽器中的事件處理相關的內容,包括注冊事件監聽器、事件發生之后的傳播機制、編寫事件監聽器等,還介紹了 Dojo 對事件處理提供的支持。最后介紹了與瀏覽器內存泄露和性能相關的最佳實踐。

瀏覽器中的事件是 Ajax 應用動態變化的源動力。用戶通過輸入設備(主要是鍵盤和鼠標)與應用進行互動。對于用戶不同的動作,如點擊鼠標左鍵、右鍵、或是按下鍵盤上的回車鍵,瀏覽器會產生與之對應的事件。這些事件按照一定的規則在當前文檔樹中傳播。應用可以根據自己的需要,對特定的事件進行處理,以響應用戶的動作。這種事件驅動的方式,不僅在 Web 應用中被使用,在桌面應用中也廣泛流行。本文詳細介紹了瀏覽器中事件處理的各個方面,包括事件監聽器的注冊、事件的傳播、事件處理和其它高級話題。本文還介紹了如何使用 Dojo 提供的 dojo.connect()。本文中使用的 Dojo 版本是 1.4。下面首先介紹如何注冊事件監聽器。

注冊事件監聽器

注冊事件監聽器的目的是在事件發生的時候添加相應的處理邏輯。瀏覽器中的事件處理采用經典的觀察者(Observer)設計模式。對于可能產生的各種事件,Ajax 應用通過腳本在節點上關注自己感興趣的事件,并添加相應的處理邏輯。當相應的事件發生并傳播到監聽器注冊的節點時,處理邏輯會被調用。 查看更多...

兩種方式使用Dojox.grid.DataGrid

Dojo的widget機制設計的很不錯,默認提供了很多好用的widget,其中DataGrid就是最常用的一種,正常情況下,很多人會選擇使用聲明式的引入,就是在頁面上寫入任意html標簽,指定dojoType為Dojox.grid.DataGrid,當然,既然是widget,也就支持另外一種方式,也是我比較喜歡用的方式,即編程式引入。

第一種

先通過引入dojo.data.ItemFileWriteStore,構建test_store,簡單的理解,即數據源,對應DataGrid的store。dojo的dojo.data.ItemFileWriteStore可以方便的使用ajax請求的相應數據。下面是示例代碼: 查看更多...

細談可刷新Ajax無刷新應用的構建及原理

想必看標題就有一大部分朋友懵了,其實這個標題完全沒有錯,我要說的就是目前流行的ajax應用的構建。眾所周知,ajax應用的核心就是使用javascript異步調用XmlHttp發送請求并接收數據,然后在前臺進行局部刷新,從而達到無刷新改變頁面內容的效果。但在很多場合,如果使用大量的ajax,雖然可以使應用使用體驗更佳,卻避免不了用戶因為各種因素而進行的全局刷新。

舉個例子,有個文章管理頁面,完全是由ajax實現的,在默認情況下顯示文章列表,點擊某按鈕或鏈接的情況下異步加載了文章添加的界面,此時如果用戶刷新了頁面,先不說已經寫下的內容,頁面是不是又回到了列表狀態呢?沒錯,這就是我要說的問題。

其實之前就有過此類困擾,后來為了兼顧各方面靈活性,就采用了多頁面的方式,部分地方還使用了iframe。最近又做項目使用了大量ajax,同理,遇到同樣的問題。 查看更多...

dojo實現的兩種拖拽方式(拖動、拖放)

Web2.0的時代,網頁中常常會用到拖拽的效果,這里了解下使用dojo來實現拖拽。在開始嘗試了解dojo拖拽效果以前,必須明確拖拽具有兩種截然不同的表現效果。

第一種表現效果是圖標被拖拽到哪里,其就會被直接放到哪里,這個拖拽效果是圖標完全緊跟拖拽的動作,與每一個拖拽動作的運動軌跡完全契合,這種效果被稱為“ 拖動”。第二種表現效果是當圖標被拖拽到一個地方,松開鼠標的時候,圖標會以當前位置為基礎而以其它圖標為參照系進行位置的自動調整。這種效果被稱為“拖放”。

dojo的拖動

“拖動”與“拖放”相比較,原理更加容易理解,使用更加簡單。而且更加貼近于人們直觀印象中的“拖拽”效果。

最簡單的拖動實例

要在 dojo 的支持下,實現拖動的效果所需要的只是使用 dojo 所提供的 dojo 標簽屬性標注出希望實現拖動效果的實體。 查看更多...

dojo widget生命周期及使用詳解

dojowidgetDojo所開發的控件具有很強的內聚性和面向對象性。dojo的dijit._widget是dojo提供的圖形界面組件庫。

首先從dijit組件的核心類dijit._Widget開始
dijit._Widget是所以dijit組件的父類,dijit默認提供的組件和自己開發的組件都要繼承此類。dijit._Widget提供了對組件生命周期的管理。dijit組件生命周期管理在實現的時候使用了template method設計方式。dijit._Widget的create()方法定義了默認模版。開發人員也可以覆蓋create()方法,提供一套不同的生命周期實現。dijit定義的生命周期實現:

圖中橢圓行的三個方法是dijit提供的擴展點,用戶可以自己覆蓋這些方法。 查看更多...

dojo.io.iframe異步發送form數據包

今天在使用dojo進行異步請求動作的同時,加入了一個文件上傳,由于不想引入struts等框架,采用了古老的jspsmartupload,結果用xhrPost異步提交時無論如何都沒有反應,鑒于公司限網,只好回家查資料了。搜索一番發現dojo中想異步上傳數據包,有一個專門的方法,就是使用dojo.io.iframe。

這里,順帶提一下dojo的XHR,XHR框架是dojo對ajax支持的一組方法,允許想服務器端發出get、post、put、delete請求,這些方法包括:xhrGet、xhrPost、xhrPut、xhrDelete。具體在前面轉載的文章《用Dojo實現XHR、跨域、及其他Ajax請求》中描述的很清楚,有需要的可以去了解。
這里需要注意,所有這些函數都遵守相同的語法:接受一個屬性配置對象作為參數。在這些對象中您可以定義您想要發出的Ajax請求的各個方面。再一次說明,這些選項在所有XHR函數中都是一樣的。 查看更多...

Dojo基本DOM操作函數記錄

最近接觸dojo,發現dojo很強大了,但沒有系統學習過dojo,用起來還是很吃力,譬如不知道基礎的dom操作等,都得找文檔臨時學習。總體來說,dojo目前的寫法類似于extjs,但又不局限于extjs之類的框架。下面分享一下基礎的dom操作函數及說明。

基本的DOM操作只是用到了dojo的核心文件.使用dojo.query將返回一個匹配到的節點數組dojo.Nodelist, 這個數組內建了一些常用的方法. 可以操作DOM

使用dojo的方法:

dojo.ready(function(){
	//TODO
});

TODO部分實現你想要的dojo操作。
查看更多...

用Dojo實現XHR、跨域、及其他Ajax請求

工作之余,收集了dojo的入門知識,以便以后查用。下面是用Dojo實現XHR、跨域、及其他Ajax請求的介紹,希望有用。

在任何瀏覽器上方便地實現Ajax請求是每一個Ajax框架的初衷。Dojo在這方面無疑提供了非常豐富的支持。除了XMLHttpRequest之外,動態script、iframe、RPC也應有盡有,并且接口統一,使用方便,大多數情況下都只需要一句話就能達到目的,從而免除重復造輪子的麻煩。而且,Dojo一貫追求的概念完整性也在這里有所體現,換句話說,在使用Dojo的Ajax工具的過程中不會感到任何的不自然,相反更容易有觸類旁通的感覺,因為API的模式是統一的,而且這里涉及到的某些概念(如Deferred對象)也貫穿在整個Dojo之中。

Dojo的XHR函數

Dojo的XMLHttpRequest函數就叫dojo.xhr,除了把自己取名美元符號之外,這好像是最直接的辦法了。它定義在Dojo基本庫里,所以不需要額外的require就能使用。它可以實現任何同域內的http請求。不過更常用的是dojo.xhrGet和dojo.xhrPost,它們只不過是對dojo.xhr函數的簡單封裝;當然根據REST風格,還有dojo.xhrPut和dojo.xhrDelete。 查看更多...

黑龙江22选5开奖