我的DOJO學習之路(二)

dojo函數

1.檢索 dojo.byid

2.創建 dojo.creat() 參數:節點名,節點的屬性,可選的父節點或者兄弟節點,可選的父節點和兄弟節點的相對位置。

demo:

var list=dojo.byId("list")

dojo.create("li",{

innerHTML:"seven";

},list,"after")

3.安插 dojo.place()默認爲"last"

function moveFirst(){   

   var list = dojo.byId("list");   

var  three = dojo.byId("three");    

    dojo.place(three, list, "first");  } 

4.刪除

dojo.destroy();刪除一個節點和其所有的子節點

dojo.empty();只刪除一個節點的所有子節點

DOM查詢和批量操作

 

dojo.byid查找單個節點。(實際情況中很難爲每一個節點起一個唯一的ID)

dojo.query對一組節點進行操作。返回的是一個List數組

常用查詢

用法:var list=dojo.query("#list")[0];返回ID爲list的第一個節點

限定查詢條件的作用域

//1.使用選擇器來限定查詢的作用域

var odds1=dojo.query("#list .odd");

//2.使用第二個參數來限定查詢的作用域

var odds2=dojo.query(".odd",dojo.byId("list"));

dojo支持類似Jquery中各種選擇器的寫法。第一種方法使用了選擇器的語法,第二種方法是將一個節點作爲限定查詢參數傳入query方法。使用第一個方法時遍歷整個DOM樹結構,使用第二種方法則只遍歷查詢的節點。當文檔DOM樹並不大時倆種寫法一樣,當文檔dom樹很複雜時,使用第二種寫法可以提升性能和速度。

更多高級查詢

1,標籤名和類名複合使用

var odda=dojo.query("a.odd") 查詢class名爲odd下的所有a節點

2.">"

//獲取任意一個有li節點作爲其父節點的a節點 var alla=dojo.query("li a");

//獲取任意一個有li節點作爲其直接父節點的a節點 var someA=dojo.query("li > a");

常用的操作dojo.query返回的結果集

dojo.query(".odd").forEach(function(node,index,nodelist){

//針對query返回的數組中的每個節點,執行本方法  

   dojo.addClass(node,"red")

});

其他輔助方法map,filter,some,every,style,toggleClass,replaceClass,place,empty.

事件

connect,用來連接Dom事件

用法: ready(function(){

dojo.query("#demobtn1").onclick(function(){

})

dojo.query("#demobtn2").connect("onclick",function(){

})

})

第一種只支持標準的DOM事件, 第二種支持所有的DOM事件,完整的方法列表(http://dojotoolkit.org/reference-guide/1.9/dojo/NodeList.html#events-with-nodelists

 

 

dojo.Deferred(延遲)

dojo.DeferredList(一次處理多個延遲的異步調用)

概念: Deferred對象有三個狀態,分別爲"unresolve","resolve","reject". 創建deferred對象時,通過then方法註冊一個回調函數,當Deferred對象等待的某個事件放生時(resolve),就調用此函數,then方法第二個參數爲調用失敗或出錯時(reject)調用出錯的回調函數.

Deferred最重要的功能是實現了服務端數據和AJax請求數據的解耦

Deferred支持鏈式調用,既可以對返回的對象也調用then函數接受回調函數,可以操作第一次回調函數返回的數據。嚴格來說的話第一個then返回值並不是Deferred,而是promise(承諾).這樣做的好處是假如你需要調用回調函數對原始數據進行操作,就可以直接註冊一個回調到Deferred對象上。

DOJO的AJAX對象返回的也是一個Deferred,可以直接使用then函數處理.

dojo.DeferredList 使用場景:從不同來源獲取數據,同時對這些數據進行操作。 DeferredList 對象也有一個then方法用來註冊回調函數,回調函數的參數是一個tuple構成的數組  每個tuple的第一個值,是一個boolean,表示該Deffered對象所代表的請求是否成功了 即deffered 是否成功resolved  每個tuple的第二個值,是相對應的deferred註冊的回調函數的返回值,。

總結:可以使一個異步請求跟後續處理邏輯,可以動態的修改後續處理邏輯,以達到重用的目的。

DEMO:

 

dojo.require("dojo.DeferredList");
dojo.ready(function(){
    // 第一個Ajax請求,產生一個defferred 對象: userDef
    var usersDef = dojo.xhrGet({
        url: "users.json",
        handleAs: "json"
    }).then(function(res){
        var users = {};
        dojo.forEach(res, function(user){
            users[user.id] = user;
        });
        return users;
    });
   // 另一個Ajax請求,產生第二個defferred 對象: statusesDef
    var statusesDef = dojo.xhrGet({
        url: "statuses.json",
        handleAs: "json"
    });
    //利用兩個Defferred對象構造一個DefferredList對象
    var defs = new dojo.DeferredList([usersDef, statusesDef]);
    //DeferredList 對象也有一個then方法用來註冊回調函數,回調函數的參數是一個tuple構成的數組
    // 該回調函數只有當前DefferredList所包含的所有Deferred對象進入Resolved或者Error狀態後纔會調用。
    defs.then(function(results){
        // 每個tuple的第二個值,是相對應的deferred註冊的回調函數的返回值,
        var users = results[0][1],
            statuses = results[1][1],
            statuslist = dojo.byId("statuslist");
       // 每個tuple的第一個值,是一個boolean,表示該Deffered對象所代表的請求是否成功了 即deffered 是否成功resolved
        if(!results[0][0] || !results[1][0]){
            dojo.create("li", {
                innerHTML: "An error occurred"
            }, statuslist);
            return;
        }
        dojo.forEach(statuses, function(status){
            var user = users[status.userId];
            dojo.create("li", {
                id: status.id,
                innerHTML: user.name + ' said, "' + status.status + '"'
            }, statuslist);
        });
    });
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章