Dojo學習筆記 理解 WidgetBase

2021-06-12 19:50:10 字數 3693 閱讀 7279

難度:中級 dojo版本:1.8

原文:

參考:深入理解_widgetbase

開始

dijit的基礎以及建立自定義部件的能力,很大程度上依賴於乙個定義在

dijit/_widgetbase模組的基類,這是使用dojo建立任何種類的自定義部件時都要用到的。

注意早期的dijit/_widget模組繼承了dijit/_widgetbase,但是在自定義部件時推薦直接繼承dijit/_widgetbase。

理解部件的生命週期是理解dijit系統最重要的一點,主要是指從部件的建立,到完全可為應用所用,再到銷毀部件和相關的dom節點。

widget和widgetbase前面有下劃線_,是因為它們不直接使用,而是通過dojo的declare機制來繼承。

dijit/_widgetbase定義了兩條主線:一組在建立過程中順序呼叫的方法,以及一種在應用中使用部件時以最小的資料繫結來獲取/設定屬性的方法。

dijit生命週期

任何宣告以

_widgetbase為基類的部件在其實例化過程中都會依次呼叫幾個特定的方法。下面以呼叫順序列出這些方法:

startup

檢視示例

這些方法用於處理以下事情:

postcreate()

建立自定義部件首先最重要的方法是

postcreate。當部件的所有性質已定義,代表該部件的文件結構已建立,但是還沒有加入到主文件時,這個方法被呼叫。這個方法是部件呈現給使用者之前,有機會做最後的調整的主要場所,包括設定任何種類的自定義屬性等等。在開發乙個自定義部件時,大多數(如果不是所有的話)定製發生在這裡。

startup()

dijit生命週期中第二重要的方法就是

startup,用於在任何dom結構實際加入到主文件後被呼叫。在這個方法之前,任何潛在的子部件都已被建立和啟動,這對於如部件布局的復合部件很有用。

注意當以程式設計式方式例項化乙個部件,將其放到文件中之後必須呼叫部件的startup()方法。建立部件後忘記呼叫startup是一種常見的錯誤,這會導致部件顯示不正常。

銷毀方法

dijit/_widgetbase也定義了一些銷毀方法(以呼叫順序列出):

在自定義部件時,任何必要的自定義銷毀行為都應當定義在destroy方法,記得要呼叫

this.inherited(arguments)。dijit可以自動處理節點和大多數物件,使用前面的銷毀方法。

注意雖然destroy是任何部件的核心銷毀方法,但在顯式銷毀乙個部件時建議呼叫destroyrecursive,保證部件自己和任何子部件被銷毀。

節點引用

乙個部件一般是某種使用者介面,具有某種dom結構。

_widgetbase定義了乙個標準性質

domnode,為包括整個部件的父節點的dom節點的引用,如要做些什麼(如在文件中移動整個部件)隨時可以獲取該節點的引用,且在

postcreate方法被呼叫時已存在。 除了

domnode,一些部件也定義了

containernode性質,這是對部件中子節點的引用,其中可能包含內容或是在部件定義外定義的其它部件,例如位於原始源節點中的宣告式例項化的子部件。

該性質存在於所有繼承自dijit/_container的部件。

getter和setter

_widgetbase也提供了許多所有部件需要的預定義的性質,以及一套使用標準的

get和

set方法定義自定義的

getters和

setters的機制,這些在所有部件中都預定義了。可以在**中根據以下的模式定義自定義私有方法來實現:

// for the field "foo" in your widget:

// custom getter

_getfooattr: function(),

// custom setter

_setfooattr: function(value)

若以這種方式定義了自定義方法對,可以在自定義部件的例項中使用_widgetbase的標準get和set方法訪問屬性。例如對於以上的例子可以這麼做:

// assume that the widget instance is "mywidget":

// get the value of "foo":

var value = mywidget.get("foo");

// set the value of "foo":

mywidget.set("foo", somevalue);

該標準允許其它部件和控制**以統一的方式和乙個部件互動,且當乙個欄位被訪問時給予執行自定義邏輯的能力(如對dom片段的修改等),或是呼叫其它方法(如事件處理或通知)。例如,部件有自定義屬性

value,想要在其值改變時通知其它人(可能通過定義的

onchange方法):

// assume our field is called "value":

_setvalueattr: function(value),

// a function designed to work with dojo/on

onchange: function(oldvalue, newvalue)

可見在自定義部件中定製

getter和

setter行為很方便。

注意在定義部件時,應當在任何需要定義自定義邏輯來實現自定義性質的獲取和修改的時候,建立自定義的getter和setter方法。在使用自定義部件時,應當總是使用get()和set()方法訪問字段,以便恰當的使用自定義的getters和setters。另外,定義自定義setter方法時,應當總是使用內部的_set方法來更新內部值,這使得和dojo/stateful的watch功能正確銜接,這也是所有部件都繼承的基類。

獲得控制代碼

_widgetbase提供了註冊為部件所有的控制代碼的方法,這應當用於任何由部件所建立的控制代碼,經常在

postcreate()中監聽

domnode 事件設定。

將控制代碼附加到部件的方法是

.own(),其用法很簡單:

this.own(

on(somedomnode, "click", lang.hitch(this, "myonclickhandler)"),

apsect.after(someobject, "somefunc", lang.hitch(this, "mysomefunchandler)"),

topic.subscribe("/some/topic", function()),

...);

在部件的基礎設施中使用

own()的優點在於在內部部件能跟蹤其所有的控制代碼,保證當部件被銷毀時每個都斷開連線和/或取消訂閱,防止任何種類的記憶體洩漏。

預定義的性質和事件

_widgetbase

提供了一套預定義的性質,以及在適用時合適的

getters和

setters :

于洋的dojo2學習筆記 4 建立widgets

今天我們學習如何建立自定義的小部件 建立乙個根節點 在于洋的dojo2學習筆記 2.第乙個dojo應用 中,我們建立了乙個單節點應用,建立了biz e bodies檢視,這一章,我們要擴充套件一下,增加名字和畫像,虛構的biz e bodies下的工人.在此之前,我們需要做一些重構.我們的應用現在是...

dojo學習筆記(三)

模組 dojo.string.common dojo.string dojo.string.common 和dojo.string 是一樣的,只要 require 其中乙個就可以使用以下方法 dojo.string.trim 去掉字串的空白 usage example s abc dojo.stri...

dojo學習筆記(四)

這裡所說的基礎物件和方法是指的不 require 任何包就能夠呼叫的物件和方法 匿名函式 在開始前,我想介紹一下 js裡的匿名函式,這個在閱讀 dojo 的源 的時候,會發現到處都有匿名函式 function 前面的分號是乙個空語句,是可以不要的 匿名函式。乙個匿名函式就是乙個沒有名字的函式。你可以...