当前位置 : 主页 > 网页制作 > Dojo >

学习Dojo

来源:互联网 收集:自由互联 发布时间:2021-06-15
Dojo的全称是Dojo Toolkit,始创于2004年,是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 JavaScript 库,简单易

   Dojo的全称是Dojo Toolkit,始创于2004年,是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 JavaScript 库,简单易用的小部件(Widget)系统和一个测试框架。
   Dojo Toolkit 的特性可以分到 4 个不同部分。这种划分使得开发人员可以将库大小保持到最小,确保应用程序性能不受大量 JavaScript 库下载的影响。例如,如果您只需要 Ajax 支持性能,您只需要包含 base 包;不需要包含扩展的 Dijit UI 组件。
Base
   Base 包提供 Dojo Toolkit 的基础,包括一些功能,比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo基于类的面向对象特性。本文主要介绍 Base。
Core
   Core 包包含一些 Base 中没有包含的附加特性。通常,这些特性不像 Base 中的特性那样频繁使用;因此,它们单独加载减轻 Base 包的负担。从这一点上来讲,Core 包提供一些实际有用的组件,包括高级动画拖放、I/O、数据管理、国际化(i18n)、浏览器历史管理。
Dijit
   Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件,这比标准 HTML 表单控件提供更多的功能,还有一些完整的布局管理选项。
DojoX
   Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性,但是也有一些稳定组件和特性。


1    dojo.require()方法

   以类似C编程中#include或者Java中import的方式加载所需的部件。
   例如:  dojo.require("dojo.parser");

           dojo.require("dijit.form.Button");


2    dojo.byId()方法

   dojo.byId('box')等价于document.getElementById('box'),但dojo.byId能消除不同版本浏览器之间差别。


3    dojo.connect()方法

dojo.connect(obj, event, context, method, dontFix);

参数

    类型

                     描       述

obj

Object|null

事件关联的对象。最常见的是DOM node,关联的事件会被委托到DOM事件管理器(除非dontFix为true);也可以是其他JavaScript Object;或者干脆就是null,这时就是默认为dojo.global (window)。

event

String

上面obj需要关联的事件的名称。比如DOM node的”onclick”之类的。

context

Object|null

前面两个参数讲的都是关联的“源”,这儿开始就是讲关联的“目标”了。context为后面的method提供了执行上下文环境,相当于method的this。如果context为null且method是一个function,则method会继承event的context。如果method是一个string,则context必须是method的源对象。如果context为null,则默认为dojo.global。

method

String|Function

当event被触发后调用的目标函数。可以是函数引用,或者context中的函数名称。此method会拿到和事件同样的参数。

dontFix

Boolean

可选项。如果obj参数是DOM node,当设置dontFix为true时,可以阻止关联被委托到DOM事件管理器。(貌似很强大的功能)

样例:

   dojo.connect(dojo.byId('box'),'onmouseover',null,onmouseoverEvent);
   function onmouseoverEvent(event)
   {
        alert('移动事件:'+event);
    }


4    dojo.query()方法

   选择元素, dojo.uery 不区分大小写。

语法 含义  
示例 * 任何元素 dojo.query("*") E 标签为E的元素 dojo.query("div") .C 带有类C的元素 dojo.query(".baz") E.C 标签为E且带有类C的元素 dojo.query("div.baz") #ID ID值为ID的元素 dojo.query("#quux") E#ID 标签为E且ID值为ID的元素 dojo.query("span#quux") [A] 带有属性A的元素 dojo.query("[foo]") E[A] 标签为E且带有属性A的元素 dojo.query("span[foo]") [A="V"] 带有A属性且该属性的值为V的元素 dojo.query("[foo='bar']") E[A~='V'] 标签为E并且带有属性A,且该属性值为空格分隔的列表,同时其中一个值恰好等于V的元素 dojo.query("span[foo~='bar']") E[A^='V'] 标签为E并且有属性A,且该属性值以V开头的元素 dojo.query("span[foo^='bar']") E[A$='V'] 标签为E并且带有属性A,且该属性值以V结尾的元素 dojo.query("span[foo$='bar']") E[A*='V'] 标签为E并带有属性A,且该属性值中包含子字符串V的元素 dojo.query("span[foo*='bar']") E > F 作为元素E子元素的F元素 dojo.query("div > span") E F 作为元素E后代元素的F元素 dojo.query("E F")

   dojo.query() 返回的结果是 NodeList 对象,NodeList 是一个扩展的 Array 对象,很多方法支持链式调用。作为 Array 对象,NodeList 具有长度属性,而且可以通过 at, forEache, push, pop这些方法来操纵它。需要注意的是 at,map,forEach,slice,splice,contact 等都可以进行链式调用,但是 push,pop,shift 和 unshift 则是不可以的。

样例:

   dojo.query("#box");//选择id为box的元素
   dojo.query(".red");//选择class为red的元素

   //查询出所有的 h1,h2,h3 节点
   dojo.query("h1,h2,h3");

   //使用伪类选择符,利用 nth-child 来查询 tbody 节点下所有奇数序号的子元素


   dojo.query("tbody tr:nth-child(odd)");

   //利用 first-child 来查询任意节点下的首个 p 子元素:
    dojo.query("p:first-child");


   //局部范围内的相对查询

   dojo.query("button", "thisForm")  //查询ID为thisForm表单下的所有button元素

   dojo.query("div","box").length

备注:此处ID为thisForm或box前面没有#符号


   //链式调用dojo.query(".thinger ").style {border :"1px" }).removeClass("thinger").addClass("thinger2");


NodeList.forEach 方法
dojo.query("div").forEach(function(node, index, array){
   node.innerHTML = "new version content!";
});

NodeList.style 方法
// 执行查询
var borders = dojo.query(".thinger").style("border");
// 设置新值
dojo.query(".thinger").style("border", "1px solid black");
// 删除,添加 class
dojo.query(".thinger").style({border :" 3px solid red" }).removeClass("thinger").addClass("thinger2");

NodeList.connect 方法
dojo.query("input").connect(" function(e){
 alert("new event!");
});
等效于
dojo.query("input").
 alert("new event!");
});
NodeList直接支持的事件还包括      omouseout, ondblclick 等。
//NodeList 的鼠标事件
dojo.query("p").
   dojo.style(e.target, "color", "red");
}).
   dojo.style(e.target, "color", "blue");
});

自定义NodeList方法
dojo.extend(dojo.NodeList, {
 setColor: function(newColor){
    this.style({
      color: newColor
    });
    return this;
 }
});
dojo.query("p").setColor ("yellow");
注意,此处的关键是“return this”,它保证了后续链式调用的成功执行。


5    dojo.addClass()方法

   dojo.addClass("span","blue");//为span元素添加blue类


6    dojo.body()方法

   dojo.body方法返回document的body元素。


7    dojo.create方法

   dojo.create方法创建一个元素。

dojo.create("div", { innerHTML: "Hello world!" }, dojo.body());


8    dojo.destroy方法

   dojo.destroy方法会从父元素中删除该元素,并删掉该元素的所有子元素。


9    dojo.empty方法

   dojo.empty方法将删除掉所有子元素。


10    dojo.forEach方法

   dojo.forEach方法允许为数组或NodeList定义一个迭代器,来访问数组或NodeList中的每一项,并提供相应的操作。这个方法会忽略返回值,并且是不支持break的。

网友评论