天天看點
傳回

dojo學習之1

<!DOCTYPE html>
<html >
<head>
	<title>Exploring Dojo</title>
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" target="_blank" rel="external nofollow" >
	<script src='dojo/dojo.js'></script>
	<script>

	</script>
</head>
<body class="claro">
    <h1>Exploring Dojo</h1>
	<div id="message">This is a DIV element with id attribute message.</div>
	<ul id="list">
		<li>This is the first item in a list</li>
		<li class="highlight">This is the second item in a list</li>
		<li>This is the third item in a list</li>
	</ul>
	<script>
		dojo.addOnLoad(function() {
			dojo.create(
				"div",
				{
					"innerHTML": "Hello, World!"
				},
				dojo.body()
			);
		});
	</script>
</body>
</html>

DOM 實用函數

DOM 實用函數通過提供根據 ID 尋找條目的能力或者使用 CSS3 選擇器，使得使用 DOM 中的元素比較容易。還有一些其他功能，可以建立和銷毀元素，以及操作現有元素内容。

dojo.byId

dojo.byId

函數使您可以通過

id

屬性選擇一個 DOM 節點。該函數是标準 JavaScript

document.getElementById

函數的一個别名，但是顯然簡短易書寫，而且還解決了很多跨浏覽器沖突。現在，我們來使用 Firebug 控制台，通過 ID “message” 擷取 DOM 元素内容：

dojo.byId("message").innerHTML;

dojo.fadeOut

 指令 
dojo.fadeOut({
    node: dojo.byId("message"),
    duration: 600
}).play();

您可以看到元素逐漸淡出，從頁面上消失了。要想使其再次漸顯回來，在指令行中将

fadeOut

修改為

fadeIn

，再次運作。

dojo.query

如果您想一次引用幾個元素，這就需要引入

dojo.query

函數了

如果您想一次引用 ID 為 “list” 的無序清單的所有

<li>

子元素，然後将每個元素的内容列印到控制台上。有了

dojo.query

，這将非常簡單。

dojo.query("#list li").forEach(function(item) {
    console.log(item.innerHTML);
});

dojo.query

函數接受一個字元串參數，使用一個 CSS3 選擇器引用您想選擇的元素。在這個具體執行個體中，假設您想選擇所有

li

元素，這是 ID 為 “list” 的元素的子元素。該函數傳回一個組比對查詢的元素。在清單 6 的示例中，您使用

dojo.forEach

函數對這個數組進行周遊，然後将發現的每個元素的

innerHTML

屬性輸出到控制台。

我們先來使用

dojo.query

尋找任何類名為

highlight

的 HTML 元素，并應用一些樣式使它們突出顯示

dojo.query(".highlight").style({
    backgroundColor: "yellow",
    color: "red"
});

其他有用的實用函數

除了 DOM 查詢和元素選擇之外，在 Dojo 中還有很多其他實用函數使得使用 DOM 更為容易。在 “Hello, World” 示例中您已經見過其中兩個。

dojo.body

函數隻傳回文檔的

<body>

元素，

dojo.body

的一個引用，以及文檔對象本身。

dojo.create

讓您可以快速建立一個新元素、定義它的屬性、然後将它放在 DOM 中。

現有的其他函數包括

dojo.place

，它允許您将現有的或新建立的元素放在文檔的任何地方。

dojo.empty

隻執行您所期望的 — 清空一個 DOM 元素的内容。

dojo.destroy

删除一個節點以及其所有子元素。

dojo.forEach

第一個值得一提的函數是

dojo.forEach

，這個函數您已經在上一小節的

dojo.query

示例中見過了。這個函數允許您在 NodeList 上定義一個疊代器，提供一個可以應用到 NodeList 中的每一項上的功能。我們在清單 8 中來看一個更為基本的示例。

var list = ['My','name','is','Joe'];
dojo.forEach(list, function(item, i) {
    console.log((i+1)+'. '+item);
});

forEach

函數周遊數組中的每一項，然後在其上執行附加功能。上面，您已經使用了一個

anonymous

函數，但是您還可以使用一個命名函數

使用一個命名函數通過

dojo.forEach

 周遊一個數組 
var list = ['My','name','is','Joe'];

var printArray = function(item, i) {
    console.log((i+1)+'. '+item);
}

dojo.forEach(list, printArray);

dojo.indexOf

dojo.indexOf

函數使得您可以在一個數組中找出具體一個值的位置。最好是結合示例說明。使用上一小節建立的清單數組，嘗試找出值為

name

的元素在數組中的位址：

dojo.indexOf(list, "name");

.

該函數傳回給定值的第一個位置的下标，是以，如果數組中有多個項有相同的值，它隻停在第一項上，Dojo 提供一個類似的函數，

dojo.lastIndexOf

，允許您尋找特定值的最後一個位置。該函數與

dojo.indexOf

運作方式完全一樣。

dojo.filter

dojo.filter

函數支援您建立一個新數組，這個新數組是另一個數組的過濾版。例如，如果您想為您早期建立的清單數組建立一個新版本，但是又不想包括值為

is

的那些項。您可以使用清單 12 所示的代碼。

var filteredList = dojo.filter(list, function(item) {
    return item != "is";
});

dojo.forEach(filteredList, "console.log(item)");

DOM 事件處理

将函數附加到 DOM 對象的第一個方法是使用

dojo.connect

函數。

var message = dojo.byId("message");
dojo.connect(message, "onclick", function() {
    alert(message.innerHTML);
});
附加事件到數組元素上 
dojo.query("#list li").forEach(function(item) {
    dojo.connect(item, "onclick", function() {
        dojo.style(item, {
            fontWeight: "bold"
        });
    });
});
附加事件到數組元素上（改進的） 
dojo.query("#list li").onclick(function(e) {
    dojo.style(e.target, {
        fontWeight: "bold"
    });
});

e

參數是

Event

對象的一個引用，對象的

target

屬性幫助您确定觸發事件的元素。您可以使用這個來指出粗體樣式應該被應用的元素。

連接配接函數到其他函數

Dojo 也支援您以同樣的方式将函數連接配接到其他函數。這方面的一個示例可能是這樣一個函數，在您的頁面的某個地方顯示一個旋轉輪子。當使用者執行一個 Ajax 函數時，您想要顯示這個圖像。類似地，當函數傳回一個響應時，您想要隐藏該圖像。如果不使用

dojo.connect

，您的代碼看起來像如下清單 這樣。

function toggleImage() {
    //Code to show/hide loading image goes here
}

function callAjax() {
    toggleImage();
    //Code to call Ajax function goes here
}

function handleResponse() {
    //Code to handle Ajax response goes here
    toggleImage();
}

這段代碼沒什麼問題，

toggleImage

函數定義包含在

callAjax

和

handleResponse

函數中。如果您想添加另一個函數調用，您需要再次修改這些函數來包含額外調用。現在不需要向這些函數本身添加函數調用，隻需要使用

dojo.connect

來在它們之間建立一個連結。

使用

dojo.connect

 連接配接函數到其他函數 
function toggleImage() {
    //Code to show/hide loading image goes here
}

function callAjax() {
    //Code to call Ajax function goes here
}

function handleResponse() {
    //Code to handle Ajax response goes here
}

dojo.connect(callAjax, toggleImage);
dojo.connect(handleResponse, toggleImage);

釋出和訂閱主題

Dojo 事件處理最後值得注意的一點是釋出和訂閱主題的能力。這使得 Dojo 元件可以彼此互動，即使它們沒有意識到彼此的存在。例如，假設您定義了一個名為

printName

的主題，它綁定了一個

message

對象包含一個人的姓和名。您可以有一個訂閱這個主題的元件，在任何時候當另一個元件使用一個人的名字釋出到該主題時，這将會将這個名字列印到控制台。清單 顯示了這類訂閱的一個示例（在 Firebug 中随意嘗試）

訂閱 
dojo.subscribe("printName", function(msg) {
    console.log("The person's name is: "+msg.first_name+" "+msg.last_name);
});
釋出到一個主題 
dojo.publish("printName", [
    {
        first_name: "Joe",
        last_name: "Lennon"
    }
]);

使用 dojo.xhr* 增強 Ajax

建立 Ajax 驅動的 web 應用程式通常是通過建立

XmlHttpRequest

(

XHR

) 對象完成的，這将向指定的 URL 發出一個 HTTP 請求，傳遞一個請求頭部和正文并定義回調函數，來定義當傳回一個成功響應正文或一個 HTTP 失敗響應時該完成什麼操作。實作跨浏覽器 XHRs，至少可以說是很麻煩，但是，謝天謝地，Dojo 使用一組

dojo.xhr*

函數極大地減輕了這個令人頭疼的麻煩，允許發出

GET

、

POST

、

PUT

和

DELETE

請求。

提供如下 4 個函數：

  • xhrGet

  • xhrPost

  • xhrPut

  • xhrDelete

配置選項

XHR

函數一些比較有用的配置選項如下：

url
這是 HTTP 請求的 URL。它必須和發出這一請求的頁面有同樣的域和端口組合。

handleAs
允許您定義響應的處理格式，預設是

text

 ，但是，

json

 、

javascript

 、

xml

 、還有一些其他選項也可用。在本節後面您将看到一個建立 Ajax 請求的示例，使用一個處理 JSON 響應格式的回調函數。

form

<form>

 元素的一個引用或者字元串 ID 表示。form 中每個字段的值将被同請求一起作為請求體發送。

content
一個對象，包含您想要傳遞給請求體中資源的參數。如果兩者都提供，這個對象将與從

form

 屬性中擷取的值混合在一起。
XHR 函數調用的示例 
dojo.xhrGet({
    url: "save_data.php",
    content: {
        id: "100",
        first_name: "Joe",
        last_name: "Lennon"
    }
});

回調函數

在之前的示例中，您學習了如何使用

dojo.xhrGet

調用一個 Ajax 請求。這個示例對于實際送出請求已經足夠了，它不提供設施來處理任何響應。回調函數也被傳遞到配置對象，下列選項是可用的：

load
當 Ajax 請求傳回一個成功響應消息時，執行此函數。響應資料和請求對象作為參數被傳遞到這個函數。

error
如果 Ajax 請求出現問題，該函數将被調用。如果在 Ajax 請求中定義的 URL 無效、請求逾時或者發生其他 HTTP 錯誤，這将會出現。錯誤消息和請求對象被作為參數傳遞。

handle
該函數允許您将加載和錯誤回調函數合并到一個函數中（如果您确實不關心請求結果是成功或是出現錯誤，這将非常有用）。

在下面的示例中，您将使用一個加載回調函數建立一個 Ajax 調用，将從一個 JSON 檔案中加載一些值然後列印到頁面上。

使用 JSON 資料運作

data.json — JSON 資料通過一個 Ajax 請求來處理 
{
    count: 4,
    people: [
        {
            first_name: "Joe",
            last_name: "Lennon",
            age: 25		
        },{
            first_name: "Darragh",
            last_name: "Duffy",
            age: 33
        },{
            first_name: "Jonathan",
            last_name: "Reardon",
            age: 30
        },{
            first_name: "Finian",
            last_name: "O'Connor",
            age: 23
        }
    ]
}
使用 Ajax 加載并處理 JSON 資料 
dojo.xhrGet({
    url: "data.json",
    handleAs: "json",
    load: function(data) {
        var table = "<table 1\">";
        table += "<tr><th>Name</th><th>Age</th>
</tr>";
        dojo.forEach(data.people, function(person) {
            table += "<tr><td>";
            table += person.first_name+" "+person.last_name;
            table += "</td><td>";
            table += person.age;
            table += "</td></tr>";
        });
        table += "</table>";
        dojo.place(table, dojo.body());
    }
});

在 Firebug 中試一下清單  中的代碼。一個表格将動态地添加到您的頁面上，其中含有從 JSON 檔案中加載的資料

dojo學習 dojo
上一篇: Docker從頭開始：使用容器，第1部分
下一篇: 從頭開始WPF（1）為什麼用wpf而不是winform

繼續閱讀