DOJO API 中文參考手冊

DOJO API 中文參考手冊

 

Dojo 體系架構總體上來看是一個分層的體系架構。最下面的一層是包系統，Dojo API 的結構與 Java 很類似，它把所有的 API 分成不

同的包（package），當您要使用某個 API 時，只需匯入這個 API 所在的包。包系統上面一層是語言庫，這個語言庫裡包含一些語言工具 API，類似於 Java

的 util 包。再上一層是環境相關包，這個包的功能是處理跨瀏覽器的問題。Dojo 體系架構圖

Dojo 大部分程式碼都位於應用程式支援庫，由於太小限制，圖中沒有列出所有的包。開發人員大部分時候都在呼叫這個層中的 API，比如，用 IO 包可以進行Ajax 呼叫。

最上面的一層是 Dojo 的 Widget 系統，Widget 指的是使用者介面中的一個元素，比如按鈕、進度條和樹等。 Dojo 的 Widget 基於 MVC 結構。它的檢視作為一個 Template（模板）來進行存放，在 Template 中放置著 HTML 和 CSS 片段，而控制器來對該 Template 中的元素進行操作。 Widget 不僅支援自定義的樣式表，並且能夠對內部元素的事件進行處理。使用者在頁面中只需要加入簡單的標籤就可以使用。在這一層中，存在數百個功能強大的 Widget 方便使用者使用，包括表格、樹、選單等。

常用包介紹

Dojo 1.1.1 提供了上百個包，這些包分別放入三個一級名稱空間：Dojo，Dijit和 DojoX 。其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 所有的Widget 元件，而 DojoX 則是一些擴充套件或試驗功能，DojoX 中的試驗功能在成熟之後有可能在後續版本中移入到 Dojo 或 Dijit 名稱空間中。

由於 Dojo 包種類繁多，下面只列舉了最常用的一些包及其功能，以方便讀者有個初步瞭解或供以後查閱。

包名	功能
dojo.io	不同的 IO 傳輸方式。 script、IFrame 等等；
dojo.dnd	拖放功能的輔助 API 。
dojo.string	這個包可以對字串進行如下的處理：修整、轉換為大寫、
	編碼、esacpe、填充（pad）等等；
dojo.date	解析日期格式的有效助手；
dojo.event	事件驅動的 API，支援 AOP 開發，以及主題 / 佇列的功能；
dojo.back	用來撤銷使用者操作的棧管理器；
dojo.rpc	與後端服務（例如理解 JSON 語法的 Web 服務）進行通訊；
dojo.colors	顏色工具包；
dojo.data	Dojo 的統一資料訪問介面，可以方便地讀取 XML、JSON 等不同格式的資料檔案；
dojo.fx	基本動畫效果庫；
dojo.regexp	正規表示式處理函式庫；
dijit.forms	表單控制元件相關的 Widget 庫；
dijit.layout	頁面佈局 Widget 庫；
dijit.popup	這個包用於以彈出視窗方式使用 Widget ；
dojox.charting	用於在頁面上畫各種統計圖表的工具包；
dojox.collections	很有用的集合資料結構（List、Query、Set、Stack、Dictionary...）；
dojox.encoding	實現加密功能的 API（Blowfish、MD5、Rijndael、SHA...）；
dojox.math	數學函式（曲線、點、矩陣）；
dojo.reflect	提供反射功能的函式庫；
dojox.storage	將資料儲存在本地儲存中（例如，在瀏覽器中利用 Flash的本地儲存來實現）；
dojox.xml	XML 解析工具包；

 

 

djConfig

是 dojo 內建的一個全域性設定物件，其作用是可以通過其控制 dojo 的行為

首先我們需要在引用 dojo.js 前宣告 djConfig 物件，以便在載入 dojo.js 的時候才能夠取得所設定的值，雖然在 0.3 版本以後 dojo

支援在載入後設定，但是強烈建議你把宣告 djConfig 的程式碼作為第一段 script

一個完整的 djConfig 物件定義如下（值均為 dojo 的預設值）

<script type="text/javascript">

var djConfig = {

    isDebug: false,

    debugContainerId: "",

    bindEncoding: "",

    allowQueryConfig: false,

    baseScriptUri: "",

    parseWidgets: true

    searchIds: [],

    baseRelativePath: "",

    libraryScriptUri: "",

    iePreventClobber: false,

    ieClobberMinimal: true,

    preventBackButtonFix: true,

};

</script>

isDebug 是一個很有用的屬性，顧名思義，如果設定為真，則所有 dojo.Debug 的輸出有效，開發時應該設定為 true，釋出時應

該設定為 false

debugContainerId 同樣也是與除錯有關的，如果不指定的話，除錯資訊將會直接利用 document.write 輸出，這樣可能會破壞頁

面的整體佈局，所以你可以指定任何一個可以作為容器的 html 元素的 id 作為除錯資訊輸出容器

allowQueryConfig，這個屬性指明 dojo 是否允許從頁面 url 的引數中讀取 djConfig 中的相關屬性，當值為 true 時，dojo 會優先

從 url 引數中讀取 djConfig 的其他屬性，比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug

baseScriptUri，一般不需要設定，dojo 會自動根據你引用 dojo.js 的路徑設定這個值，比如，<script type="text/javascript"

src="../dojo/dojo.js"></script>，自動獲取的值便是 ../dojo/

ps:  如果你有多個工程需要同時引用 dojo.js 的話，建議也把 dojo 當作一個獨立的工程，引用的時候採用絕對路徑就可以了

parseWidgets，這個是可以控制 dojo 是否自動解析具有 dojoType 的 html 元素為對應的 widget，如果你沒有使用任何 Widget，

建議設定為 false 以加快 dojo 的載入速度

searchIds，這是一個字串陣列，定義了所有需要解析為 widget 的 html 元素的 ID，如果 ID 不在其中的 html 元素是不會被解

析的，當陣列為空陣列時，則所有具有 dojoType 的元素都會被解析

還有一個 bindEncoding，是用來設定預設的 bind 請求的編碼方式

至於其它的屬性，不是用處不大，就是不知道有什麼作用

在實際開發中，可以把 djConfig 的定義放在一個 js 檔案裡，並將其作為第一個引用的 js 檔案，這樣應該是最方便的。

preventBackButtonFix 在 djConfig 中設定 preventBackButtonFix: false。這樣保證了隱藏的表單

（hidden IFRAME）將會新增到頁面當中，如果不加入這段，dojo.undo.browser 不會正常工

作。

譯者注：設定方法就是在 header 中加入如下程式碼：

<script language="JavaScript" type="text/javascript">

djConfig = { isDebug: true, preventBackButtonFix: false };

</script>

djConfig

是 dojo 內建的一個全域性設定物件，其作用是可以通過其控制 dojo 的行為

首先我們需要在引用 dojo.js 前宣告 djConfig 物件，以便在載入 dojo.js 的時候才能夠取得所設定的值，

雖然在 0.3 版本以後 dojo 支援在載入後設定，但是強烈建議你把宣告 djConfig 的程式碼作為第一段 s cript

一個完整的 djConfig 物件定義如下（值均為 dojo 的預設值）

<s cript type="text/javas cript">

var djConfig = {

    isDebug: false,

    debugContainerId: "",  

    allowQueryConfig: false,

    bases criptUri: "",

    parseWidgets: true

    searchIds: [],

    baseRelativePath: "",

    librarys criptUri: "",

    iePreventClobber: false,  

    ieClobberMinimal: true,

    preventBackButtonFix: true,

};

</s cript>

isDebug 是一個很有用的屬性，顧名思義，如果設定為真，則所有 dojo.Debug 的輸出有效，開發時應該

設定為 true，釋出時應該設定為 false

debugContainerId 同樣也是與除錯有關的，如果不指定的話，除錯資訊將會直接利用 document.write 輸出，

這樣可能會破壞頁面的整體佈局，所以你可以指定任何一個可以作為容器的 html 元素的 id 作為除錯資訊

輸出容器

allowQueryConfig，這個屬性指明 dojo 是否允許從頁面 url 的引數中讀取 djConfig 中的相關屬性，當值為

true 時，dojo 會優先從 url 引數中讀取 djConfig 的其他屬性，比

如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug

bases criptUri，一般不需要設定，dojo 會自動根據你引用 dojo.js 的路徑設定這個值，比如，<s

cript type="text/javas cript" src="../dojo/dojo.js"></s cript>，自動獲取的值便是 ../dojo/

ps: 如果你有多個工程需要同時引用 dojo.js 的話，建議也把 dojo 當作一個獨立的工程，引用的時候採用

絕對路徑就可以了 parseWidgets，這個是可以控制 dojo 是否自動解析具有 dojoType 的 html 元素為對

應的 widget，如果你沒有使用任何 Widget，建議設定為 false 以加快 dojo 的載入速度

searchIds，這是一個字串陣列，定義了所有需要解析為 widget 的 html 元素的 ID，如果 ID 不在其中的

html 元素是不會被解析的，當陣列為空陣列時，則所有具有 dojoType 的元素都會被解析

至於其它的屬性，不是用處不大，就是不知道有什麼作用

在實際開發中，可以把 djConfig 的定義放在一個 js 檔案裡，並將其作為第一個引用的 js 檔案，這樣應該

是最方便的。

實現功能：在一個容器裡點選一個連結，在另外一個容器中顯示這個連結所指向頁面的內容。

<html>

<head>

    <script src="./dojo/dojo.js">

    </script>

    <script>

         dojo.require("dojo.widget.ContentPane");

         var links = null, display = null;

         dojo.addOnLoad(init);

         function init(){

             links = dojo.widget.byId("links");

             display = dojo.widget.byId("display");

             // listen to links domNode for onclick event

             // lowercased on all DOM events as opposed to widget events

             //"onclick",必須是小寫的

             dojo.event.connect(links.domNode, "onclick", 'relayClicks');

         }

         // finds out if this is a link event

         function relayClicks(evt){

             var node = evt.target;//取得事件源

             if(node.nodeName.toLowerCase() == "a"){

                 // it is a link, prevent the browser from unloading the page

                 evt.preventDefault();

                 // change page in display pane

                 display.setUrl(node.href);

             }

         }

    </script>

</head>

<body>

    <h1>Example on how to easily relay <a href="someurl.html" target="display"> clicks</h1>

    <div dojoType="ContentPane"

         widgetId="links"

         style="float:left ; width: 200px; height: 400px; border: 1px solid red;"

    >

         <a href="link1.html">Link 1</a><br/>

         <a href="link2.html">Link 2</a><br/>

         <a href="link3.html">Link 3</a><br/>

    </div>

    <div dojoType="ContentPane"

         widgetId="display" name="display" id ="display"

         style="width: 600px;   height: 400px; border: 1px solid blue;"

    ></div>

</body>

</html>

dojo.addOnLoad

可以載入指定函式到 window.load 時執行，好處就是可以很方便的在 window.load 時執行多個函式

Usage Example:

 dojo.addOnLoad(init);                    //init 是一個函式

 dojo.addOnLoad(myObject, init);       //init 是 myObject 物件的一個方法

dojo.require

如果你想呼叫一個模組的物件的時候，你應該首先用 dojo.require 來請求這個模組，dojo 會根據你的請求自動取得相應的 js 文

件，並載入到記憶體中，這樣你才能呼叫或建立其中的物件

dojo 會自動維護已載入的模組列表，所以是不會重複載入模組的

Usage Example:

 dojo.require("dojo.event");

dojo.requireIf=dojo.requireAfterIf

　　可以根據指定的條件來決定是否載入指定的模組

Usage Example:

 dojo.requireIf(dojo.html.ie, "dojo.html");   //如果 dojo.html.ie 為 true，才會載入 dojo.html 模組

dojo.provide

除非你要開發自己的模組，不然是用不到這個方法的，你可以這句看成是向系統註冊這個模組名稱

Usage Example:

 dojo.provide("dojo.custom");

dojo.exists

判斷指定物件是否具有指定名稱的方法

Usage Example:

 dojo.exists(dojo, "exists"); //will return true

模組：dojo.io.IO

dojo.io.bind

處理請求取回需要的資料並處理

這個函式是 AJAX 中最為重要和有用的函式，dojo.io.bind 這個類是用來處理客戶端與伺服器

間通訊的，需要通訊的引數由物件 dojo.io.Request 所定義，具體通訊的方法則由另外一個對

象 Transport 所提供。 因此，我們如果需要與伺服器通訊，則應該定義一個 Request 物件，

其中包括伺服器地址及回撥函式，例子中 Requset 都是以匿名物件方式定義的

雖然我們可以定義一個自己的 Transport，但是顯然不如直接利用現成的 Transport 方便。

Dojo 裡提供了一個同時相容 IE 和 Firefox 的 dojo.io.XMLHTTPTransport，但是這個物件位於

dojo.io.BrowserIO，因此，一般 require dojo.io.IO 時，還應該 require dojo.io.BrowserIO

Usage Example

dojo.io.bind({

url: "http://localhost/test.html", //要請求的頁面地址

mimetype: "text/html", // 請 求 的 頁 面 的 類 型 ， 應 該 設 置 為 與 你 請 求 頁 面 類 型 對 應 的

mimetype，預設為 "text/plain"

method："GET", //預設為"GET"

sync: false, //預設為非同步執行

useCache: false, //預設為不使用頁面快取，注意這裡的快取並不是瀏覽器的快取，而是 Dojo

自身所維護的頁面快取

preventCache: false, //預設為啟用瀏覽器快取，否則將通過自動增加不同的引數來確保瀏

覽器快取失效

timeoutSeconds: 3000, //3 秒後超時，如果為 0 則永不超時

load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted

error: function(type, error) { alert(error.message); }, //error is dojo.io.Error

timeout: function(type) { alert("請求超時！"); }

});

你也可以用一個 handle 來處理所有的事件

dojo.io.bind({

url: "http://localhost/test.html", //要請求的頁面地址

mimetype: "text/html", // 請 求 的 頁 面 的 類 型 ， 應 該 設 置 為 與 你 請 求 頁 面 類 型 對 應 的

mimetype

timeoutSeconds: 3000, //3 秒後超時，如果為 0 則永不超時

handle: function(type, data, evt){

if(type == "load") { alert(data); } //data is that we wanted

else if (type == "error") { alert(data.message); } //data is the error object

else { ; } //other events maybe need handled

}

});

如果沒有在 Request 中指定所用的 transport，則 Dojo 會自動的在已註冊的 transports 中尋

找能夠處理這個 Request 的 transport，如果不能找到，則返回指定的 Request。下面是一個

指定了 transport 的例子:

dojo.io.bind({

url: "http://localhost/test.html", //要請求的頁面地址

mimetype: "text/html", // 請 求 的 頁 面 的 類 型 ， 應 該 設 置 為 與 你 請 求 頁 面 類 型 對 應 的

mimetype

timeoutSeconds: 3000, //3 秒後超時，如果為 0 則永不超時

transport: "XMLHTTPTransport",

load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted

error: function(type, error) { alert(error.message); }, //error is dojo.io.Error

timeout: function(type) { alert("請求超時！"); }

});

你還可以利用 bind 來得到一個 Javas cript 所定義的物件（注意 mimetype 必須要定義為

"text/javas cript"）

testObj = dojo.io.bind({

url: "http://localhost/test.js", //test.js 裡定義了一個物件

mimetype: "text/javas cript", //請求的頁面的型別，應該設定為與你請求頁面型別對應的

mimetype

timeoutSeconds: 3000, //3 秒後超時，如果為 0 則永不超時 handle: function(type, data, evt){

if(type == "load") { alert(data); } //data is a object or value

else if (type == "error") { alert(data.message); } //data is the error object

else { ; } //other events maybe need handled

}

});

下面是一個 Post 的例子:

  dojo.io.bind({

    url: "http://localhost/test.aspx", //要提交的頁面地址

    mimetype: "text/html", //請求的頁面的型別，應該設定為與你請求頁面型別對應的

mimetype

    timeoutSeconds: 3000,  //3 秒後超時，如果為 0 則永不超時

    method: "POST",

    formNode: dojo.byId("myForm"), //指定提交的 Form 名稱

load: function(type, data, evt) { alert(data); }, //type should be "load", data

 is that we wanted

    error: function(type, error) { alert(error.message); }, //error is dojo.io.

Error

    timeout: function(type) { alert("請求超時！"); }

  });

另一個 Post 的例子(without Form to post):

dojo.io.bind({

url: "http://localhost/test.aspx", //要提交的頁面地址

mimetype: "text/html", // 請 求 的 頁 面 的 類 型 ， 應 該 設 置 為 與 你 請 求 頁 面 類 型 對 應 的

mimetype

timeoutSeconds: 3000, //3 秒後超時，如果為 0 則永不超時

method: "POST",

content: {a: 1, b: 2}, //要提交的資料

load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted

error: function(type, error) { alert(error.message); }, //error is dojo.io.Error

timeout: function(type) { alert("請求超時！"); }

});

dojo.io.queueBind

有時，我們需要一次發出多個網頁請求，則應該使用 dojo.io.queueBind，因為瀏覽器可能

只允許同時發出有限個數的請求，如果是使用 dojo.io.bind 的話，則有可能會申請不到新的

XMLHttp 物件而導致出錯。

用法與 dojo.io.bind 是一樣的。

dojo.io.argsFromMap

用來把物件轉換為 URL 的引數形式

Usage Example:

  dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1"

  dojo.io.argsFromMap({name:"名稱",value:"值

"},"utf"); //will return "value=å\u8364X¼&name=å��称&", 有中文的話應該指定 utf 格式，否則

dojo.string.encodeAscii 返回的編碼是很怪異的

  dojo.io.argsFromMap({a:1,b:2,c:3}, "utf", "c"); //will return "b=2&a=1&c=3"，最後一個參

數可以控制指定名稱的值出現在最後

dojo.io.setIFrameSrc

設定 IFrame 的 Src     

Usage Example:

  dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm"); //myFrame 打

開指定的網頁

  dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm", true); //myFra

me 開啟指定的網頁，並覆蓋瀏覽器的歷史記錄

模組：dojo.io.BrowserIO

基本上就提供了 dojo.io.XMLHTTPTransport 這個物件

XMLHTTPTransport 一般能夠滿足我們的需求，但是其有幾個限制：它不能傳輸檔案，不能夠成功執行

跨域名的遠端請求，並且不支援 file:// 這樣的協議

因此，根據應用要求，我們可能會需要選用其它的

transport: dojo.io.IframeTransport, dojo.io.repubsubTranport, dojo.io.s

criptSrcTransport, ShortBusTransport

dojo.io.IframeTransport，用法與 xmlhttp 是一樣的，其優點就是可以跨域，不存在任何的安全問題

如果 Request 指定的 mimetype 是 text 或 javas cript，返回的內容應該是放在第一個 textarea 裡的

內容，如果指定的 mimetype 是 html，則 IFrame 裡的 html 則是需要的內容。因為瀏覽器相容的原因，

IframeTransport 不能正確處理返回型別為 XML 的請求。

關於 Rpc，這個類似於 Remoting 的東西，也將在以後對其進行介紹。

模組：dojo.string.extras

模組：dojo.string.common

模組：dojo.string

dojo.string.common 和 dojo.string 是一樣的，只要 require 其中一個就可以使用以下方法

dojo.string.capitalize

把每一個單詞的首字母大寫

Usage Example:

  dojo.string.capitalize("show me love"); //will return "Show Me Love"

dojo.string.isBlank

判斷輸入字串是否為空或全是空白字元，如果傳入物件為非字串則也會返回 true

Usage Example:

  dojo.string.isBlank("   1   "); //will return false

dojo.string.escape

引數 1 為 type，可傳值為: xml/html/xhtml, sql, regexp/regex, javas cript/js cript/js, ascii

將按照所傳 type 對字串進行編碼

Usage Example:

  dojo.string.escape("html", "<input type='text' value='' />"); //will return "<input   

type='text' value='' />"

dojo.string.encodeAscii

dojo.string.escapeXml

dojo.string.escapeSql

dojo.string.escapeRegExp

dojo.string.escapeJavas cript

dojo.string.escapeString

這些函式也就是 dojo.string.escape 所呼叫的，這裡無需多說

dojo.string.summary

取得輸入字串的縮略版本

Usage Example:

  dojo.string.summary("1234567890", 5); //will return "12345..."

dojo.string.endsWith

判斷輸入字串是否以指定的字串結尾

Usage Example:

  dojo.string.endsWith("abcde", "E");  //will return false

  dojo.string.endsWith("abcde", "E", true); //will return true  

dojo.string.endsWithAny

判斷輸入字串是否以指定的任意字串結尾

Usage Example:

  dojo.string.endsWithAny("abcde", "E", "e"); //will return true

dojo.string.startsWith

判斷輸入字串是否以指定的字串開頭

Usage Example:

  dojo.string.startsWith("abcde", "A");  //will return false

  dojo.string.startsWith("abcde", "A", true); //will return true  

dojo.string.startsWithAny

判斷輸入字串是否以指定的任意字串開頭

Usage Example:

  dojo.string.startsWithAny("abcde", "A", "a"); //will return true

dojo.string.has

判斷輸入字串是否含有任意指定的字串

Usage Example:

  dojo.string.has("abcde", "1", "23", "abc"); //will return true

dojo.string.normalizeNewlines

按要求轉換回車換行的格式

Usage Example:

  dojo.string.normalizeNewlines("a\r\nb\r\n", "\r"); //will return "a\rb\r"

dojo.string.splitEscaped

將字串按分隔符轉換為陣列

Usage Example:

  dojo.string.splitEscaped("a\\_b_c", '_'); //will return ["a\\_b", "c"]

dojo.string.trim

去掉字串的空白

dojo.require("dojo.string");

defined in dojo/string.js

This version of trim() was taken from Steven Levithan’s blog. The short

yet performant version of this function is dojo.trim(), which is part of

Dojo base.

Usage

var foo=dojo.string.trim(str: String); (view source)

str

parameter

type

String

description

Usage Example:

s = " abc ";

dojo.string.trim(s);      //will return "abc"

dojo.string.trim(s, 0);//will return "abc"

dojo.string.trim(s, 1)；//will return "abc "

dojo.string.trim(s, -1);//will return " abc"

dojo.string.trimStart

去掉字串開頭的空白

Usage Example:

s = " abc ";dojo.string.trimStart(s);      //will return "abc "

dojo.string.trimEnd

去掉字串結尾的空白

Usage Example:

s = " abc ";dojo.string.trimEnd(s);            //will return " abc"

dojo.string.repeat

生成由同一字元(串)重複組成的字串

Usage Example:

dojo.string.repeat("a", 4); //will return "aaaa"

dojo.string.repeat("1234", 3, "-"); //will return "1234-1234-1234"

dojo.string.pad

使用字元補齊字串

dojo.require("dojo.string");

defined in dojo/string.js

Pad a string to guarantee 保證 that it is at least 最小的 size length by filling 裝填 with the

character ch at either the start or end of the string. Pads at the start, by default.

Usage

var foo=dojo.string.pad(text: String, size: Integer, ch: String?, end: Boolean?);

parameter type description

text

size

ch

end

String the string to pad

Integer length to provide padding

String Optional. character to pad, defaults to ‘0’

Boolean Optional. adds padding at the end if true, otherwise pads at start

Usage Example:

dojo.string.pad("100", 6);//will return "000100"

dojo.string.pad("100", 6, "0", 1);//will return "000100"

dojo.string.pad("100", 6, "0", -1);//will return "100000"

dojo.string.padLeft

使用字元補齊字串開頭

Usage Example:

dojo.string.padLeft("100", 6);            //will return "100000"

dojo.string.padRight

使用字元補齊字串結尾

Usage Example:

dojo.string.padRight("100", 6);            //will return "100000"

dojo.string.substituteParams

dojo.string.substitute

類似 C#中的 String.Format 函式

%{name}要保證與傳入的物件的名稱大小寫一致，否則會出異常

dojo.require("dojo.string");

defined in dojo/string.js

For example,

dojo.string.substitute("File '${0}' is not found in directory

'${1}'.",["foo.html","/temp"]);

dojo.string.substitute("File '${name}' is not found in directory

'${info.dir}'.",

    {name: "foo.html", info: {dir: "/temp"}});

both return

"File 'foo.html' is not found in directory '/temp'."

Usage

var foo=dojo.string.substitute(template: String, map: Object|Array, transform: Function?,

thisObject: Object?);

parameter

type

description

template String

a string with expressions in the form ${key} to be replaced or

${key:format} which specifies a format function.

map

Object|Array hash to search for substitutions

transform Function

thisObject Object

Usage Example:

Optional. a function to process all parameters before substitution

takes place, e.g. dojo.string.encodeXML

Optional. where to look for optional format function; default to the

global namespace

  dojo.string.substituteParams("%{0} - %{1} - %{2}", "a", "b", "c"); //will return "a - b - c"

  dojo.string.substituteParams("%{name}: %{value}", {name:"名稱",value:"值"}); //will return "名稱: 值"

模組：dojo.lang.common / dojo.lang

dojo.lang.common 和 dojo.lang 是一樣的，只要 require 其中一個就可以使用以下方法

dojo.lang.inherits

dojo.inherits

dojo.inherits = dojo.lang.inherits;

function(/*Function*/subclass, /*Function*/superclass){

// summary: Set up inheritance 繼承 between two classes.

dojo.lang.mixin

dojo.mixin

dojo.mixin = dojo.lang.mixin;

將一個物件的方法和屬性增加到另一個物件上

Usage Example:

var s1 = {name: "TestObj", test1: function(){alert("this is test1!");}}

var s2 = {value: 1000, test2: function(){alert("this is test2!");}}

var d = {};

dojo.lang.mixin(d, s1, s2); //執行後 d 就具備了 s1 和 s2 的所有屬性和方法 d.test1();

dojo.lang.extend

dojo.extend

dojo.extend = dojo.lang.extend;

為指定類的原型擴充套件方法與屬性

function(/*Object*/ constructor, /*Object...*/ props){

// summary:

//Adds all properties and methods of props to constructor's

//prototype, making them available to all instances created with

//constructor.

Usage Example:

TestClass = function() {};

dojo.lang.extend(TestClass, {name: "demo", test: function(){alert("Test!");}});

var o = new TestClass();  //TestClass 本來是沒有 test 方法的，但是 extend 以後就有 test 方法了 o.test();

dojo.lang.find

dojo.lang.indexOf

dojo.lang.indexOf = dojo.lang.find;

dojo.lang.find = function(/*Array*/ array, /*Object*/ value, /*Bollean*/ indentity, /*Boolean*/ findLast)

// summary:

//

Return the index of value in array, returning -1 if not found.

// array: just what you think

// value: the value to locate

// identity:

//

//

If true, matches with identity comparison (===). If false, uses

normal comparison (==).

// findLast:

//

//

//

If true, returns index of last instance of value.

// examples:

find(array,value[, identity [findLast]]) // recommended

find(value, array[, identity [findLast]]) // deprecated

// support both (array, value) and (value, array)

查詢指定物件在指定陣列中的位置

返回值在陣列中的索引值，-1 為未發現。

Indentity 為 true 匹配模式為(===),反正為(==)

findLast 為 true 返回最後一個匹配值的索引。

Usage Example:

var arr = [1,2,3,3,2,1];dojo.lang.find(arr, 2);//will return 1

dojo.lang.find(arr, 2, true);//will return 1

dojo.lang.find(arr, "2", true);//will return -1

dojo.lang.find(arr, "2", false);//will return 1

dojo.lang.find(arr, 2, true, true); //will return 4

dojo.lang.findLast

dojo.lang.lastIndexOf

dojo.lang.lastIndexOf = dojo.lang.findLast;

function(/*Array*/array, /*Object*/value, /*boolean?*/identity){

// summary:

//

//

//

//

//

Return index of last occurance of value in array, returning -1 if

not found. This is a shortcut for dojo.lang.find() with a true

value for its "findLast" parameter.

// identity:

If true, matches with identity comparison (===). If false, uses

normal comparison (==).

查詢指定物件在指定陣列中的位置，從後往前查

Usage Example:

var arr = [1,2,3,3,2,1];dojo.lang.findLast(arr, 2);//will return 4

dojo.lang.findLast(arr, 2, true);//will return 4

dojo.lang.findLast(arr, "2", true);//will return -1

dojo.lang.findLast(arr, "2", false);//will return 4

dojo.lang.inArray

function(array /*Array*/, value /*Object*/){

// summary: Return true if value is present in array.

查詢指定物件是否在指定陣列中

Usage Example:

var arr = [1,2,3];

dojo.lang.inArray(arr, 1);//will return true

dojo.lang.inArray(arr, 4);//will return false

dojo.lang.isObject

function(/*anything*/ it){

// summary: Return true if it is an Object, Array or Function.

判斷輸入的型別是否為物件

Usage Example:

dojo.lang.isObject(new String());      //will return true

dojo.lang.isObject("123"));      //will return false

dojo.lang.isArray

function(/*anything*/ it){

// summary: Return true if it is an Array.

判斷輸入的型別是否為陣列

Usage Example:

dojo.lang.isArray({a:1,b:2});      //will return false

dojo.lang.isArray([1,2,3]);      //will return true

dojo.lang.isArrayLike

function(/*anything*/ it){

// summary:

//Return true if it can be used as an array (i.e. is an object with

//an integer length property).

dojo.lang.isFunction

function(/*anything*/ it){

// summary: Return true if it is a Function.

判斷輸入的型別是否為函式

Usage Example:

dojo.lang.isFunction(function() {});      //will return true

dojo.lang.isString

判斷輸入的型別是否為字串

function(/*anything*/ it){

// summary: Return true if it is a String.

Usage Example:

dojo.lang.isString("");      //will return true

dojo.lang.isString(0);      //will return false

dojo.lang.isAlien

判斷輸入的型別是否為系統函式

function(/*anything*/ it){

// summary: Return true if it is not a built-in function. False if not.

Usage Example:

dojo.lang.isAlien(isNaN);      //will return true

dojo.lang.isBoolean

判斷輸入的型別是否為布林型別

function(/*anything*/ it){

// summary: Return true if it is a Boolean.

Usage Example:

dojo.lang.isBoolean(2>1);      //will return true

下面的 is***()函式有點不安全

dojo.lang.isNumber

判斷輸入的型別是否為數值，根據註釋所說，此函式使用不太可靠，但是可替換使用的系統函式 isNaN 也

不太可靠

// summary: Return true if it is a number.

// description:

//

WARNING - In most cases, isNaN(it) is sufficient to determine whether or not

//     something is a number or can be used as such. For example, a number or string

//     can be used interchangably when accessing array items (array["1"] is the same as

//     array[1]) and isNaN will return false for both values ("1" and 1). However,

//     isNumber("1")   will return false, which is generally not too useful.

//     Also, isNumber(NaN) returns true, again, this isn't general y useful, but there

//     are corner cases (like when you want to make sure that two things are really

//     the same type of thing). That is really where isNumber "shines".

//

// Recommendation - Use isNaN(it) when possible

dojo.lang.isUndefined

判斷輸入是否為未定義，根據註釋所說，此函式有可能會導致丟擲異常，推薦使

用 typeof foo == "undefined" 來判斷

// summary: Return true if it is not defined.

// description:

//

WARNING - In some cases, isUndefined will not behave as you

//     might expect. If you do isUndefined(foo) and there is no earlier

//     reference to foo, an error will be thrown before isUndefined is

//     called. It behaves correctly if you scope yor object first, i.e.

//     isUndefined(foo.bar) where foo is an object and bar isn't a

//

//

propertyof the object.

// Recommendation - Use typeof foo == "undefined" when possible

模組：dojo.lang.array

處理陣列相關 api

dojo.lang.has

判斷物件是否具有指定屬性，不過這個方法有用嗎，不如直接使用 if(name in obj)

function(/*Object*/obj, /*String*/name)

// summary: is there a property with the passed name in obj?

Usage Example:

  dojo.lang.has(dojo.lang, "has"); //will return true

dojo.lang.isEmpty

判斷物件或陣列是否為空

function(/*Object*/obj)

// summary:

//

//

//

//

//

//

can be used to determine 求出  if the passed object is "empty". In

the case of array-like objects, the length, property is

examined 檢查, but for other types of objects iteration 重複  is used to

examine the iterable "surface area" to determine if any

non-prototypal properties have been assigned 分配. This iteration is

prototype-extension safe.

Usage Example:

  dojo.lang.isEmpty({a: 1}); //will return false  

  dojo.lang.isEmpty([]); //will return true

dojo.lang.map

呼叫指定的方法處理指定的陣列或字串

function(/*Array*/arr, /*Object|Function*/obj, /*Function?*/unary_func)

// summary:

//

//

//

//

//

//

returns a new array constituded from the return values of

passing each element of arr into unary_func. The obj parameter

may be passed to enable the passed function to be called in

that scope. In environments that support JavaScript 1.6, this

function is a passthrough to the built-in map() function

provided by Array instances. For details on this, see:

// http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:map

// examples:

//dojo.lang.map([1, 2, 3, 4], function(item){ return item+1 });

// returns [2, 3, 4, 5]

Usage Example:

  dojo.lang.map([1,2,3,4,5], function(x) { return x * x;}); //will return [1,4,9,16,25]

dojo.lang.reduce

function(/*Array*/arr, initialValue, /*Object|Function*/obj, /*Function*/binary_func)

// summary:

//

//

//

//

//

//

//

//

//

//

similar to Python's builtin reduce() function. The result of

the previous 前面的 computation 計算 is passed as the first argument 爭論 to

binary_func along with the next value from arr. The result of

this call is used along with the subsequent 後來的 value from arr, and

this continues until arr is exhausted. The return value is the

last result. The "obj" and "initialValue" parameters may be

safely omitted and the order of obj and binary_func may be

reversed. The default order of the obj and binary_func argument

will probably be reversed in a future release, and this call

order is supported today.

// examples:

//

//

dojo.lang.reduce([1, 2, 3, 4], function(last, next){ return last+next});

returns 10

dojo.lang.forEach

遍歷指定的陣列或字串，並對其中的元素呼叫指定的方法

function(/*Array*/anArray, /*Function*/callback, /*Object?*/thisObject)

// summary:

//

for every item in anArray, call callback with that item as its

//

//

//

only parameter. Return values are ignored 忽略. This funciton

corresponds 協調(and wraps) the JavaScript 1.6 forEach method. For

more details, see:

//http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach

Usage Example:

  dojo.lang.forEach("abc", function(x) { alert(x); });

dojo.lang.every

檢查指定的陣列是否全部滿足指定方法的條件

function(/*Array*/arr, /*Function*/callback, /*Object?*/thisObject)

// summary:

//

//

//

//

//

//

determines 決定  whether or not every item in the array satisfies 符合 the

condition 條件  implemented by callback. thisObject may be used to

scope the call to callback. The function signature 特徵 is derived 起源

from the JavaScript 1.6 Array.every() function. More

information on this can be found here:

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:every

// examples:

//

//

//

//

dojo.lang.every([1, 2, 3, 4], function(item){ return item>1; });

// returns false

dojo.lang.every([1, 2, 3, 4], function(item){ return item>0; });

// returns true

Usage Example:

  dojo.lang.every([1,-2,3], function(x) { return x > 0; }); //指定的陣列不是全大於 0 的，因此返回 false

dojo.lang.some

檢查指定的陣列是否部分滿足指定方法的條件

function(/*Array*/arr, /*Function*/callback, /*Object?*/thisObject)

// summary:

//

//

determines whether or not any item in the array satisfies the

condition 條件  implemented by callback. thisObject may be used to

//

//

//

//

scope the call to callback. The function signature is derived

from the JavaScript 1.6 Array.some() function. More

information on this can be found here:

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:some

// examples:

//

//

//

//

dojo.lang.some([1, 2, 3, 4], function(item){ return item>1; });

// returns true

dojo.lang.some([1, 2, 3, 4], function(item){ return item<1; });

// returns false

Usage Example:

  dojo.lang.some([1,-2,3], function(x) { return x > 0; }); //指定的陣列有大於 0 的元素，因此返回 true

dojo.lang.filter

根據指定的方法來過濾指定的陣列

function(/*Array*/arr, /*Function*/callback, /*Object?*/thisObject)

// summary:

//

//

//

//

//

//

returns a new Array with those items from arr that match the

condition implemented by callback.thisObject may be used to

scope the call to callback. The function signature is derived

from the JavaScript 1.6 Array.filter() function, although

special accomidation is made in our implementation for strings.

More information on the JS 1.6 API can be found here:

//http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:filter

// examples:

//

dojo.lang.some([1, 2, 3, 4], function(item){ return item>1; });

// returns [2, 3, 4]

Usage Example:

  dojo.lang.filter([1,-2,3], function(x) { return x > 0; }); //will return [1, 3]

dojo.lang.unnest

把指定的引數或陣列轉換為一維陣列

function(/* ... */){

// summary:

//

//

// usage:

//

//

Creates a 1-D array out of all the arguments passed,

unravelling any array-like objects in the process

unnest(1, 2, 3) ==> [1, 2, 3]

unnest(1, [2, [3], [[[4]]]]) ==> [1, 2, 3, 4]

Usage Example:

  dojo.lang.unnest(1, 2, 3);  //will return [1, 2, 3]

  dojo.lang.unnest(1, [2, [3], [[[4]]]]); //will return [1, 2, 3, 4]

dojo.lang.toArray

將輸入轉換為陣列

function(/*Object*/arrayLike, /*Number*/startOffset){

// summary:

//

//

Converts an array-like object (i.e. arguments, DOMCollection)

to an array. Returns a new Array object.

Usage Example:

  function test()

  {

    return dojo.lang.toArray(arguments, 1);

  }

  test(1,2,3,4,5); //will return [2,3,4,5]

模組：dojo.lang.extras

dojo.lang.setTimeout

延遲指定時間後執行指定方法

function(/*Function*/func, /*int*/delay /*, ...*/){

// summary:

//

Sets a timeout in milliseconds to execute a function in a given

//

// usage:

//

//

context with optional arguments.

dojo.lang.setTimeout(Object context, function func, number delay[, arg1[, ...]]);

dojo.lang.setTimeout(function func, number delay[, arg1[, ...]]);

Usage Example:

function onTime(msg){dojo.debug(msg)}dojo.lang.setTimeout(onTime, 1000, "test"); //1 秒後會輸出除錯

資訊"test"dojo.lang.setTimeout(dojo, "debug", 1000, "test"); //1 秒後會輸出除錯資訊"test"

dojo.lang.clearTimeout

function(/*int*/timer){

// summary: clears timer by number from the execution queue 排列

// FIXME:

//

//

//

why do we have this function? It's not portable outside of browser

environments and it's a stupid wrapper on something that browsers

provide anyway.

dojo.lang.getNameInObj

獲得指定專案在指定物件中的名稱

function(/*Object*/ns, /*unknown*/item)

// summary:

//

//

looks for a value in the object ns with a value matching item and

returns the property name

// ns: if null, dj_global is used

// item: value to return a name for

Usage Example:

dojo.lang.getNameInObj(dojo, dojo.debug);      //will return "debug"

dojo.lang.shallowCopy

返回指定物件的淺表複製副本

function(/*Object*/obj, /*Boolean?*/deep)

// summary:

//

copies object obj one level deep, or full depth if deep is true

Usage Example:

dojo.lang.shallowCopy({});    //will return a 空物件

dojo.lang.firstValued

返回第一個非定義的引數

function(/* ... */){

// summary: Return the first argument that isn't undefined

Usage Example:

var a;dojo.lang.firstValued(a,2,3);      //will return 2

dojo.lang.getObjPathValue

function(/*String*/objpath, /*Object?*/context, /*Boolean?*/create){

// summary:

//

//

Gets a value from a reference specified as a string descriptor,

(e.g. "A.B") in the given context.

// context: if not specified, dj_global is used

// create: if true, undefined objects in the path are created.

dojo.lang.setObjPathValue

function(/*String*/objpath, /*anything*/value, /*Object?*/context, /*Boolean?*/create)

// summary:

//

//

//

//

Sets a value on a reference specified as a string descriptor.

(e.g. "A.B") in the given context. This is similar to straight

assignment, except that the object structure in question can

optionally be created if it does not exist.

// context: if not specified, dj_global is used

// create: if true, undefined objects in the path are created.

// FIXME: why is this function valuable? It should be scheduled for

// removal on the grounds that dojo.parseObjPath does most of it's work and

// is more straightforward and has fewer dependencies. Also, the order of

// arguments is bone-headed. "context" should clearly come after "create".

// *sigh*

模組：dojo.lang.func

dojo.lang.hitch

將指定的方法掛在指定的物件下並返回該方法

function(/*Object*/thisObject, /*Function|String*/method /*, ...*/)

// summary:

//

//

//

Returns a function that will only ever execute in the a given scope

(thisObject). This allows for easy use of object member functions

in callbacks and other places in which the "this" keyword may

//

//

//

//

//

otherwise not reference the expected scope. Any number of default

positional arguments may be passed as parameters beyond "method".

Each of these values will be used to "placehold" (similar to curry)

for the hitched function. Note that the order of arguments may be

reversed in a future version.

// thisObject: the scope to run the method in

// method:

//

//

// usage:

//

//

a function to be "bound" to thisObject or the name of the method in

thisObject to be used as the basis for the binding

dojo.lang.hitch(foo, "bar")(); // runs foo.bar() in the scope of foo

dojo.lang.hitch(foo, myFunction); // returns a function that runs myFunction in the scope of foo

Usage Example:

  func = {test: function(s) {alert(s)}};

  dojo.lang.mixin(func, {demo: dojo.lang.hitch(func, "test")});

  func.demo("demo and test are same method");

dojo.lang.nameAnonFunc

function(/*Function*/anonFuncPtr, /*Object*/thisObj, /*Boolean*/searchForNames){

// summary:

//

//

//

//

//

//

Creates a reference to anonFuncPtr in thisObj with a completely

unique name. The new name is returned as a String. If

searchForNames is true, an effort will be made to locate an

existing reference to anonFuncPtr in thisObj, and if one is found,

the existing name will be returned instead. The default is for

searchForNames to be false.

dojo.lang.forward

返回自身物件的指定名稱的方法引用

function(funcName){

// summary:

//

//

//

Returns a function that forwards a method call to

this.funcName(...). Unlike dojo.lang.hitch(), the "this" scope is

not fixed on a single object. Ported from Mochi

Usage Example:

  func = {test: function(s) {alert(s)}, demo: dojo.lang.forward("test")};

  func.demo("demo and test are same method");

dojo.lang.curry

What is curry? 請參閱這篇文章：http://www.svendtofte.com/code/curried_javas cript/

function(thisObj, func /* args ... */)

// summary:

//

//

//

//

//

//

//

//

//

similar to the curry() method found in many functional programming

environments, this function returns an "argument accumulator"

function, bound to a particular scope, and "primed" with a variable

number of arguments. The curry method is unique in that it returns

a function that may return other "partial" function which can be

called repeatedly. New functions are returned until the arity of

the original function is reached, at which point the underlying

function (func) is called in the scope thisObj with all of the

accumulated arguments (plus any extras) in positional order.

// examples:

//

//

//

//

//

//

//

//

//

//

//

//

//

//

//

//

//

//

//

assuming a function defined like this:

var foo = {

bar: function(arg1, arg2, arg3){

dojo.debug.apply(dojo, arguments);

}

};

dojo.lang.curry() can be used most simply in this way:

tmp = dojo.lang.curry(foo, foo.bar, "arg one", "thinger");

tmp("blah", "this is superfluous");

// debugs: "arg one thinger blah this is superfluous"

tmp("blah");

// debugs: "arg one thinger blah"

tmp();

// returns a function exactly like tmp that expects one argument

other intermittent functions could be created until the 3

positional arguments are filled:

//

//

//

//

//

//

//

//

//

//

//

//

//

//

//

tmp = dojo.lang.curry(foo, foo.bar, "arg one");

tmp2 = tmp("arg two");

tmp2("blah blah");

// debugs: "arg one arg two blah blah"

tmp2("oy");

// debugs: "arg one arg two oy"

curry() can also be used to call the function if enough arguments

are passed in the initial invocation:

dojo.lang.curry(foo, foo.bar, "one", "two", "three", "four");

// debugs: "one two three four"

dojo.lang.curry(foo, foo.bar, "one", "two", "three");

// debugs: "one two three"

// FIXME: the order of func and thisObj should be changed!!!

Usage Example:

  function add(a, b)

  {

    return a + b;  

  }

  dojo.lang.curry(null, add, 2, 3); //will return 5

  dojo.lang.curry(null, add, 2)(3); //will return 5

dojo.lang.curry(null, add)(2)(3); //will return 5  

  dojo.lang.curry(null, add)()(2)(3); //will return 5

dojo.lang.curryArguments

與 dojo.lang.curry 類似，但是可以選擇忽略掉前 n 個引數

function(/*Object*/thisObj, /*Function*/func, /*Array*/args, /*Integer, optional*/offset)

// summary:

//

//

//

//

similar to dojo.lang.curry(), except that a list of arguments to

start the curry with may be provided as an array instead of as

positional arguments. An offset may be specified from the 0 index

to skip some elements in args.

Usage Example:

  function add(a, b)

  {

    return a + b;  

  }

  dojo.lang.curryArguments(null, add, [1,2,3,4,5], 2); //will return 7 (= 3 + 4)

dojo.lang.tryThese

測試引數指定所有函式，並返回第一個返回值不為 0 的函式值，沒看懂這個函式哪裡用得著

function(/*...*/){

// summary:

//

//

//

executes each function argument in turn, returning the return value

from the first one which does not throw an exception in execution.

Any number of functions may be passed.

from seno:

dojo.lang.tryThese 方法和 prototype 中的 Try.these()方法是一樣的，

xmlNode.text 在一些瀏覽器中好用，但是 xmlNode.textContent 在另一些瀏覽器中正常工作。 使用

Try.these()方法我們可以得到正常工作的那個方法的返回值。

<script>

function getXmlNodeValue(xmlNode){

return Try.these(

function() {return xmlNode.text;},

function() {return xmlNode.textContent;)

);

}

dojo.lang.delayThese

沒看懂這個函式怎麼用

function(/*Array*/farr, /*Function, optional*/cb, /*Integer*/delay, /*Function,

optional*/onend)

// summary:

//

//

//

//

//

/**

executes a series of functions contained in farr, but spaces out

calls to each function by the millisecond delay provided. If cb is

provided, it will be called directly after each item in farr is

called and if onend is passed, it will be called when all items

have completed executing.

* alternate: (array funcArray, function callback, function onend)

* alternate: (array funcArray, function callback)

* alternate: (array funcArray)

*/

模組：dojo.event.common

dojo.event.connect

繫結指定的方法到指定的物件的方法上

function(/*...*/)

// summary:

//

//

//

//

//

//

//

//

//

//

//

dojo.event.connect is the glue that holds most Dojo‐based

applications together. Most combinations of arguments are

supported, with the connect() method attempting to disambiguate

the implied types of positional parameters. The following will

all work:

dojo.event.connect("globalFunctionName1", "globalFunctionName2");

dojo.event.connect(functionReference1, functionReference2);

dojo.event.connect("globalFunctionName1", functionReference2);

dojo.event.connect(functionReference1, "globalFunctionName2");

dojo.event.connect(scope1, "functionName1", "globalFunctionName2");

dojo.event.connect("globalFunctionName1", scope2, "functionName2");

//

"functionName2");

dojo.event.connect(scope1,

"functionName1",

scope2,

//

"functionName2");

//

"functionName2");

//

//

//

//

//

//

dojo.event.connect("after", scope1, "functionName1", scope2,

dojo.event.connect("before", scope1, "functionName1", scope2,

dojo.event.connect("around", scope1, "functionName1",

scope2, "functionName2",

aroundFunctionReference);

dojo.event.connect("around", scope1, "functionName1",

scope2, "functionName2",

scope3,

"aroundFunctionName");

//

//

"functionName2",

//

dojo.event.connect("before‐around", scope1, "functionName1",

scope2,

aroundFunctionReference);

// dojo.event.connect("after‐around",

//

"functionName2",

scope1, "functionName1",

scope2,

//

aroundFunctionReference);

// dojo.event.connect("after‐around",

//

"functionName2",

//

"aroundFunctionName");

scope1, "functionName1",

scope2,

scope3,

true, 30);

//

//

//

//

//

//

dojo.event.connect("around", scope1, "functionName1",

scope2, "functionName2",

scope3, "aroundFunctionName",

dojo.event.connect("around", scope1, "functionName1",

scope2, "functionName2",

scope3, "aroundFunctionName",

null, null, 10);

// adviceType:

//

//

// srcObj:

//

//

//

//

//

Optional. String. One of "before", "after", "around",

"before‐around", or "after‐around". FIXME

the scope in which to locate/execute the named srcFunc. Along

with srcFunc, this creates a way to dereference the function to

call. So if the function in question is "foo.bar", the

srcObj/srcFunc pair would be foo and "bar", where "bar" is a

string and foo is an object reference.

// srcFunc:

//

//

//

//

the name of the function to connect to. When it is executed,

the listener being registered with this call will be called.

The adviceType defines the call order between the source and

the target functions.

// adviceObj:

//

the scope in which to locate/execute the named adviceFunc.

// adviceFunc:

//

the name of the function being conected to srcObj.srcFunc

// aroundObj:

//

the scope in which to locate/execute the named aroundFunc.

// aroundFunc:

//

//

//

//

//

//

//

//

the name of, or a reference to, the function that will be used

to mediate the advice call. Around advice requires a special

unary function that will be passed a "MethodInvocation" object.

These objects have several important properties, namely:

‐ args

a mutable array of arguments to be passed into the

wrapped function

‐ proceed

//

//

//

//

// once:

//

//

//

// delay:

//

//

// rate:

//

//

//

a function that "continues" the invocation. The result

of this function is the return of the wrapped function.

You can then manipulate this return before passing it

back out (or take further action based on it).

boolean that determines whether or not this connect() will

create a new connection if an identical connect() has already

been made. Defaults to "false".

an optional delay (in ms), as an integer, for dispatch of a

listener after the source has been fired.

an optional rate throttling parameter (integer, in ms). When

specified, this particular connection will not fire more than

once in the interval specified by the rate

// adviceMsg:

//

//

/*

*/

Usage Example:

簡單繫結 1

function doOnClick1()

{

  alert( "Clicked!");

}

boolean. Should the listener have all the parameters passed in

as a single argument?

ao.adviceType = args[0];

ao.srcObj = args[1];

ao.srcFunc = args[2];

ao.adviceObj = args[3]

ao.adviceFunc = args[4];

ao.aroundObj = args[5];

ao.aroundFunc = args[6];

ao.once = args[7];

ao.delay = args[8];

ao.rate = args[9];

ao.adviceMsg = args[10];

ao.maxCalls = args[11];

dojo.event.connect(dojo.byId("inputTest"),"onclick","doOnClick1");

簡單繫結 2

obj = { doOnClick2: function(){ alert("Clicked!");}}

dojo.event.connect(dojo.byId("inputTest"),"onclick",obj,"doOnClick2");

如果存在需要進行多個事件的繫結的時候，你就會看到 dojo 的方便之處了

obj2 = { doOnClick2: function(){alert("Clicked!");}}

dojo.event.connect(dojo.byId("inputTest"),"onclick",obj,"doOnClick2");

dojo.event.connect(dojo.byId("inputTest"),"onclick",obj2,"doOnClick2");

connect 可以對任何物件的方法進行繫結，而不是隻能針對 DOM 物件

dojo.event.connect(obj,"doOnclick2","doOnClick1"); //在呼叫 obj.doOnclick2()後呼叫 doOnClick1()

dojo.event.log

function(/*object or funcName*/ a1, /*funcName*/ a2)

// summary:

//

//

//

//

// a1:

//

//

// a2:

//

a function that will wrap and log all calls to the specified

a1.a2() function. If only a1 is passed, it'll be used as a

function or function name on the global context. Logging will

be sent to dojo.debug

if a2 is passed, this should be an object. If not, it can be a

function or function name.

a function name

dojo.event.connectBefore

function()summary:

//

//

takes the same parameters as dojo.event.connect(), except that

the advice type will always be "before"

dojo.event.connect 預設是後繫結，connectBefore 則是早繫結，繫結的方法將在指定方法前執行，用法與 connect 一致

dojo.event.connectAround

summary:

//

//

takes the same parameters as dojo.event.connect(), except that

the advice type will always be "around"

Usage Example:

function aroundTest(invocation){

  //此處可以增加程式碼，比如檢查引數(invocation.args)

  var result = invocation.proceed();

  //此處可以增加程式碼，比如修改結果(result)

  return result;

}

dojo.event.connectAround(dojo.byId("inputTest"),"onclick","aroundTest");

dojo.event.connectOnce

function()

summary:

//

//

takes the same parameters as dojo.event.connect(), except that

the "once" flag will always be set to "true"

說起這個函式，還真的是讓我想了半天，直覺上我就把它想象成 executeOnce，結果測試的結

果讓我差點想不通

connectOnce 就是指保證只繫結一次，來避免重複繫結會導致的重複執行的問題

dojo.event.connectRunOnce

summary:

//

//

takes the same parameters as dojo.event.connect(), except that

the "maxCalls" flag will always be set to 1

dojo.event.kwConnect

kwConnect 可以做到更加靈活的繫結，比如可以設定延遲執行繫結

function(/*Object*/ kwArgs)

summary:

//

A version of dojo.event.connect() that takes a map of named

//

//

//

//

parameters instead of the positional parameters that

dojo.event.connect() uses. For many advanced connection types,

this can be a much more readable (and potentially faster)

alternative.

// kwArgs:

//

//

//

//

//

//

//

//

//

//

//

//

//

//

An object that can have the following properties:

‐ adviceType

‐ srcObj

‐ srcFunc

‐ adviceObj

‐ adviceFunc

‐ aroundObj

‐ aroundFunc

‐ once

‐ delay

‐ rate

‐ adviceMsg

As with connect, only srcFunc and adviceFunc are generally

required

Usage Example:

dojo.event.kwConnect({

  srcObj: dojo.byId("inputTest"),

  srcFunc: "onclick",

  adviceObj: obj,

  adviceFunc: "doOnclick2",

  type: "before", //預設為"after"，可選: "before", "around"，注意：type 是用來決定 adviceFunc 的行為的，如果為"ar

ound"，則 aroundFunc 將失效

aroundObj: null,

aroundFunc: null, //如果指定了 aroundFunc，則其將對 adviceFunc 進行攔截，但是當 type 為 "around"時，則 aroun

dFunc 將不會執行

once: false, //預設為 false，允許重複繫結

delay: 3000, //延時 3 秒後執行 adviceFunc

rate: 0, //這個從原始碼沒有看懂起什麼作用

adviceMsg: false //這個從原始碼沒有看懂起什麼作用

});

dojo.event.kwDisconnect

用來解除使用 kwConnect 指定的繫結

模組：dojo.event.topic

Topic 機制與 Advice 機制都能夠實現事件的繫結，但是顯然,Topic 更適合處理多重繫結。

釋出主題，然後由使用者訂閱的機制就是一個典型的觀察者模式

dojo.event.disconnect

解除繫結，呼叫引數與 connect 一致，即可解除之前的繫結操作

summary:

//

//

//

//

Takes the same parameters as dojo.event.connect() but destroys

an existing connection instead of building a new one. For

multiple identical connections, multiple disconnect() calls

will unroll one each time it's called.

這裡所說的基礎物件和方法是指的不 Require 任何包就能夠呼叫的物件和方法

    匿名函式

    在開始前，我想介紹一下 js 裡的匿名函式，這個在閱讀 dojo 的原始碼的時候，會發現到處都有匿名

函式

;(function(){

alert(123);

})();

//前面的分號是一個空語句，是可以不要的

    匿名函式。一個匿名函式就是一個沒有名字的函式。

你可以認為他們是一次性函式。當你只需要用一次某個函式時，他們就特別有用。通過使用匿名函式，

沒有必要把函式一直放在記憶體中，所以使用匿名函式更加有效率。

當然你也可以根本不定義函式，但是使用匿名函式可以把你的程式碼分段，就像 C#中的#region 一樣

dojo.event.MethodInvocation

function(/*dojo.event.MethodJoinPoint*/join_point, /*Object*/obj, /*Array*/args){

// summary:

//

//

a class the models the call into a function. This is used under the

covers for all method invocations on both ends of a

//

//

connect()‐wrapped function dispatch. This allows us to "pickle"

calls, such as in the case of around advice.

// join_point:

//

// obj:

//

// args:

//

a dojo.event.MethodJoinPoint object that represents a connection

the scope the call will execute in

an array of parameters that will get passed to the callee

dojo.event.MethodInvocation.protot

ype.proceed

// summary:

//

//

proceed with the method call that's represented by this invocation

object

模組：dojo.event.browser

dojo.event.browser.clean

function(/*DOMNode*/node)

summary:

//

//

//

// node:

//

removes native event handlers so that destruction of the node

will not leak memory. On most browsers this is a no‐op, but

it's critical for manual node removal on IE.

A DOM node. All of it's children will also be cleaned

dojo.event.browser.addClobberNode

function(/*DOMNode*/node)

summary:

//

// node:

//

register the passed node to support event stripping

A DOM node

dojo.event.browser.addClobberNodeA

ttrs

function(/*DOMNode*/node, /*Array*/props)

summary:

//

// node:

//

// props:

//

register the passed node to support event stripping

A DOM node to stip properties from later

A list of propeties to strip from the node

dojo.event.browser.removeListener

function( /*DOMNode*/ node,

/*String*/ evtName,

/*Function*/fp,

/*Boolean*/ capture)

// summary:

//

clobbers the listener from the node

// evtName:

//

// node:

//

// fp:

//

the name of the handler to remove the function from

DOM node to attach the event to

the function to register

// capture:

//

Optional. should this listener prevent propigation?

清除監聽器(這個方法似乎是無效的)

dojo.event.browser.addListener

function(/*DOMNode*/node, /*String*/evtName, /*Function*/fp, /*Boolean*/capture,

/*Boolean*/dontFix){

// summary:

//

adds a listener to the node

// evtName:

//

//

// node:

//

// fp:

//

the name of the handler to add the listener to can be either of

the form "onclick" or "click"

DOM node to attach the event to

the function to register

// capture:

//

Optional. Should this listener prevent propigation?

// dontFix:

//

//

//

增加監聽器

Usage Example:

function listener()

{

  alert( "ok");

}

Optional. Should we avoid registering a new closure around the

listener to enable fixEvent for dispatch of the registered

function?

dojo.event.browser.addListener(document, 'mousedown', listener); //事件名稱可以加上"on"，

也可以沒有"on"

dojo.event.browser.addListener(document, 'onmousedown', listener, true); //capture 為真表

示不受上層元素的事件控制

dojo.event.browser.isEvent

function(/*Object*/obj){

// summary:

//

Tries to determine whether or not the object is a DOM event.

// FIXME: event detection hack ... could test for additional attributes

// if necessary

判斷指定物件是否為 event 物件

Usage Example:

dojo.event.browser.isEvent(dojo.event.browser.currentEvent); //當 dojo.event.browser.currentEvent 不為 null 時返回 t

rue

dojo.event.browser.callListener

function(/*Function*/listener, /*DOMNode*/curTarget){

// summary:

//

//

calls the specified listener in the context of the passed node

with the current DOM event object as the only parameter

// listener:

//

the function to call

// curTarget:

//

呼叫監聽器

Usage Example:

the Node to call the function in the scope of

dojo.event.browser.callListener(listener, document);

dojo.event.browser.fixEvent

function(/*Event*/evt, /*DOMNode*/sender){

// summary:

//

//

normalizes properties on the event object including event

bubbling methods, keystroke normalization, and x/y positions

// evt: the native event object

// sender: the node to treat as "currentTarget"

dojo.event.browser.stopEvent

function(/*Event*/evt){

// summary:

//

//

prevents propigation and clobbers the default action of the

passed event

// evt: Optional for IE. The native event object.

dojo.event.browser.stopPropagation

阻止 Event 傳播

Usage Example:

dojo.event.browser.stopPropagation();

dojo.event.browser.preventDefault

將當前事件的返回值設定為 false

Usage Example:

dojo.event.browser.preventDefault();

dojo.event.browser.keys

鍵定義:

KEY_BACKSPACE: 8,

KEY_TAB: 9,

KEY_ENTER: 13,

KEY_SHIFT: 16,

KEY_CTRL: 17,

KEY_ALT: 18,

KEY_PAUSE: 19,

KEY_CAPS_LOCK: 20,

KEY_ESCAPE: 27,

KEY_SPACE: 32,

KEY_PAGE_UP: 33,

KEY_PAGE_DOWN: 34,

KEY_END: 35,

KEY_HOME: 36,

KEY_LEFT_ARROW: 37,

KEY_UP_ARROW: 38,

KEY_RIGHT_ARROW: 39,

KEY_DOWN_ARROW: 40,

KEY_INSERT: 45,

KEY_DELETE: 46,

KEY_LEFT_WINDOW: 91,

KEY_RIGHT_WINDOW: 92,

KEY_SELECT: 93,

KEY_F1: 112,

KEY_F2: 113,

KEY_F3: 114,

KEY_F4: 115,

KEY_F5: 116,

KEY_F6: 117,

KEY_F7: 118,

KEY_F8: 119,

KEY_F9: 120,

KEY_F10: 121,

KEY_F11: 122,

KEY_F12: 123,

KEY_NUM_LOCK: 144,

KEY_SCROLL_LOCK: 145

dojo.event.browser.currentEvent

最近一次的 Event，其屬性包括：

altKey  //檢查 alt 鍵的狀態，當 alt 鍵按下時，值為 true

button  //檢查按下的滑鼠鍵，0 沒按鍵，1 按左鍵，2 按右鍵，3 按左右鍵，4 按中間鍵，5 按左鍵和中間鍵，6 按右

鍵和中間鍵，7 按所有的鍵

    //這個屬性僅用於 onmousedown, onmouseup, 和 onmousemove 事件。對其他事件，不管滑鼠狀態如何，都返回

0（比如 onclick）

clientX  //返回滑鼠在視窗客戶區域中的 X 座標

clientY  //返回滑鼠在視窗客戶區域中的 Y 座標

ctrlKey  //檢查 ctrl 鍵的狀態，當 ctrl 鍵按下時，值為 true

fromElement //檢測 onmouseover 和 onmouseout 事件發生時，滑鼠所離開的元素

keyCode  //檢測鍵盤事件相對應的內碼，僅當 type 為 keydown,keyup,keypress 時才有效

offsetX  //檢查相對於觸發事件的物件，滑鼠位置的水平座標

offsetY  //檢查相對於觸發事件的物件，滑鼠位置的垂直座標

propertyName //設定或返回元素的變化了的屬性的名稱，你可以通過使用 onpropertychange 事件，得到 propertyNa

me 的值

screenX  //檢測滑鼠相對於使用者螢幕的水平位置

screenY  //檢測滑鼠相對於使用者螢幕的垂直位置

shiftKey //檢查 shift 鍵的狀態，當 shift 鍵按下時，值為 true

srcElement //返回觸發事件的元素

srcFilter //返回觸發 onfilterchange 事件的濾鏡

toElement //檢測 onmouseover 和 onmouseout 事件發生時，滑鼠所進入的元素

type  //返回沒有“on”作為字首的事件名，比如 click, mousedown

x  //返回滑鼠相對於 css 屬性中有 position 屬性的上級元素的 x 軸座標。如果沒有 css 屬性中有 position 屬性的上級元

素，預設以 BODY 元素作為參考物件

y  //返回滑鼠相對於 css 屬性中有 position 屬性的上級元素的 y 軸座標。如果沒有 css 屬性中有 position 屬性的上級元

素，預設以 BODY 元素作為參考物件

target  //同 srcElement

currentTarget

layerX  //同 offsetX

layerY  //同 offsetY

pageX  //無水平滾動條的情況下與 clientX 同

pageY  //無水平滾動條的情況下與 clientY 同

relatedTarget // 僅當 type 為 mouseover,mouseout 時才有效

keys  //與 dojo.event.browser.keys 相同，僅當 type 為 keydown,keyup,keypress 時才有效

charCode //鍵值，僅當 type 為 keypress 時才有效

dojo.byId

非常有用的一個方法，與 prototype.js 的著名的$一樣

    似乎以前的版本還有 dojo.byIdArray, 不過最新的版本已經找不到這個函式了(除了

src\compat\0.2.2.js)

    如果有多個元素具有指定的 id，則返回的是一個集合

Usage Example:

 dojo.byId("divTest");

 dojo.byId("divTest", document);

 dojo.byId(document.getElementById("divTest"));  

dojo.version

dojo 的版本，可以取得 major, minor, patch, flag 和 revision

    這個物件沒什麼太大用處，除非你要根據 dojo 的版本選擇執行你的程式碼

dojo.raise

    丟擲一個異常

dojo.errorToString

    將異常轉換為字串

Usage Example:

 try

 {

    dojo.raise("列印失敗", new Error("檔案不存在"));

 }

 catch(e)

 {

    alert(dojo.errorToString(e));

 }

dojo.render

    系統環境物件

dojo.render.name     返回 browser ，說明是工作在瀏覽器下

dojo.render.ver        返回 4 ，返回 dojo 版本

dojo.os.win            返回 true 說明作業系統是 Windows

dojo.os.linux           返回 true 說明作業系統是 Linux

dojo.os.osx            返回 true 說明作業系統是 MacOS

dojo.html.ie             返回 true 說明瀏覽器是 Internet Explorer

dojo.html.opera             返回 true 說明瀏覽器是 Opera

dojo.html.khtml             返回 true 說明瀏覽器是 Konqueror

dojo.html.safari      返回 true 說明瀏覽器是 Safari

dojo.html.moz        返回 true 說明瀏覽器是 Mozilla FireFox

dojo.svg.capable     返回 true 說明瀏覽器支援 svg

dojo.vml.capable     返回 true 說明瀏覽器支援 vml

dojo.swf.capable    返回 true 說明瀏覽器支援 swf

dojo.swt.capable     返回 true 說明瀏覽器支援 swt (IBM 開發的 Standard Widget Toolkit)

如果 dojo.html.ie 為 true 的話

dojo.html.ie50         返回 true 說明瀏覽器是 IE 5.0

dojo.html.ie55         返回 true 說明瀏覽器是 IE 5.5

dojo.html.ie60         返回 true 說明瀏覽器是 IE 6.0

dojo.html.ie70         返回 true 說明瀏覽器是 IE 7.0

dojo.addOnLoad

可以載入指定函式到 window.load 時執行，好處就是可以很方便的在 window.load 時執行多個函式

Usage Example:

 dojo.addOnLoad(init);                    //init 是一個函式

 dojo.addOnLoad(myObject, init);       //init 是 myObject 物件的一個方法

dojo.require

    如果你想呼叫一個模組的物件的時候，你應該首先用 dojo.require 來請求這個模組，dojo 會根據

你的請求自動取得相應的 js 檔案，並載入到記憶體中，這樣你才能呼叫或建立其中的物件

dojo 會自動維護已載入的模組列表，所以是不會重複載入模組的

Usage Example:

 dojo.require("dojo.event");

dojo.requireIf=dojo.requireAfterIf

可以根據指定的條件來決定是否載入指定的模組

Usage Example:

 dojo.requireIf(dojo.html.ie, "dojo.html");   //如果 dojo.html.ie 為 true，才會載入 dojo.html 模

塊

dojo.provide

除非你要開發自己的模組，不然是用不到這個方法的，你可以這句看成是向系統註冊這個模組名稱

Usage Example:

 dojo.provide("dojo.custom");

dojo.exists

    判斷指定物件是否具有指定名稱的方法

Usage Example:

 dojo.exists(dojo, "exists"); //will return true

dojo.hostenv.getText

返回指定 url 的內容

PS: 由於瀏覽器的安全限制，因此只能用於取得同域名的 url 的內容，否則會報告許可權不夠

Usage Example:

 aSync = false; //同步，確保返回內容不為 null

 silent = true; //不丟擲錯誤

 s = dojo.hostenv.getText("http://www.google.com/", aSync, silent); //返回 Google 的首頁的

HTML

 alert(s);

dojo.debug

    輸出除錯資訊，如果在 djConfig 中指定了 debugContainerId，則輸出到指定的 console 容器

中，否則直接 document.write

    所有的除錯資訊均以 DEBUG: 開頭

Usage Example:

 dojo.debug("這是除錯資訊");

dojo.hostenv.println

與 dojo.debug 類似，不同的是，輸出內容沒有 DEBUG:

Usage Example:

dojo.hostenv.println("這是一般的輸出資訊");

dojo.debugShallow

    輸出指定物件的全部資訊(Shallow 說明並不會遍歷到下一級別的物件屬性)以供除錯

Usage Example:

 dojo.debugShallow(dojo.render.html);

    以上全部是自己閱讀原始碼寫的總結，如有錯誤，還請指明。

模組：dojo.validate.creditCard

DOJO 常用的驗證函式，dojo 提供了幾乎全方位的驗證函式

dojo.provide("dojo.validate.common");

dojo.validate.isValidCreditCard

dojo.validate.isValidCreditCard (/*String|Int*/value, /*String*/ccType);

Summary:

checks if type matches the # scheme, and if Luhn checksum is accurate (unless its an Enroute card,

the checkSum is skipped)

Value: Boolean

dojo.validate.isValidCreditCardNum

ber

dojo.validate.isValidCreditCardNumber (/*String|Int*/value,/*String?*/ccType)

//Summary:

// checks if the # matches the pattern for that card or any card types if none is specified

// value == CC #, white spaces and dashes are ignored

// ccType is of the values in cardinfo  ‐‐  if Omitted it it returns a | delimited string of

matching card types, or false if no matches found

//Value: Boolean

dojo.validate.isValidCvv

dojo.validate.isValidCvv (/*String|Int*/value, /*String*/ccType);

//Summary:

// returns true if the security code (CCV) matches the correct format for supplied ccType

//Value: Boolean

模組：dojo.validate.common

dojo.validate.isText

dojo.validate.isText (/*String*/value, /*Object?*/flags):

isText accepts a parameter, and determines if it is a string

value:

value to test.

returns:

Boolean

// summary:

// Checks if a string has non whitespace characters.

// Parameters allow you to constrain the length.

//

// value: A string

// flags: {length: Number, minlength: Number, maxlength: Number}

//       flags.length    If set, checks if there are exactly flags.length number of characters.

//       flags.minlength    If set, checks if there are at least flags.minlength number of characters.

//       flags.maxlength    If set, checks if there are at most flags.maxlength number of characters.

dojo.validate.isInteger

dojo.validate.isInteger (/*String*/value, /*Object?*/flags):

isInteger accepts a parameter, and determines if it is an integer. Note that this returns true is it is string integer, or a number

integer.

value:

value to test.

returns:

Boolean

// summary:

// Validates whether a string is in an integer format

//

// value  A string

// flags   {signed: Boolean|[true,false], separator: String}

//       flags.signed    The leading plus-or-minus sign.   Can be true, false, or [true, false].

//           Default is [true, false], (i.e. sign is optional).

//        flags.separator   The character used as the thousands separator.    Default is no separator.

//           For more than one symbol use an array, e.g. [",", ""], makes ',' optional.

dojo.validate.isRealNumber

dojo.validate.isRealNumber (/*String*/value, /*Object?*/flags):

isNumber accepts a parameter, and determines if it is a number. Note that this also returns true is it is string number.

value:

value to test.

returns:

Boolean

// summary:

// Validates whether a string is a real valued number.  

// Format is the usual exponential notation.

//

// value: A string

// flags: {places: Number, decimal: String, exponent: Boolean|[true,false], eSigned: Boolean|[true,false], ...}

//    flags.places  The integer number of decimal places.

//            If not given, the decimal part is optional and the number of places is unlimited.

//    flags.decimal  The character used for the decimal point.  Default is ".".

//       flags.exponent    Express in exponential notation.   Can be true, false, or [true, false].

//           Default is [true, false], (i.e. the exponential part is optional).

//    flags.eSigned  The leading plus-or-minus sign on the exponent.  Can be true, false,

//           or [true, false].   Default is [true, false], (i.e. sign is optional).

//       flags in regexp.integer can be applied.

dojo.validate.isCurrency

dojo.validate.isCurrency (/*String*/value, /*Object?*/flags)

// summary:

// Validates whether a string denotes a monetary value.

// value: A string

// flags: {signed:Boolean|[true,false], symbol:String, placement:String, separator:String,

// fractional:Boolean|[true,false], decimal:String}

//

//

//

//

//

flags.signed The leading plus‐or‐minus sign. Can be true, false, or [true, false].

Default is [true, false], (i.e. sign is optional).

flags.symbol A currency symbol such as Yen "�", Pound "�", or the Euro sign "�".

Default is "$". For more than one symbol use an array, e.g. ["$", ""], makes $ optional.

flags.placement The symbol can come "before" the number or "after". Default is

"before".

//

//

flags.separator The character used as the thousands separator. The default is ",".

flags.fractional The appropriate number of decimal places for fractional currency (e.g.

cents)

//

//

Can be true, false, or [true, false]. Default is [true, false], (i.e. cents are optional).

flags.decimal The character used for the decimal point. Default is ".".

dojo.validate.isInRange

dojo.validate.isInRange (/*String*/value, /*Object?*/flags)

//summary:

// Validates whether 是否 a string denoting 表示 an integer,

// real number, or monetary 貨幣 value is between a max and min.

//

// value: A string

// flags: {max:Number, min:Number, decimal:String}

//

flags.max A number, which the value must be less than or equal <= to for the validation

to be true.

//

flags.min A number, which the value must be greater than or equal >= to for the

validation to be true.

//

flags.decimal The character used for the decimal point. Default is ".".

例如：dojo.validate.isInRange("‐1", {max:100, min:1, decimal: "."})

dojo.validate.isNumberFormat

dojo.validate.isNumberFormat = function(/*String*/value, /*Object?*/flags)

// summary:

// Validates any sort of number based format

//

// description:

// Use it for phone numbers, social security numbers, zip‐codes, etc.

// The value can be validated against one format or one of multiple formats.

//

// Format

//

//

#

?

Stands 容忍 for a digit, 0‐9.

Stands 容忍 for an optional digit, 0‐9 or nothing.

//

//

All other characters must appear literally in the expression.

// Example

//

//

//

//

//

"(###) ###‐####"              ‐> (510) 542‐9742

"(###) ###‐#### x#???" ‐> (510) 542‐9742 x153

"###‐##‐####"                    ‐> 506‐82‐1089

"#####‐####"                      ‐> 98225‐1649

i.e. social security number

i.e. zip code

// value: A string

// flags: {format:String}

//

flags.format A string or an Array of strings for multiple formats.

dojo.validate.isValidLuhn

dojo.validate.isValidLuhn (/*String*/value)

//summary: Compares 比較 value against the Luhn algorithm 演算法 to verify 驗證 its integrity 完

整

模組：dojo.validate.check

dojo.validate.check

dojo.validate.check (/*HTMLFormElement*/form, /*Object*/profile)

// summary: validates user input of an HTML form based on input profile

//

// description:

// returns an object that contains several methods summarizing the results of the

validation

//

// form: form to be validated

// profile: specifies how the form fields are to be validated

// {trim:Array, uppercase:Array, lowercase:Array, ucfirst:Array, digit:Array,

// required:Array, dependencies:Object, constraints:Object, confirm:Object}

// Essentially private properties of results object

dojo.validate.evaluateConstraint

dojo.validate.evaluateConstraint (profile, /*Array*/constraint, fieldName, elem)

// summary:

// Evaluates dojo.validate.check() constraints that are specified as array

// arguments

//

// description: The arrays are expected to be in the format of:

//

//

//

constraints:{

fieldName: [functionToCall, param1, param2, etc.],

fieldName: [[functionToCallFirst,

param1],[functionToCallSecond,param2]]

//

//

}

// This function evaluates a single array function in the format of:

//

//

[functionName, argument1, argument2, etc]

// The function will be parsed out and evaluated against the incoming parameters.

//

// profile: The dojo.validate.check() profile that this evaluation is against.

// constraint: The single [] array of function and arguments for the function.

// fieldName: The form dom name of the field being validated.

// elem: The form element field.

模組: dojo.date.common

dojo.date.setDayOfYear

dojo.date.setDayOfYear(/*Date*/dateObject, /*Number*/dayOfYear)

summary: sets dateObject according to day of the year (1..366)

dojo.date.getDayOfYear

dojo.date.getDayOfYear (/*Date*/dateObject)

summary: gets the day of the year as represented by dateObject

dojo.date.setWeekOfYear

dojo.date.setWeekOfYear (/*Date*/dateObject, /*Number*/week, /*Number*/firstDay)

dojo.date.getWeekOfYear

dojo.date.getWeekOfYear(/*Date*/dateObject, /*Number*/firstDay)

dojo.date.setIsoWeekOfYear

dojo.date.setIsoWeekOfYear (/*Date*/dateObject, /*Number*/week, /*Number*/firstDay)

dojo.date.getIsoWeekOfYear

dojo.date.getIsoWeekOfYear (/*Date*/dateObject, /*Number*/firstDay)

模組：dojo.data

模組：dojo.validate.datetime

dojo.validate.isValidTime

dojo.validate.isValidTime(value, flags);

Validates a time value in any International format.

The value can be validated against one format or one of multiple formats.

Format

h

hh

H

HH

m

mm

s

ss

12 hour, no zero padding.

12 hour, has leading zero.

24 hour, no zero padding.

24 hour, has leading zero.

minutes, no zero padding.

minutes, has leading zero.

seconds, no zero padding.

seconds, has leading zero.

All other characters must appear literally in the expression.

Example

"h:m:s t"    ‐> 2:5:33 PM

"HH:mm:ss" ‐> 14:05:33

@param value A string.

@param flags An object.

flags.format A string or an array of strings. Default is "h:mm:ss t".

flags.amSymbol The symbol used for AM. Default is "AM".

flags.pmSymbol The symbol used for PM. Default is "PM".

@return true or false

dojo.validate.is24HourTime

is24HourTime(value):

is24HourTime accepts a parameter, and determines if it is a valid 24 hour

time.

value:

value to test.

returns:

Boolean

    Validates 24-hour military time format.

    Zero-padding is required for hours, minutes, and seconds.

  Seconds are optional.

  @param value  A string.

  @return  true or false

dojo.validate.is12HourTime

is12HourTime(value):

is12HourTime accepts a parameter, and determines if it is a valid 12 hour

time.

value:

value to test.

returns:

Boolean

  Validates 12-hour time format.

    Zero-padding is not allowed for hours, required for minutes and seconds.

  Seconds are optional.

  @param value  A string.

  @return  true or false

dojo.validate.isValidDate

isValidDate(dateValue, format):

isValidate determines if a date is valid under the specified format, or a default format of MM/DD/YYYY if not is specified.

dateValue:

value to test.

format:

format to test

Accepts many format types, including ISO8601 and RFC3339. Al characters in the format string are treated literally except the

following tokens: YYYY - matches a 4 digit year M - matches a non zero-padded month MM - matches a zero-padded month D

- matches a non zero-padded date DD - matches a zero-padded date DDD - matches an ordinal date, 1-365, and 366 on

leapyear ww - matches week of year, 1-53 d - matches day of week, 1-7

Examples: These are all equivalent to October 19, 2005:

Date Format 2005-W42-3 YYYY-Www-d 2005-292 YYYY-DDD 20051019 YYYYMMDD 10/19/2005 M/D/YYYY 19.10.2005

D.M.YYYY

returns:

boolean

模組：dojo.validate.web

dojo.validate.isIpAddress

isIpAddress(value):

isIpAddress accepts a parameter, and determines if it is a valid IP address.

(IPv6 is not currently supported)

value:

value to test.

returns:

Boolean

dojo.validate.isUrl

isUrl(value):

isUrl accepts a parameter, and determines if it is a valid url, based on

either a domain name or IP address. (IPv6 is not currently supported)

value:

value to test.

returns:

boolean

dojo.validate.isEmailAddress

isEmailAddress(value, allowLocal, allowCruft):

isEmailAddress determines if value is an email address, with various levels of strictness in its validation.

value:

value to test.

allowLocal:

boolean. if true, values such as foo@localhost will return true. allowCruft:

boolean. if true, values such as mailto:foo@dojotoolkit.org and <mailto:foo@dojotoolkit.org> will return true.

returns:

boolean

dojo.validate.isEmailAddressList

isEmailAddressList(value, allowLocal, allowCruft):

isEmailAddress determines if a list of potential values are email addresses, with various levels of strictness in its validation.

value:

comma separated list of values to test.

allowLocal:

boolean. if true, values such as foo@localhost will return true.

allowCruft:

boolean. if true, values such as mailto:foo@dojotoolkit.org and <mailto:foo@dojotoolkit.org> will return true.

returns:

Boolean

dojo.validate.getEmailAddressList

summary: Check if value is an email address list. If an empty list

is returned, the value didn't pass the test or it was empty.

value: A string

flags: An object (same as dojo.validate.isEmailAddressList)

模組：dojo.validate.us

dojo.validate.us.isCurrency

isCurrency accepts a parameter, and determines if it is a valid US currency.

Supports optional plus/minus sign, optional dollar-sign, optional cents, optional commas.

value:

value to test.

returns:

boolean

dojo.validate.us.isPhoneNumber

dojo.validate.us.isPhoneNumber(“314-1234-234”);

isPhoneNumber accepts a parameter, and determines if it is a valid US

phone number. Support 4 common separators (none, space, -, and .). Need to add support for extensions.

value:

value to test.

returns:

boolean

dojo.validate.us.isSocialSecurityN

umber

isSocialSecurityNumber(value):

isSocialSecurityNumber accepts a parameter, and determines if it is a valid

US Social Security Number. Supports space, -, or no separator.

value:

value to test.

returns:

boolean

dojo.validate.us.isZipCode

isZipCode(value):

isZipCode accepts a parameter, and determines if it is a valid US zip code.

Supports space, -, or no separator between base and optional +4 portion of US zip code.

value:

value to test.

returns:

boolean

dojo.validate.us.isState

isState accepts a two character parameter, and determines if it is a valid

postal abbreviation for a US state or territory.

value:

value to test, 2 digit character representing a postal abbreviation.

returns:

boolean

模組：dojo.dom

dojo.dom.isNode

dojo.dom.isNode (/* object */wh)

summary:

//

checks to see if wh is actually a node.

測試指定物件是否為節點

Usage Example:

dojo.dom.isNode(dojo.byId('edtTitle'));

dojo.dom.getUniqueId

//summary:

//returns a unique string for use with any DOM element

取得唯一 id

Usage Example:

dojo.dom.getUniqueId();  //will return dj_unique_#

dojo.dom.firstElement

dojo.dom.getFirstChildElement

function(/* Element */parentNode, /* string? */tagName)

取得指定節點下的第一個滿足指定 Tag 條件的子節點

Usage Example:

dojo.dom.firstElement(parentNode, 'SPAN');

dojo.dom.firstElement = dojo.dom.getFirstChildElement

dojo.dom.lastElement

dojo.dom.getLastChildElement

function(/* Element */parentNode, /* string? */tagName)

// summary:

//

returns the last child element matching tagName

取得指定節點下的最後一個滿足指定 Tag 條件的子節點

Usage Example:

dojo.dom.lastElement(parentNode, 'SPAN');

dojo.dom.nextElement

dojo.dom.getNextSiblingElement

function(/* Node */node, /* string? */tagName)

returns the next sibling element matching tagName

dojo.dom.nextElement = dojo.dom.getNextSiblingElement

取得指定節點的下一個滿足指定 Tag 條件的子節點

Usage Example:

dojo.dom.nextElement(node, 'SPAN');

dojo.dom.prevElement

dojo.dom.getPreviousSiblingElement

function(/* Node */node, /* string? */tagName)

returns the previous sibling element matching tagName

dojo.dom.prevElement = dojo.dom.getPreviousSiblingElement

取得指定節點的前一個滿足指定 Tag 條件的子節點

dojo.dom.prevElement(node, 'SPAN');

dojo.dom.moveChildren

function(/*Element*/srcNode, /*Element*/destNode, /*boolean?*/trim)

summary:

//

//

Moves children from srcNode to destNode and returns the count of

children moved; will trim off text nodes if trim == true

把指定節點下的所有子節點移動到目標節點下，並返回移動的節點數

Usage Example:

dojo.dom.moveChildren(srcNode, destNode, true); //僅移動子節點，srcNode 中的文字將被丟棄

dojo.dom.moveChildren(srcNode, destNode, false);//包括文字和子節點都將被移動到目標節點下

dojo.dom.copyChildren

function(/*Element*/srcNode, /*Element*/destNode, /*boolean?*/trim)

summary:

//

//

Copies children from srcNde to destNode and returns the count of

children copied; will trim off text nodes if trim == true

把指定節點下的所有子節點複製到目標節點下，並返回複製的節點數

dojo.dom.copyChildren(srcNode, destNode, true); //僅複製子節點，srcNode 中的文字將被忽略

dojo.dom.copyChildren(srcNode, destNode, false);//包括文字和子節點都將被複制到目標節點下

dojo.dom.replaceChildren

function(/*Element*/node, /*Node*/newChild)

summary:

//

//

Removes all children of node and appends newChild. All the existing

children will be destroyed.

// FIXME: what if newChild is an array‐like object?

用指定的新節點替換父節點下的所有子節點

Usage Example:

dojo.dom.replaceChildren(node, newChild); //目前還不支援 newChild 為陣列形式

dojo.dom.removeChildren

function(/*Element*/node)

removes all children from node and returns the count of children removed.

//

//

The children nodes are not destroyed. Be sure to call destroyNode on them

after they are not used anymore.

刪除指定節點下的所有子節點，並返回刪除的節點數

Usage Example:

dojo.dom.removeChildren(node);

dojo.dom.replaceNode

function(/*Element*/node, /*Element*/newNode)

// summary:

//

//

//

replaces node with newNode and returns a reference to the removed node.

To prevent IE memory leak, call destroyNode on the returned node when

it is no longer needed.

dojo.dom.destroyNode

function(/*Node*/node)

summary:

//

//

//

destroy a node (it can not be used any more). For IE, this is the

right function to call to prevent memory leaks. While for other

browsers, this is identical to dojo.dom.removeNode

用指定的新節點替換父節點下的所有子節點

Usage Example:

dojo.dom.replaceChildren(node, newChild); //目前還不支援 newChild 為陣列形式

dojo.dom.removeNode

function(/*Node*/node)

summary:

//

//

//

//

if node has a parent, removes node from parent and returns a

reference to the removed child.

To prevent IE memory leak, call destroyNode on the returned node when

it is no longer needed.

// node:

//

the node to remove from its parent.

刪除指定的節點

Usage Example:

dojo.dom.removeNode(node);

dojo.dom.getAncestors

function(/*Node*/node, /*function?*/filterFunction, /*boolean?*/returnFirstHit)

返回指定節點的父節點集合

Usage Example:

dojo.dom.getAncestors(node, null, false); //返回所有的父節點集合（包括指定的節點 node）

dojo.dom.getAncestors(node, null, true); //返回最近的一個父節點

dojo.dom.getAncestors(node, function(el){/* 此處增加過濾條件 */return true}, false); //返回所有滿足條件的父節點集

合

dojo.dom.getAncestorsByTag

function(/*Node*/node, /*String*/tag, /*boolean?*/returnFirstHit)

返回所有符合指定 Tag 的指定節點的父節點集合

Usage Example:

dojo.dom.getAncestorsByTag(node, 'span', false); //返回所有的型別為 SPAN 的父節點集合

dojo.dom.getAncestorsByTag(node, 'span', true);  //返回最近的一個型別為 SPAN 的父節點

dojo.dom.getFirstAncestorByTag

function(/*Node*/node, /*string*/tag)

返回最近的一個符合指定 Tag 的指定節點的父節點

Usage Example:

dojo.dom.getFirstAncestorByTag(node, 'span'); //返回最近的一個型別為 SPAN 的父節點

dojo.dom.isDescendantOf

function(/* Node */node, /* Node */ancestor, /* boolean? */guaranteeDescendant)

判斷指定的節點是否為另一個節點的子孫

Usage Example:

dojo.dom.isDescendantOf(node, ancestor, true); //判斷 node 是否為 ancestor 的子孫

dojo.dom.isDescendantOf(node, node, false); //will return true

dojo.dom.isDescendantOf(node, node, true); //will return false

dojo.dom.innerXML

function(/*Node*/node)

返回指定節點的 XML

Usage Example:

dojo.dom.innerXML(node);

dojo.dom.createDocument

function()

建立一個空的文件物件

Usage Example:

dojo.dom.createDocument();

dojo.dom.createDocumentFromText

function(/*string*/str, /*string?*/mimetype)

根據文字建立一個文件物件

Usage Example:

dojo.dom.createDocumentFromText('<?xml version="1.0" encoding="gb2312" ?><a>1</a>','text/xml');

dojo.dom.prependChild

function(/*Element*/node, /*Element*/parent)

將指定的節點插入到父節點的最前面

Usage Example:

dojo.dom.prependChild(node, parent);

dojo.dom.insertBefore

function(/*Node*/node, /*Node*/ref, /*boolean?*/force)

將指定的節點插入到參考節點的前面

Usage Example:

dojo.dom.insertBefore(node, ref, false); //如果滿足要求的話就直接退出

dojo.dom.insertBefore(node, ref, true);

dojo.dom.insertAfter

function(/*Node*/node, /*Node*/ref, /*boolean?*/force)

將指定的節點插入到參考節點的後面

Usage Example:

dojo.dom.insertAfter(node, ref, false); //如果滿足要求的話就直接退出

dojo.dom.insertAfter(node, ref, true);

dojo.dom.insertAtPosition

function(/*Node*/node, /*Node*/ref, /*string*/position)

將指定的節點插入到參考節點的指定位置

Usage Example:

dojo.dom.insertAtPosition(node, ref, "before");//參考節點之前

dojo.dom.insertAtPosition(node, ref, "after"); //參考節點之後

dojo.dom.insertAtPosition(node, ref, "first"); //參考節點的第一個子節點

dojo.dom.insertAtPosition(node, ref, "last");  //參考節點的最後一個子節點

dojo.dom.insertAtPosition(node, ref); //預設位置為"last"

dojo.dom.insertAtIndex

function(/*Node*/node, /*Element*/containingNode, /*number*/insertionIndex)

將指定的節點插入到參考節點的子節點中的指定索引的位置

Usage Example:

dojo.dom.insertAtIndex(node, containingNode, 3);  //把 node 插入到 containingNode 的子節點中，使其成為第 3 個子

節點

dojo.dom.textContent

function(/*Node*/node, /*string*/text)

設定或獲取指定節點的文字

Usage Example:

dojo.dom.textContent(node, 'text'); //設定 node 的文字為'text'

dojo.dom.textContent(node); //返回 node 的文字

dojo.dom.hasParent

function(/*Node*/node)

判斷指定節點是否有父節點

Usage Example:

dojo.dom.hasParent(node);

dojo.dom.isTag

function(/* Node */node /* ... */)

判斷節點是否具有指定的 tag

Usage Example:

var el = document.createElement("SPAN");

dojo.dom.isTag(el, "SPAN"); //will return "SPAN"

dojo.dom.isTag(el, "span"); //will return ""

dojo.dom.isTag(el, "INPUT", "SPAN", "IMG"); //will return "SPAN"

dojo.dom.setAttributeNS

function( /*Element*/elem, /*string*/namespaceURI,

/*string*/attrName, /*string*/attrValue)

summary:

//

implementation of DOM2 setAttributeNS that works cross browser.

模組：dojo.event.topic

dojo.event.topic

Topic 機制與 Advice 機制都能夠實現事件的繫結，但是顯然,Topic 更適合處理多重繫結。

釋出主題，然後由使用者訂閱的機制就是一個典型的觀察者模式

function()

dojo.event.topic.registerPublisher

function(/*String*/topic, /*Object*/obj, /*String*/funcName)

summary:

//

//

//

//

// topic:

//

// obj:

//

registers a function as a publisher on a topic. Subsequent

calls to the function will cause a publish event on the topic

with the arguments passed to the function passed to registered

listeners.

a unique, opaque string that names the topic

the scope to locate the function in

// funcName:

//

註冊主題釋出器

Usage Example:

the name of the function to register

dojo.event.topic.registerPublisher("myTopic", obj, "doOnClick2");

dojo.event.topic.subscribe

function(/*String*/topic, /*Object*/obj, /*String*/funcName)

summary:

//

//

//

// topic:

//

// obj:

//

susbscribes the function to the topic. Subsequent events

dispached to the topic will create a function call for the

obj.funcName() function.

a unique, opaque string that names the topic

the scope to locate the function in

// funcName:

//

the name of the function to being registered as a listener

訂閱主題

Usage Example:

dojo.event.topic.subscribe("myTopic", "test"); //執行 obj.doOnClick2()以後會自動執行 test()

dojo.event.topic.unsubscribe

function(/*String*/topic, /*Object*/obj, /*String*/funcName)

summary:

//

// topic:

//

// obj:

//

unsubscribes the obj.funcName() from the topic

a unique, opaque string that names the topic

the scope to locate the function in

// funcName:

//

取消訂閱主題

Usage Example:

the name of the function to being unregistered as a listener

dojo.event.topic.unsubscribe("myTopic", "test");

dojo.event.topic.destroy

function(/*String*/topic)

summary:

//

// topic:

//

destroys the topic and unregisters all listeners

a unique, opaque string that names the topic

刪除主題，此主題所有的訂閱都將失效

Usage Example:

dojo.event.topic.destroy("myTopic");

dojo.event.topic.publishApply

function(/*String*/topic, /*Array*/args)

summary:

//

//

//

// topic:

//

// args:

//

dispatches an event to the topic using the args array as the

source for the call arguments to each listener. This is similar

to JavaScript's built‐in Function.apply()

a unique, opaque string that names the topic

the arguments to be passed into listeners of the topic

dojo.event.topic.publish

function(/*String*/topic, /*Object*/message)

summary:

//

// topic:

//

manually "publish" to the passed topic

a unique, opaque string that names the topic

// message:

//

//

//

can be an array of parameters (similar to publishApply), or

will be treated as one of many arguments to be passed along in

a "flat" unrolling

模組：dojo.graphics.color

下面是 dojo 裡定義的顏色名稱

dojo.graphics.color.named.white //白色

dojo.graphics.color.named.black //黑色

dojo.graphics.color.named.red //紅色

dojo.graphics.color.named.green //綠色

dojo.graphics.color.named.blue //藍色

dojo.graphics.color.named.navy //海軍藍

dojo.graphics.color.named.gray //灰色

dojo.graphics.color.named.silver//銀色

dojo.graphics.color.Color

顏色類

Usage Example:

var color = new dojo.graphics.color.Color(dojo.graphics.color.named.black); //定義一個黑色的顏色物件

var color = new dojo.graphics.color.Color(0,0,0); //定義一個黑色的顏色物件

var color = new dojo.graphics.color.Color(0,0,0,1.0); //定義一個黑色的顏色物件

var color = new dojo.graphics.color.Color([0,0,0,1.0]); //定義一個黑色的顏色物件

var color = new dojo.graphics.color.Color('rgb(0,0,0)'); //定義一個黑色的顏色物件

var color = new dojo.graphics.color.Color('#000000'); //定義一個黑色的顏色物件

dojo.graphics.color.Color.toRgb

Usage Example:

color.toRgb();  //返回一個[0,0,0]的陣列

color.toRgb(true); //返回一個[0,0,0,1.0]的陣列

dojo.graphics.color.Color.toRgba

Usage Example:

color.toRgba();  //返回一個[0,0,0,1.0]的陣列

dojo.graphics.color.Color.toHex

dojo.graphics.color.Color.toString

Usage Example:

color.toHex();  //返回"#000000"

color.toString(); //返回"#000000"

dojo.graphics.color.Color.toCss

Usage Example:

color.toCss();  //返回"rgb(0,0,0)"

dojo.graphics.color.Color.blend

混合另一個顏色得到一個新顏色

Usage Example:

color.blend('#ffffff', 1); //返回[255,255,255]

color.blend('#ffffff', -1); //返回[0,0,0]

color.blend('#ffffff', 0); //按 1 比 1 混合黑色和白色，返回[127,127,127]

顏色引數可以為顏色的任意形式，比如陣列，字串等

or

dojo.graphics.color.blend([0,0,0], [255,255,255], 0); //will return [127,127,127]

dojo.graphics.color.blend("#000000", "#ffffff", 0); //will return "#7f7f7f"

若第一個引數為字串，則返回值也會返回字串

dojo.graphics.color.Color.blendHex

Usage Example:

dojo.graphics.color.blendHex("#000000", "#ffffff", 0); //will return "#7f7f7f"

dojo.graphics.color.extractRGB

將輸入轉換為 RGB 陣列

dojo.graphics.color.hex2rgb

將輸入的字串轉換為 RGB 陣列

dojo.graphics.color.rgb2hex

將輸入的 RGB 陣列轉換為字串

dojo.graphics.color.Color.fromArra

y

Usage Example:

var color = dojo.graphics.color.Color.fromArray([0,0,0,1.0]);

模組：dojo.uri.Uri

dojo.uri.Uri

專門用來處理 URI(統一資源識別符號)的類

Usage Example:

uri = (new dojo.uri.Uri("http://myserver/dojo/", "guide.html")).toString(); //uri will be "http://myserver/dojo/guide.html

"

uri = (new dojo.uri.Uri("http://myserver/dojo/", "../guide.html")).toString(); //uri will be "http://myserver/guide.html"

RFC 規定的 URI 語法：[scheme:][//authority][path][?query][#fragment]

authority 語法：[user-info@]host[:port]

比如我們定義一個 uri

var uri = new dojo.uri.Uri("http://user:password@myserver:80/dojo/", "guide.html?page=1#top");

則 uri 的屬性如下：

authority:  伺服器名 "user:password@myserver:80"

fragment: 片斷名 "top"

host: 主機名 "myserver"

password: 密碼 "password"

path: 路徑 "/dojo/guide.html"

port: 埠 80

query: 引數 "page=1"

scheme: 模式 "http"

uri: 完整的地址  "http://user:password@myserver:80/dojo/guide.html?page=1"

user: 使用者名稱 "user:" 似乎有點問題，多了一個冒號

模組：dojo.undo.browser

動態網頁程式（dynamic web application）避免了頻繁的重新整理頁面，不過通常也帶來後退和前進按鈕

會失去作用。更多的，有的時候，使用者可能很難把網頁加入收藏夾。

Dojo 提供了一個解決辦法，讓網頁程式處理瀏覽器的後退和前進，並且提供給瀏覽器一個唯一的地址。這

個解決辦法就是使用 dojo.undo.browser。

使用 dojo.undo.browser

在 dojo 0.2.2 版本中，並沒有 dojo.undo.browser，這是在 0.3 以後的版本中才加入的。

首先，需要使用 dojo.undo.browser.setInitialStae(state)設定當瀏覽器第一次載入網頁的狀態。

理論

動態網頁程式會呼叫 XMLHTTPRequest 和 DOM 來更新網頁內容而避免了重新整理，更新瀏覽歷史，並且也

不會改變瀏覽器的位址列。這就意味著當使用者點選 了後退按鈕，整個網頁程式丟失了當前執行的狀態（s

tate）。而且即使使用者想把當前的網頁內容加入收藏夾，也是不可能的，因為收藏夾不會記錄網頁程式運

行的狀態，而只會簡單的記錄下網頁程式的地址（URL）。

開發者可以使用 dojo.undo.browser 包得到使用者點選後退和前進的事件（event），然後根據這些事件

來更新頁面內容。 dojo.undo.browser 通過使用一個隱藏的表單（hidden IFRAME）或者一個唯一的

標籤（fragment identifier）傳遞瀏覽的歷史記錄。（譯者注：可以想像成一個 cookie 或者一個 sessi

on，但是這個 session 資訊是儲存在 hidden IFRAME 或者標籤中） 例如：

http://some.domain.com/my/path/to/page.html#fragmentIdentifier

（譯者注：#fragmentIdentifier 就是標籤記錄）

因為當改變標籤的時候並不會使網頁重新整理，所以非常適合記錄當前網頁程式的狀態。當然開發者可以自定

義一個更容易讀懂的標籤，並且使使用者可以把它加入收藏夾。

dojo.undo.browser 允許開發者建立一個相對於執行狀態的物件（state object），這個物件會得到回

叫（callback）當使用者點選後退或者前進按鈕。

開發

下面是使用 dojo.undo.browser 之前必須作的一些事情：

1：在 djConfig 中設定 preventBackButtonFix: false。這樣保證了隱藏的表單（hidden IFRAME）

將會新增到頁面當中，如果不加入這段，dojo.undo.browser 不會正常工作。

譯者注：設定方法就是在 header 中加入如下程式碼：

<script language="JavaScript" type="text/javascript">

djConfig = { isDebug: true, preventBackButtonFix: false };

</script>

2: 加入 dojo.require("dojo.undo.browser");

設定網頁程式的初始狀態：

dojo.undo.browser.setInitialState(

state);

當使用者每次點選前進或者後退，state 物件都會被呼叫。

然後我們需要給 state 物件建立幾個方法（function）

• 得到後退提示：back（），backButtion（）或者 handle（type），type 可

以是“back”或者是“forward”。

• 得到前進提示：forward（），forwardButton（）或者 handle(type），ty

pe 如上。

下面是個簡單的例子：

var state = {

back: function() { alert("Back was clicked!"); },

forward: function() { alert("Forward was clicked!"); }

};

註冊一個 state 物件使用下面的方法：

dojo.undo.browser.addToHistory(sta

te);

如 果向改變瀏覽器的地址（URL），引用 state 物件的 changeUrl 屬性。如果 changeUrl 是 true，doj

o.undo.browser 就將產生一個唯一的標籤，如果 changeUrl 被定義為任何其他的值（不包括 undefin

ed，null，0 和空 string），那麼這個值就會被使 用為標籤。這樣使用者就可以把當前頁加入收藏夾了。

提示

• 如果你要使用 changeUrl，即使你不設定自己的標籤，也至少定義為 true。

• 如果你要在本機測試，不要使用 IE。因為當 IE 訪問本地檔案時不會建立歷史列表 ifram_histor

y.html。請把網頁上傳到伺服器上測試。

• Safari2.0.3+：只有後退按鈕可以正常工作，並且只有當 changeUrl 沒用使用的時候。

• Opera 8.5.3：不會正常執行。

這裡有一個網上的例子：

http://archive.dojotoolkit.org/nightly/tests/undo/test_browser.html

模組：dojo.connect

模組：dojo.widget

dojox.widget.FisheyeList

dojo.widget.FisheyeList

<body>

<%--

  dojoType="dojox.widget.FisheyeList"  dojoType 設定

  itemWidth/itemHeight:普通模式的寬和高

  itemMaxWidth/itemMaxHeight:最大模式的寬和高

  orientation:是否水平,預設為垂直方式

  effectUnits:有效相關變化的單元數

  itemPadding:調整每項的大小

  attachEdge:icon 跟隨的方向 分為 bottom,、center、top 三種

  labelEdge:標籤的顯示位置:bottom,和 top

  conservativeTrigger:進入圖示才展現魚眼效果

  --%>

  //主層

  <div dojoType="dojox.widget.FisheyeList"  

      itemWidth="50"

      itemHeight="50"

      itemMaxWidth="200"

      itemMaxHeight="200"

      orientation="horizontal"

      effectUnits="2"

      itemPadding="10"

      attachEdge="top"

      labelEdge="bottom"

      conservativeTrigger="false">

      //下面為包含在主層中的子層

<%--

          dojoType="dojox.widget.FisheyeListItem"  設定為子項

      --%>

      <div dojoType="dojox.widget.FisheyeListItem"

       iconsrc="image1.jpg" label="維遠泰克">

         </div>

      <div dojoType="dojox.widget.FisheyeListItem"

       iconsrc="image2.jpg" label="網易">

         </div>

      <div dojoType="dojox.widget.FisheyeListItem"

       iconsrc="image3.jpg" label="夏新部落格">

         </div>

  </div>

</body>

dijit.layout.TabContainer

讓頁面更有條理：dijit.layout.TabContainer

當一個頁面內容比較多，比較複雜的時候，可以用標籤頁，將功能類似的一些表格或者資訊放在同一個標籤頁內，使用者可以方

便的在不同的標籤頁之間切換，關閉某個標籤頁，或者刪除某個標籤頁。

一個最簡單的例子：

<html>

<head>

<title>Button Widget Dojo Tests</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

<script type="text/javascript">

       dojo.require("dijit.layout.ContentPane");

       dojo.require("dijit.layout.TabContainer");

</script>

</head>

<body class="tundra">

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;" selectedChild="tab1">

       <div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1" closable="true">hi</div>

       <div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2">hi2</div>

</div>

</body>

</html>

如果不同的標籤也是單獨不通的檔案，我們可以在 dijit.layout.ContentPane 元件上設定 href 屬性，指定到一個外部檔案。需要

注意的是，那個頁面必須是 utf-8 的字符集，否則的話中文會出現亂碼。例如：<div id="tab2" dojoType="dijit.layout.ContentPane"

href="tab2.html" refreshOnShow="true" title="Tab 2"></div>

如果要動態新增一個標籤頁的話可以嘗試下面的例子：

<script>

function fff(){

var rrr=document.createElement("DIV");     

var tmp = new dijit.layout.ContentPane({title:"tab3",closable:true},rrr);

tmp.setContent(" <iframe style='width:100%;height:100%;border:1px' border=1 src='http://www.baidu.com/'></iframe>");

dijit.byId("mainTabContainer").addChild(tmp);

dijit.byId("mainTabContainer").selectChild(tmp);

//dijit.byId("mainTabContainer").removeChild(dijit.byId("tab2"));

}

</script>

這個例子中使用了 iframe，主要原因：如果多個頁面的話，很有可能有多個 form，form 之間如果有巢狀就會比較亂，所以分成

了獨立的 iframe，當然完全可以在新建一個 ContentPane 的時候設定一下 href 屬性，直接載入一個頁面。

dijit.form.ValidationTextbox

功能強大的文字框：dijit.form.ValidationTextbox

這個文字輸入框的功能比較強大，關鍵是它能夠提供一些常用的驗證和大小寫轉換。下面介紹一個例子和一些常用的屬性：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>validationTextbox</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

       .dijitInputFieldFocused{

              border:solid 2px #FFDF00;                   

       }

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

       <script>

              dojo.require("dijit.form.ValidationTextbox");

              dojo.require("dijit.form.NumberTextbox");

       </script>

</head>

<body class="tundra">

<form name="form1">

       <input type="text" id="vt" dojoType="dijit.form.ValidationTextbox"            

              promptMessage="請輸入資訊"

              invalidMessage="輸入的資訊有誤"

              required="true"

              trim="true"

              propercase="true"

       ><br />

一些屬性：<br />

required="true"               //必須填寫<br />

trim="true"                   //將前後的空格自動刪除<br />

propercase="true"    //單詞首字母大寫<br />

uppercase="true"    //大寫字母形式<br />

lowercase="true"    //小寫字母形式<br />

<hr />

驗證文字元件可以支援正規表示式驗證，比如：<br />

不包含空格驗證：<input id="vt1" type="text" name="phone" value="someTestString"

                      dojoType="dijit.form.ValidationTextbox"

                      regExp="[\w]+"

                      required="true"

                      trim="true"

                      invalidMessage="輸入中不允許包含空格"><br />

email 地址驗證:<input id="vt2" type="text" name="phone" value="/amushen2005@hotmail.com"

                      dojoType="dijit.form.ValidationTextbox"

                      regExp="(\w+@\w+\.\w+)(\.{0,1}\w*)(\.{0,1}\w*)"

                      required="true"

                      trim="true"

                      invalidMessage="輸入合法的 email 地址"><br />

只允許輸入數字：

<input id="vt1" type="text" name="phone" value="/123.34"

                      dojoType="dijit.form.NumberTextbox"                

                      required="true"

                      trim="true"

                      invalidMessage="只允許輸入數字"><br />

</form>

</body>

</html>

ValidationTextbox 的一些常用方法：

setValue(); //不要使用.value 或者.innerHTML 來設定值，你可能設定不成功或者失去校驗

getValue();

validate();  手工校驗

isEmpty(); 是否為空

isValid();  是否符合校驗規則

關於校驗的正規表示式法比較靈活，功能也非常強大，可以到微軟或者 sun 的官方網站檢視一些權威的資料。或者直接上網上

搜尋一些常用的正規表示式。

下面給出一些常用正規表示式：

1、 非負整數：”^d+$”

2、 正整數：”^[0-9]*[1-9][0-9]*$”

3、 非正整數：”^((-d+)|(0+))$”

4、 負整數：”^-[0-9]*[1-9][0-9]*$”

5、 整數：”^-?d+$”

6、 非負浮點數：”^d+(.d+)?$”

7、 正浮點數：”^((0-9)+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$”

8、 非正浮點數：”^((-d+.d+)?)|(0+(.0+)?))$”

9、 負浮點數：”^(-((正浮點數正則式)))$”

10、英文字串：”^[A-Za-z]+$”

11、英文大寫串：”^[A-Z]+$”

12、英文小寫串：”^[a-z]+$”

13、英文字元數字串：”^[A-Za-z0-9]+$”

14、英數字加下劃線串：”^w+$”

15、E-mail 地址：”^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$”

16、URL：”^[a-zA-Z]+://(w+(-w+)*)(.(w+(-w+)*))*(?s*)?$”

17、匹配中文字元的正規表示式： [\u4e00-\u9fa5]

18、匹配雙位元組字元(包括漢字在內)：[^\x00-\xff]

19、匹配 HTML 標記的正規表示式：/<(.*)>.*<\/\1>|<(.*) \/>/

20、匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}

21、匹配中國郵政編碼：[1-9]\d{5}(?!\d)

22、匹配身份證：\d{15}|\d{18}

dijit.Dialog

帶背景遮罩的對話方塊：dijit.Dialog

這個對話方塊通用性非常好。而且顯示效果比較友好，能給使用者很好的體驗。而且無論是正常方式，還是程式設計方式，實現起來

都比較簡單。

對話方塊包括兩種，一種是普通的對話方塊，一種是提示視窗的對話方塊，用起來都很方便。

下面是一個普通的對話方塊：

<html>

<head>

<title>Dialog</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

<script type="text/javascript">

       dojo.require("dijit.Dialog");

       function showDia(){

              dijit.byId("dialog1").show();          

       }

</script>

<style>

.dijitDialogUnderlay {

       background: #666666;

       opacity: 0.5;

}

</style>

</head>

<body class="tundra">

<button id="b1" οnclick="showDia()">顯示 dojo 對話方塊</button> <br>

<div dojoType="dijit.Dialog" id="dialog1" closeNode="hider" title="填寫表單">

       <form οnsubmit="return false;">

              <table>

                      <tr>

                             <td><label for="name">姓名: </label></td>

                             <td><input type="text" id="name"></td>

                      </tr>

                      <tr>

                             <td><label for="loc">性別: </label></td>

                             <td><input type="text" id="loc"></td>

                      </tr>

                      <tr>

                             <td><label for="desc">年齡: </label></td>

                             <td><input type="text" id="desc"></td>

                      </tr>

                      <tr>

                             <td><label for="fileloc">電子郵件: </label></td>

                             <td><input type="file" id="fileloc"></td>

                      </tr>

                      <tr>

                             <td colspan="2" align="center">

                                    <input type="button" id="hider" value="填好了"></td>

                      </tr>

              </table>

       </form>

</div><br>

<br>

<select><option>看看對話方塊能不能擋住這個東西</option></select><br>

<br>

遮罩的顏色可以通過設定.dijitDialogUnderlay 來控制

</body>

</html>

通過程式設計方式的一個對話方塊：

<html>

<head>

<title>Dialog</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

<script type="text/javascript">

       dojo.require("dijit.Dialog");

       function showDia(cont){

              var pane=dojo.byId("Dpane");

              if(!pane){

                      pane=document.createElement("DIV");

                      pane.setAttribute("id","Dpane");

                      pane.style.width = "300px";

                      document.body.appendChild(pane);

              }

              pane.innerHTML=cont;          

              var dia=new dijit.Dialog({title:"dojo 對話方塊"},pane);

              dia.show();             

       }

       var alert=showDia;

</script>

<style>

.dijitDialogUnderlay {

       background: #666666;

       opacity: 0.5;

}

</style>

</head>

<body class="tundra">

<button id="b1" οnclick="alert('測試程式設計方式')">顯示 dojo 對話方塊</button> <br>

<br>

<select><option>看看對話方塊能不能擋住這個東西</option></select><br>

<br>

遮罩的顏色可以通過設定.dijitDialogUnderlay 來控制

</body>

</html>

提示對話方塊的例子：

<html>

<head>

<title>Dialog</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

<script type="text/javascript">

       dojo.require("dijit.Dialog");

       dojo.require("dijit.form.Button");    

</script>

</head>

<body class="tundra">

<div dojoType="dijit.form.DropDownButton">

       <span>顯示登入表單</span>

       <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="登入資訊" closeNode="hider2">

              <form οnsubmit="return false;">

                      <table>

                             <tr>

                                    <td><label for="user">使用者名稱:</label></td>

                                    <td><input type="text" id="user"></td>

                             </tr>

                             <tr>

                                    <td><label for="pwd">密  碼:</label></td>

                                    <td><input type="password" id="pwd"></td>

                             </tr>

                             <tr>

                                    <td colspan="2" align="center">

                                           <button id="hider2">登  錄</button>

                             </tr>

                      </table>

              </form>

       </div>

</div>

<br>

<select><option>看看對話方塊能不能擋住這個東西</option></select><br>

<br>

這個彈出式的對話方塊使用 DropDownButton 來實現比較方便，如果想要通過其他方式實現可能需要一些 dojo 的程式設計。<br>

其實也可以使用 dijit.MasterTooltip 來實現類似的功能。<br>

</body>

</html>

dijit.Menu

介紹一下使用 dojo 建立右鍵選單，有的時候很有用的。右鍵選單的核心類是 dijit.Menu，選單類是 dijit.MenuItem;

如果想要新增二級選單，需要使用 dijit.PopupMenuItem; 如果只是簡單的右鍵選單，還需要設定一下 dijit.Menu 屬性，設定 contextMenuForWindow="true"

下面這個是最簡單的一個例子：

<html>

<head>

<title>測試選單</title>

<style type="text/css">

 @import "../js/dojo/resources/dojo.css";

 @import "../js/dijit/themes/tundra/tundra.css";

</style>  

<script type="text/javascript"

 djConfig="parseOnLoad: true, isDebug: false"

 src="../js/dojo/dojo.js"></script>

<script type="text/javascript">

 dojo.require("dijit.Menu");

</script>

</head>

<body class="tundra">

<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">

 <div dojoType="dijit.MenuItem" onClick="alert('複製');">複製</div>

 <div dojoType="dijit.MenuItem" onClick="alert('貼上');">貼上</div>

 <div dojoType="dijit.MenuSeparator"></div>

 <div dojoType="dijit.MenuItem" onClick="alert('新增新使用者');">新增新使用者</div>

 <div dojoType="dijit.PopupMenuItem">

  <span>搜尋</span>

  <div dojoType="dijit.Menu" id="submenu2">

   <div dojoType="dijit.MenuItem" onClick="alert('正常搜尋')">正常搜尋  </div>

   <div dojoType="dijit.MenuItem" onClick="alert('模糊搜尋')">模糊搜尋  </div>

  </div>

 </div>

</div>

點右鍵測試選單

</body>

</html>

如果想為選單新增圖示，使用 iconClass="dijitEditorIconCut"  在 MenuItem 上面。

dijit.TitlePane

帶有標題的容器：dijit.TitlePane

TitlePane 的用處十分廣泛，它可以是一個頁面看上去很整齊，而且，它獨特的隱藏顯示內容的功能，可以節省頁面很多的空間。

如果和 dnd 連在一起使用，還可以實現拖動，也就是讓使用者自定義自己的頁面佈局。下面一個簡單的例子：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>titlepane</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

       <script>

       dojo.require("dijit.TitlePane");

       </script>

</head>

<body class="tundra">

<div dojoType="dijit.TitlePane" title="<b>簡單測試一下</b>" style="width: 300px;">

這是一個 TitlePan 的最簡單例子

</div>

</body>

</html>

Dijit.TitlePane 也同樣可以設定 href 屬性，來連結到另外一個頁面，都是通過 xhrGet 的方式從另一個頁面返回資料的，所以要

注意漢字字符集問題。

可以呼叫方法：setTitle(str)來設定 Title 上面的漢字。

dijit.Tooltip

在大多數業務系統中，有很多表單的填寫都很複雜，有些文字框的含義比較難理解。為了給使用者一個提示，html 預設有一個

title 屬性，比如<div title=’haha’>test</div>，如果設定了這個屬性，瀏覽器會在你滑鼠停留在這個元素上的時候，給出你一個提

示。

後來微軟為了解決<select>控制元件的一個 bug，又提供了 window.createPopup()方法，這個方法可以定製一個 popup 視窗。也可

以很好的顯示提示資訊。

現在 dojo 為我們提供了一個更美觀，更實用，更方便的控制元件。Dijit.Tooltip 控制元件的外觀可以方便的定製，而且使用起來非常方便。

當然它也有它的不足之處，比如，當一個頁面有兩個控制元件想共用一個 tooltip 的話，就會失效。下面給出一個最簡單的例子：

<html>

<head>

       <title>Dojo Tooltip Widget Test</title>

       <script type="text/javascript" src="testBidi.js"></script>

       <script type="text/javascript" src="../js/dojo/dojo.js"  

              djConfig="parseOnLoad: true, isDebug: true"></script>

       <script type="text/javascript">

              dojo.require("dijit.Tooltip");

              dojo.require("dojo.parser");     // find widgets

       </script>

       <style type="text/css">

              @import "../js/dojo/resources/dojo.css";

              @import "../js/dijit/themes/tundra/tundra.css";

              @import "css/dijitTests.css";

       </style>

</head>

<body class="tundra">

       <form>

              <input type="input" name="id1" value="#1"><br>

              <input type="input" name="id2" value="#2"><br>       

       </form>

       <span dojoType="dijit.Tooltip" connectId="id1">tooltip for id1 這個怎麼樣</span>

       <div title="haha">tesdfdfdfdfdft</div>

</body>

</html>

dijit/tooltip.js 還提供了另一個有用的工具 dijit.MasterTooltip 這個工具使用起來非常方便，只要 dojo.require(“dijit.Tooltip”)就可

以使用了，不需要用 html 標籤定義，是程式設計來顯示和隱藏的。主要就兩個方法：第一：show;第二 hide。

例子：

<html>

<head>

<title>tooltip</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

<script type="text/javascript">

       dojo.require("dijit.Tooltip");

function showMessage(){

              dijit.MasterTooltip.show("顯示提示資訊", dojo.byId("select1"));

       }

function hideMessage(){

dijit.MasterTooltip.hide();

}

</script>

</head>

<body class="tundra"><br>

       <select id="select1"><option>測試使用</option><option>2</option></select><br><br>

<br>

<button οnclick="showMessage()">show</button> 

<button οnclick="hideMessage()">hide</button> 

</body>

</html>

dijit.Tree

使用恐怖的 dijit.Tree

可以說 dojo0.9bate的 dijit.Tree 太靈活了，功能太強大了。所以使用的時候定製和程式設計就要很多了。Dijit.Tree資料來源必須是Store，

常用的是 dojo.data.JsonItemStore  ，不能夠使用 inline 方式。

下面給出兩個例子，一個例子是最基礎的，一個例子是動態生成的：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>TREE</title>

<style type="text/css">

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

</style>          

<script type="text/javascript"

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js"></script>

       <script>

              dojo.require("dojo.data.JsonItemStore");

              dojo.require("dijit.Tree");

                             dojo.addOnLoad(function(){

                                    dojo.subscribe("tree", null, function(message){

                                           console.log("sn:"+message.event);

                                           console.log("sn:"+message.node.item.name);

                                    });    

                             });

       </script>

</head>

<body class="tundra">

<div dojoType="dojo.data.JsonItemStore" jsId="continentStore"

              url="../js/dijit/tests/countries.json"></div>

       <div dojoType="dijit.Tree" id=tree store="continentStore" query="{type:'continent'}"

              labelAttr="name" typeAttr="type"></div>

</body>

</html>

動態新增樹節點：

function addNode(){

       //add one treeNode

       var _tree=dijit.byId("tree");

       var tdata={label:"FR",tree:_tree,item:{name:"FR",type:"one"}};    

       var child=new dijit._TreeNode(tdata);          

       _tree.addChild(child,1);

       child._updateLayout();

       _tree.getChildren()[2]._updateLayout();

       child.setChildren({});

       child._setExpando();

//     console.debug();

}

function addSecondNode(){

       // add a treenode for FR

       var _tree=dijit.byId("tree");

       var fr=_tree.getChildren()[1];

       var tdata=[{label:"Paris",item:{type:"city",name:"Paris"}}];

       fr.setChildren(tdata);

       fr.getChildren()[0].setChildren({});

       fr.isFolder=true;

       fr.isExpanded=false;

       fr._updateLayout();

       fr._setExpando();

}

function addThirdNode(){

       var _tree=dijit.byId("tree");

       var fr=_tree.getChildren()[1];

       var tdata={label:"pp",tree:_tree,item:{name:"pp",type:"city"}};     

       var child=new dijit._TreeNode(tdata);          

       child.setChildren({});

       fr.addChild(child);

       child._updateLayout();

       fr.getChildren()[0]._updateLayout();

}

如果要懶載入一個樹，就需要繼承 JsonItemStore，可以參考/dojox/data/demos/裡面的例子。如果想從其他資料來源得到樹，可

以參考 dojox.data 裡面的其他 store.總之，tree 的資料來源必須是 Store。

最新版本的 dojo 取消了 jsonitemstore，使用了 IterFileReadStore。（子節點的定義不一樣了，多了個下劃線。）

所以如果想要動態建立一個樹，必須修改一下程式。

例子如下：

<html>

<head>

<title>test tree , dynamic add treenode</title>

<style type="text/css">

@import "../js/dojo/resources/dojo.css";

@import "../js/dijit/themes/tundra/tundra.css";

</style>

<script type="text/javascript"

djConfig="parseOnLoad: true, isDebug: false"

src="/"";../js/dojo/dojo.js"></script>

<script type="text/javascript">

dojo.require("dijit.Tree");

dojo.require("dojo.data.ItemFileReadStore");

function init(){

var treeData={  

items: [

{ name:'China', type:'one',

children:[{_reference:'beijing'}] },

{ name:'beijing', type:'city'},

{ name:'USA' , type:'one'},

{ name:'UK' , type:'one'}

],

identifier: 'name',

label: 'name'  

};

var store1=new dojo.data.ItemFileReadStore({data:treeData});

var _tree=new dijit.Tree({

id:'tree',

store:store1,

query:{type:'one'},

labelAttr:"name",

typeAttr:"type"},dojo.byId("tree"));

console.log(store1._getItemsArray()[0].name);

}

dojo.addOnLoad(init);

function openNode(message){

var node=message.node;

if(message.event!="toggleOpen")return;

console.log('click');

}

dojo.subscribe("tree",null,"openNode");

</script>

</head>

<body class="tundra">

<div id="tree"></div>

</body>

</html>