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提供的擴展點,用戶可以自己覆蓋這些方法。startup方法需要顯示被調用。

組件的connect()綁定事件處理方法。subscribe()監聽事件通知。

另外一個核心類:dijit._Templated
上面提到用buildRendering()創建用戶界面,如果通過DOM操作創建的話比較復雜,dijit._Template提供了一種從HTML模版中創建用戶界面的方式。dijit._Templated是作為一個混入類來使用的。在dojo.declear()定義新組件的時候,dijit._Widget需要作為基類,而dijit._Templated要作為混入類,也就是說在父類聲明中dijit._Widget需要作為第一個出現,否則會出錯。

可以通過templateString 和templatePath兩種方式指定使用的模版。

可以通過設定widgetInTemplate的值為true來聲明該dijit組件包含其他組件。這些包含的組件在destroy方法中被銷毀。

在模版中可以使用dojoAttachPoint和dojoAttachEvent兩個特殊的DOM節點屬性。dojoAttachPoint屬性的值是當前DOM節點,dojoAttachEvent屬性的值來完成事件處理綁定。

下一個核心類:dijit._Container
dijit._Container提供了管理子組件的功能。它所提供的方法有:
addChild(widget,insertIndex);
removeChild(widget);
getChildren();包含子組件的數組。
hasChildren();是否包含子組件。
getIndexOfChild();

需要注意:dijit._COntianer只能包含dijit組件,也就是必須繼承子dijit._Widget,不能包含普通的DOM組件。對于DOM節點可以用dijit.layout.pane封裝之后,再添加到dijit._Container中。

下面介紹如何對dijit組件進行管理:
dojo會負責維護當前頁面上所有dijit組件的一個注冊表。里面包含了所有的dijit組件對象,可以通過dijit.registry來訪問,它是一個dijit.WidgetSet類的實例。dijit.WidgetSet實際上是一個dijit組件的對象表。通過ID可以查到組件對象。
它提供的方法有:
add(widget);
remove(id);
byId(id);
byClass(cls);

dijit.registry.byClass("dijit.form.Button");返回頁面上所有的dijit.form.button組件,返回的是一個新WidgetSet對象。
toArray();返回包含所有組件對象的數組。
forEach();filter();map();every();some();這些與dojo基本庫方法是相同的。
在管理組件的時候需要注意ID的重復。

在介紹完dijit組件管理之后,下面介紹實例化dijit組件的兩種方法

實例化有兩種方式,聲明式和編程式。

聲明式:是指在HTML代碼中以描述的方式來定義dijit組件,由dojo運行時把這些聲明的這些組件實例化。
編程式:是在代碼中以顯示的new來實例化。實例化一個dijit組件需要兩個參數,第一個是混入到組件實例中的包含配置屬性的javascript對象,第二個參數則是組件所使用的DOM節點。這兩個方式的不同在于如何提供者兩個參數值。

組件生命周期

組件的生命周期指的是某一個組件從創建到銷毀的存續階段。理解在各個階段被調用的函數有助于自定義組件或繼承組件的功能擴展。
constructor():
構造函數,在使用new操作時被調用,發生在參數被混合進組件實例之前,主要用于狀態、屬性的初始化。
參數被混合進組件實例:
如果使用標簽化實現或編程實現來實例化一個組件類的時候,傳入參數,比如<button dojoType="dijit.form.Button" iconClass ="">或new dijit.form.Button({iconClass: ""}),該階段沒有關聯特殊的函數,但我們可以使用傳入的這些參數值。

postMixInProperties()自定義屬性:
使用自定義屬性,如果在你的widget里面需要自定義屬性。該函數會在該組件對應DOM節點創建前被調用。可以通過參數傳入一個包含各種屬性的javascript對象,這些屬性被混入到dijit組件中,可以通過this調用。當混入完成之后,在創建dijit組件界面之前,還可以加入自己的業務。

buildRendering()創建其外觀:
該方法用來創建dijit組件的用戶界面,即DOM節點,該方法完成時候,this.domNode指向的是剛創建的DOM節點。

postCreate()快速創建:
被自定義組件經常使用的一個函數。當DOM節點被創建完成之后,此方法被調用。需要注意的是,這個時候組件的DOM節點還沒有被添加到當前頁面文檔樹。一般用來添加添加組件相關的邏輯。

startup()如果要創建一個孩子widget:
在建立了一個父組件后,還需要添加若干子組件(這里的子組件不是表示繼承關系,而是表示包含關系),并希望全部加載后一起展現時,就可以調用該函數。

一個關于該函數的最佳實踐就是即使沒有子組件,也對一個組件新建實例調用該函數,
destroy():
dijit組件的銷毀過程比較復雜。組件實例的銷毀,占用資源的釋放。包括該組件的DOM節點,類似C語言里的析構函數。dijit._Widget提供了多個以destroy為前綴的方法,如destroyRecursive()用于某組件以及其內部包含的子組件(這里的子組件含義同startup處的說明)的銷毀。

PS:在某個函數需要覆蓋的所有情況下,都繼承執行父類的該函數,形如:

postCreate: function() {
this.inherited("postCreate", arguments);
}

轉載自:http://blog.csdn.net/lfsfxy9/article/details/7385669

dojo widget生命周期及使用詳解
文章《dojo widget生命周期及使用詳解》二維碼
  • 微信打賞
  • 支付寶打賞

暫無評論

(必填)

(必填)

(可選)

黑龙江22选5开奖