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() 返回的结果是 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的。