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

时间: 2024-10-19 11:29:53

我的DOJO学习之路(二)的相关文章

我的DOJO学习之路(三)-几个DEMO

基于DOJO组件式开发写了几个DEMO练练手,仅供参考. <script type="text/javascript" language="javascript" charset="utf-8"> require(["dojo/ready", "dojo/on", "dojo/request/xhr", "dojo/parser", "dijit

java痛苦学习之路[二] ---JSONObject使用

一.Strut2必须引入的包 要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: 1.commons-lang.jar 2.commons-beanutils.jar 3.commons-collections.jar 4.commons-logging.jar 5.ezmorph.jar 6.json-lib-2.2.2-jdk15.jar 当然除了这些包,strut2基础包也得引入 struts2-core-2.1.6.jar freemarker-2.

zigbee学习之路(二):点亮LED

一.前言 今天,我来教大家如何点亮led,这也是学习开发板最基础的步骤了. 二.原理分析 cc2530芯片跟虽然是51的内核,但是它跟51单片机还是有区别的,51单片机不需要对IO口进行配置,而cc2530芯片却需要对IO口进行配置,才能对它进行赋值,需要配置的寄存器有PXSEL,PXDIR,PXINP,x可以代表任意IO口,如P1SEL. 下面介绍PXSEL的功能: 下面介绍PXDIR的功能: 下面介绍PXINP的功能: 通过配置以上寄存器的,就可以控制IO口德输入输出状态,是否做为普通IO口

Android开发学习之路-二维码学习

这个月装逼有点少了,为什么呢,因为去考软件射鸡师了,快到儿童节了,赶紧写篇博纪念一下逝去的青春,唔,请忽略这句话. 二维码其实有很多种,但是我们常见的微信使用的是一种叫做QRCode的二维码,像下面这样的,可以放心的扫,这只是我的博客主页链接啦: 关于QR码编码的二维码,我们要知道几个特点: 1. 扫描时可以从各个角度去扫,也就是旋转多少度都没关系,不信吗?下次去肯德基买单试试咯. 2. 二维码有容错率,容错率越大,生成的二维码也就越复杂,但是越不容易出错,并且,当二维码被遮挡的时候也越容易扫描

Python学习之路二

今天主要学习了列表,python的列表真的事太强大了,由于内容比较多,今天就先简单的介绍一下新学的几个成员函数吧. 首先我们要了解list是一种序列类型,其构造方式有四种形式: (1)空列表 [] (2)直接添加元素 [a] [a,b,c] (3)使用列表解析 [x for x in iterable] (4)使用构造函数 list() or list(iterable) 成员函数: append() 在末尾添加一个元素 extend() 以列表的形式在末尾添加 insert() 两个参数,第一

Dojo学习笔记(二十):理解_WidgetBase

如果你使用过dojo早期的版本,你可能对dijit/_Widget模块熟悉.虽然dijit/_Widget目前仍然存在,但是它经继承自_WidgetBase.在你从底层开始创建自定义小部件的时候,目前最好是直接继承_WidgetBase,dijit/_Widget很可能在2.0的版本中被淘汰掉. 理解Dijit系统的关键在于对小部件的生命周期的理解,小部件生命周期是从一个小部件被设计到这个小部件能够被你的应用程序完全可引用,一直到小部件和dom元素的销毁. _Widget和_WidgetBase

Dojo学习笔记(二十一):创建自定义Dojo小部件

在这个教程中,我们将会演示如何利用Dojo 和Dijit框架来创建自定义的小部件,主要会使用到dijit/_WidgetBase and dijit/_TemplatedMixin. Dojo的Dijit 库包含了丰富的界面小部件(Widgets),通过使用这些小部件,可以打造出强大的Web应用界面,从高级的表单元素,到复杂页面布局. 假设我们需要开发一个能展示所有Dojo教程作者的简介信息的页面,我们手头的数据源是如下的JSON数据: [     {         "name": 

react.js学习之路二

看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 总结起来可以概括为 1.首先划分组件:父组件--子组件 2.显示数据:创建初始数据,并将数据显示到页面上 3.创建函数:①:添加函数,输入框中输入数据,显示到页面上 ②:删除函数,点击删除按钮,将该条数据删除 代码有很多,一会给一个链接,自己看就行,没必要我重新复制 其中踩过的坑: 1. 首先就是版

linux学习之路二 ------登陆篇

上一篇中讲了如何搭建虚拟机学习平台,在这篇中将介绍如何登陆Linux系统和修改超级用户密码 1.打开虚拟机后,进入界面,需要让我们输入账号密码,在前面安装的时候我们设置过.如图 2.输入账号密码,输入密码的时候是不显示的,所以不要认为没有输入.如图 3.验证成功之后,出现[[email protected] ~]$ ,则说明登陆成功,Linux系统有超级用户和普通用户之分,超级用户也就是root用户了,如我们的就是普通用户, 普通用户[[email protected] ~]$中$就是代表了普通