1. 程式人生 > >部分Dojo常用函式簡介(三)——頁面生命週期及DOM相關常用函式

部分Dojo常用函式簡介(三)——頁面生命週期及DOM相關常用函式

每個Ajax 框架都對Javascript 做了擴充套件,提供了很多常用函式,增強了 Javascript 的開發效率。在這裡將對部分Dojo 中的常用函式做簡單的介紹。由於Dojo的常用函式較多,也為方便大家閱讀,將這些常用函式分為了五個類別分別進行介紹。本文將介紹第三部分的內容:頁面生命週期及DOM相關常用函式。

* 本系列博文的絕大多數內容來自於對dojocampus.org上的dojo reference guide文件的翻譯,在此也特別感謝文件的翻譯者們:Fei Jia, Zhu Xiao Wen, Li Wen Bing, Zhang Jun, Hu Kuang, Huang Wei, Wu Min Qi, Mo Ying, Cheng Fu, Zhong Si Qi

dojo.addOnLoad

如果想用好dojo,必須熟悉Dojo.addOnLoad,它提供了一種機制使作為引數傳入該函式的語句及其他函式可以在整個頁面的DOM載入完成之後執行。常見的一種情況是:

這段JS程式碼會無法正確執行,因為在js執行時,”other”還未被定義。當然,你可以把這段JS程式碼放在頁面最後,但這樣做並不符合正常的HTML編寫方式,而且在另一些情況下,也會對你的程式碼造成部分影響。


對於這類情況,你就可以使用dojo.addOnLoad(...):

或者:

dojo.addOnUnload

與dojo.addOnLoad(...)相呼應,Dojo.addOnUnload用於註冊函式在頁面銷燬時執行。

dojo.query

在進行DOM相關操作時,很多時候需要查詢特定的DOM節點,使用瀏覽器原生的DOM API進行查詢不僅需要寫較多的程式碼,而且很多時候效率十分低下,dojo.query則提供了一個更快、更方便的方式來對DOM節點進行查詢。


Dojo.query接收兩個引數,第一個為一個字串,是通過一些基於CSS3標準的屬性查詢模板,第二個引數為可選引數,為一個DOM節點物件或節點ID,為查詢設定範圍。


由於dojo.query採用的是CSS3標準查詢模板,當你想用dojo.query進行DOM查詢時,你可以在任何的CSS文件中找到正確的查詢條件模板,下面的示例是一些簡單的查詢呼叫:

dojo.byId,dojo.doc, dojo.body

dojo.byId用途與document.getElementById一致:根據DOM節點的ID返回DOM節點物件,但簡短了許多,在所有的瀏覽器下都是有效的。

dojo.doc相當於windows[“document”]的值,該函式的作用主要有兩個。首先它提供了一個指向當前文件物件的更為簡潔的引用。其次,所有使用 dojo.doc 的引用,只需要通過改變dojo.doc變數的值,就可以臨時切換到其它的文件物件作用域上。使用這個變數來替代對 window.document 的使用。通過這種方式可以確保是在當前頁面的文件物件上工作。另外,通過使用此變數,當文件物件發生改變的時候,與文件物件相關的操作還能正確執行。這點對於需要在iframe中執行的Dijit元件來說尤為重要。


dojo.body用於返回當前文件的body物件。

dojo.create,dojo.place

dojo.create()可以簡化在維護DOM時經常需要頻繁執行的一系列操作步驟,例如:  新建DOM節點/給已存在的節點賦予新的屬性 –> 為其設定屬性 -> 將其置於DOM樹上。

該函式接受四個引數: dojo.create(tag, attrs, refNode, pos);

tag可以是字串或DOM節點。如果是字串,函式會將其視作節點的標籤名,以此來新建節點。建立節點時,會以refNode作為父節點。如果refNode為null或並未指定,則預設以dojo.doc作為父節點。

attrs是一個JavaScript物件,其中包含了用以賦予節點的一組屬性資訊。該引數會在節點建立成功後被原封不動的傳給dojo.attr。attrs引數可以null,也可以不指定,亦即“不設定任何屬性”,但是假如你想指定函式餘下的傳入引數,則應該為其顯示的指定null值。

refNode,如之前提到的,作為建立節點的父節點物件,該引數為DOM節點物件或節點的ID。此引數可以省略,即表示“不立即安置該節點”。

pos為可選引數。取值可以是數字,或如下字串之一:"before", "after", "replace", "only", "first", 或"last"。如果省略,則預設取"last"。表示安置建立的節點到給定的位置上。

若第一個引數傳入的是``tag``字串,則函式成功執行後會返回以該字串命名的DOM節點,若傳入的是DOM節點,則直接將其作為結果返回。例如, 新建一個帶href屬性的超連結標記,將其置於<body>下:

dojo.place函式用於放置給定的DOM節點到指定的位置上。在某些場合下,根據HTML片段來建立和安置節點也許會更容易一些,我們無需為節點設定任何屬性,或是將其指定為某個HTML片段的一部分,則可以考慮使用dojo.place:

dojo.destroy

dojo.destroy用於將當前節點從其父節點中刪除,並逐一銷燬自身及其所屬的全部子節點。該函式僅對DOM節點有效,並且沒有返回值。

dojo.attr, dojo.hasAttr, dojo.removeAttr

Dojo.attr提供了獲取或修改(增加)DOM節點屬性的、事件、CSS樣式的方法,它既可作為getter也可作為setter。Dojo.attr包括三個引數:

node:要進行操作的 DOM節點物件或其ID


attr:要進行操作的DOM節點屬性名,或一個包含鍵值對的JSON物件,用於為DOM節點設定其中包括的所有屬性


value,為可選引數,如果attr引數為某一屬性名,且傳入value引數,則為該節點設定相應屬性,如果未傳入value引數,則返回該節點的attr屬性值,如果該節點沒有該屬性,則返回false。


dojo.hasAttr用於檢查給定的DOM節點是否有給定的屬性值,如果有則返回true,否則返回false:

dojo.removeAttr用於移除給定節點給定節點的給定屬性:

dojo.position,dojo.marginBox, dojo.contentBox

Dojo.position用於獲取給定DOM節點的絕對位置及大小資訊(包括邊界 - border)。返回值為一個JSON物件:{ w: 300: h: 150, x: 700, y: 900, },分別表示w:寬度,h:高度,x:X座標值,y:Y座標值,單位都為px。


該函式接受兩個引數:


node: 要獲取資訊的 DOM節點物件或其ID


includeScroll:該引數為一個boolean值,預設為false,當設為true時,返回的x及y則為相對於整個document文件的位置值(忽略滾動條)。


dojo.marginBox和dojo.contentBox都可以用於獲取和設定給定節點的大小,第一個引數為給定的DOM節點,第二個引數為可選引數,是一個類似於{ l: 50, t: 200, w: 300: h: 150 }的JSON物件,如果傳入第二個引數,則將給定節點設定新的位置、大小。區別在於marginBox包括了節點的margin大小,它們的返回值都為一個物件:{ l: 50, t: 200, w: 300: h: 150 }。

Dojo.style

用於獲取或設定DOM節點的樣式。該函式接收3個引數:



node:要進行操作的 DOM節點物件或其ID


style:要進行操作的DOM節點樣式屬性名,或一個包含鍵值對的JSON物件,用於為DOM節點設定其中包括的所有樣式


value:為可選引數,如果style引數為某一樣式屬性名,且傳入value引數,則為該節點設定相應樣式,如果未傳入value引數,則返回該節點的style樣式值。

dojo.hasClass, dojo.addClass, dojo.toggleClass

dojo.hasClass用於判斷給定的DOM節點是否有指定的CSS class


dojo.addClass用於為給定的DOM節點增加指定的CSS class


以上兩個函式都接受2個引數:


要進行操作的 DOM節點物件或其ID;一個CSS class名稱字串:

dojo.toggleClass用於為給定的DOM節點新增或刪除指定的CSS class。此函式接受3個引數:


node: 要進行操作的 DOM節點物件或其ID


class: 一個CSS class名稱字串。


condition:可選引數,為boolean值。如果給定該引數,當該 引數為TRUE時,操作為新增class,為false時操作為刪除class。如果該引數未被指定,如果給定的DOM節點沒有給定的class則為其新增,否則刪除給定的class。

以上就是部分Dojo的頁面生命週期及DOM相關常用函式,在下一部分中,會介紹關於Dojo對於String及Array物件的一些擴充套件函式。