码迷,mamicode.com
首页 > 其他好文 > 详细

我的DOJO学习之路(二)

时间:2014-06-11 10:16:31      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   http   color   get   

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);
        });
    });
});

我的DOJO学习之路(二),布布扣,bubuko.com

我的DOJO学习之路(二)

标签:des   style   class   http   color   get   

原文地址:http://www.cnblogs.com/ckblogs/p/3772894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!