天天看点
返回

dojo学习之1

<!DOCTYPE html>
<html >
<head>
	<title>Exploring Dojo</title>
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" target="_blank" rel="external nofollow" >
	<script src='dojo/dojo.js'></script>
	<script>

	</script>
</head>
<body class="claro">
    <h1>Exploring Dojo</h1>
	<div id="message">This is a DIV element with id attribute message.</div>
	<ul id="list">
		<li>This is the first item in a list</li>
		<li class="highlight">This is the second item in a list</li>
		<li>This is the third item in a list</li>
	</ul>
	<script>
		dojo.addOnLoad(function() {
			dojo.create(
				"div",
				{
					"innerHTML": "Hello, World!"
				},
				dojo.body()
			);
		});
	</script>
</body>
</html>

DOM 实用函数

DOM 实用函数通过提供根据 ID 寻找条目的能力或者使用 CSS3 选择器，使得使用 DOM 中的元素比较容易。还有一些其他功能，可以创建和销毁元素，以及操作现有元素内容。

dojo.byId

dojo.byId

函数使您可以通过

id

属性选择一个 DOM 节点。该函数是标准 JavaScript

document.getElementById

函数的一个别名，但是显然简短易书写，而且还解决了很多跨浏览器矛盾。现在，我们来使用 Firebug 控制台，通过 ID “message” 获取 DOM 元素内容：

dojo.byId("message").innerHTML;

dojo.fadeOut

 命令 
dojo.fadeOut({
    node: dojo.byId("message"),
    duration: 600
}).play();

您可以看到元素逐渐淡出，从页面上消失了。要想使其再次渐显回来，在命令行中将

fadeOut

修改为

fadeIn

，再次运行。

dojo.query

如果您想一次引用几个元素，这就需要引入

dojo.query

函数了

如果您想一次引用 ID 为 “list” 的无序列表的所有

<li>

子元素，然后将每个元素的内容打印到控制台上。有了

dojo.query

，这将非常简单。

dojo.query("#list li").forEach(function(item) {
    console.log(item.innerHTML);
});

dojo.query

函数接受一个字符串参数，使用一个 CSS3 选择器引用您想选择的元素。在这个具体实例中，假设您想选择所有

li

元素，这是 ID 为 “list” 的元素的子元素。该函数返回一个组匹配查询的元素。在清单 6 的示例中，您使用

dojo.forEach

函数对这个数组进行遍历，然后将发现的每个元素的

innerHTML

属性输出到控制台。

我们先来使用

dojo.query

寻找任何类名为

highlight

的 HTML 元素，并应用一些样式使它们突出显示

dojo.query(".highlight").style({
    backgroundColor: "yellow",
    color: "red"
});

其他有用的实用函数

除了 DOM 查询和元素选择之外，在 Dojo 中还有很多其他实用函数使得使用 DOM 更为容易。在 “Hello, World” 示例中您已经见过其中两个。

dojo.body

函数只返回文档的

<body>

元素，

dojo.body

的一个引用，以及文档对象本身。

dojo.create

让您可以快速创建一个新元素、定义它的属性、然后将它放在 DOM 中。

现有的其他函数包括

dojo.place

，它允许您将现有的或新创建的元素放在文档的任何地方。

dojo.empty

只执行您所期望的 — 清空一个 DOM 元素的内容。

dojo.destroy

删除一个节点以及其所有子元素。

dojo.forEach

第一个值得一提的函数是

dojo.forEach

，这个函数您已经在上一小节的

dojo.query

示例中见过了。这个函数允许您在 NodeList 上定义一个迭代器，提供一个可以应用到 NodeList 中的每一项上的功能。我们在清单 8 中来看一个更为基本的示例。

var list = ['My','name','is','Joe'];
dojo.forEach(list, function(item, i) {
    console.log((i+1)+'. '+item);
});

forEach

函数遍历数组中的每一项，然后在其上执行附加功能。上面，您已经使用了一个

anonymous

函数，但是您还可以使用一个命名函数

使用一个命名函数通过

dojo.forEach

 遍历一个数组 
var list = ['My','name','is','Joe'];

var printArray = function(item, i) {
    console.log((i+1)+'. '+item);
}

dojo.forEach(list, printArray);

dojo.indexOf

dojo.indexOf

函数使得您可以在一个数组中找出具体一个值的位置。最好是结合示例说明。使用上一小节创建的列表数组，尝试找出值为

name

的元素在数组中的地址：

dojo.indexOf(list, "name");

.

该函数返回给定值的第一个位置的下标，因此，如果数组中有多个项有相同的值，它只停在第一项上，Dojo 提供一个类似的函数，

dojo.lastIndexOf

，允许您寻找特定值的最后一个位置。该函数与

dojo.indexOf

运行方式完全一样。

dojo.filter

dojo.filter

函数支持您创建一个新数组，这个新数组是另一个数组的过滤版。例如，如果您想为您早期创建的列表数组创建一个新版本，但是又不想包括值为

is

的那些项。您可以使用清单 12 所示的代码。

var filteredList = dojo.filter(list, function(item) {
    return item != "is";
});

dojo.forEach(filteredList, "console.log(item)");

DOM 事件处理

将函数附加到 DOM 对象的第一个方法是使用

dojo.connect

函数。

var message = dojo.byId("message");
dojo.connect(message, "onclick", function() {
    alert(message.innerHTML);
});
附加事件到数组元素上 
dojo.query("#list li").forEach(function(item) {
    dojo.connect(item, "onclick", function() {
        dojo.style(item, {
            fontWeight: "bold"
        });
    });
});
附加事件到数组元素上（改进的） 
dojo.query("#list li").onclick(function(e) {
    dojo.style(e.target, {
        fontWeight: "bold"
    });
});

e

参数是

Event

对象的一个引用，对象的

target

属性帮助您确定触发事件的元素。您可以使用这个来指出粗体样式应该被应用的元素。

连接函数到其他函数

Dojo 也支持您以同样的方式将函数连接到其他函数。这方面的一个示例可能是这样一个函数，在您的页面的某个地方显示一个旋转轮子。当用户执行一个 Ajax 函数时，您想要显示这个图像。类似地，当函数返回一个响应时，您想要隐藏该图像。如果不使用

dojo.connect

，您的代码看起来像如下清单 这样。

function toggleImage() {
    //Code to show/hide loading image goes here
}

function callAjax() {
    toggleImage();
    //Code to call Ajax function goes here
}

function handleResponse() {
    //Code to handle Ajax response goes here
    toggleImage();
}

这段代码没什么问题，

toggleImage

函数定义包含在

callAjax

和

handleResponse

函数中。如果您想添加另一个函数调用，您需要再次修改这些函数来包含额外调用。现在不需要向这些函数本身添加函数调用，只需要使用

dojo.connect

来在它们之间建立一个链接。

使用

dojo.connect

 连接函数到其他函数 
function toggleImage() {
    //Code to show/hide loading image goes here
}

function callAjax() {
    //Code to call Ajax function goes here
}

function handleResponse() {
    //Code to handle Ajax response goes here
}

dojo.connect(callAjax, toggleImage);
dojo.connect(handleResponse, toggleImage);

发布和订阅主题

Dojo 事件处理最后值得注意的一点是发布和订阅主题的能力。这使得 Dojo 组件可以彼此交互，即使它们没有意识到彼此的存在。例如，假设您定义了一个名为

printName

的主题，它绑定了一个

message

对象包含一个人的姓和名。您可以有一个订阅这个主题的组件，在任何时候当另一个组件使用一个人的名字发布到该主题时，这将会将这个名字打印到控制台。清单 显示了这类订阅的一个示例（在 Firebug 中随意尝试）

订阅 
dojo.subscribe("printName", function(msg) {
    console.log("The person's name is: "+msg.first_name+" "+msg.last_name);
});
发布到一个主题 
dojo.publish("printName", [
    {
        first_name: "Joe",
        last_name: "Lennon"
    }
]);

使用 dojo.xhr* 增强 Ajax

创建 Ajax 驱动的 web 应用程序通常是通过创建

XmlHttpRequest

(

XHR

) 对象完成的，这将向指定的 URL 发出一个 HTTP 请求，传递一个请求头部和正文并定义回调函数，来定义当返回一个成功响应正文或一个 HTTP 失败响应时该完成什么操作。实现跨浏览器 XHRs，至少可以说是很麻烦，但是，谢天谢地，Dojo 使用一组

dojo.xhr*

函数极大地减轻了这个令人头疼的麻烦，允许发出

GET

、

POST

、

PUT

和

DELETE

请求。

提供如下 4 个函数：

  • xhrGet

  • xhrPost

  • xhrPut

  • xhrDelete

配置选项

XHR

函数一些比较有用的配置选项如下：

url
这是 HTTP 请求的 URL。它必须和发出这一请求的页面有同样的域和端口组合。

handleAs
允许您定义响应的处理格式，默认是

text

 ，但是，

json

 、

javascript

 、

xml

 、还有一些其他选项也可用。在本节后面您将看到一个创建 Ajax 请求的示例，使用一个处理 JSON 响应格式的回调函数。

form

<form>

 元素的一个引用或者字符串 ID 表示。form 中每个字段的值将被同请求一起作为请求体发送。

content
一个对象，包含您想要传递给请求体中资源的参数。如果两者都提供，这个对象将与从

form

 属性中获取的值混合在一起。
XHR 函数调用的示例 
dojo.xhrGet({
    url: "save_data.php",
    content: {
        id: "100",
        first_name: "Joe",
        last_name: "Lennon"
    }
});

回调函数

在之前的示例中，您学习了如何使用

dojo.xhrGet

调用一个 Ajax 请求。这个示例对于实际发出请求已经足够了，它不提供设施来处理任何响应。回调函数也被传递到配置对象，下列选项是可用的：

load
当 Ajax 请求返回一个成功响应消息时，执行此函数。响应数据和请求对象作为参数被传递到这个函数。

error
如果 Ajax 请求出现问题，该函数将被调用。如果在 Ajax 请求中定义的 URL 无效、请求超时或者发生其他 HTTP 错误，这将会出现。错误消息和请求对象被作为参数传递。

handle
该函数允许您将加载和错误回调函数合并到一个函数中（如果您确实不关心请求结果是成功或是出现错误，这将非常有用）。

在下面的示例中，您将使用一个加载回调函数创建一个 Ajax 调用，将从一个 JSON 文件中加载一些值然后打印到页面上。

使用 JSON 数据运行

data.json — JSON 数据通过一个 Ajax 请求来处理 
{
    count: 4,
    people: [
        {
            first_name: "Joe",
            last_name: "Lennon",
            age: 25		
        },{
            first_name: "Darragh",
            last_name: "Duffy",
            age: 33
        },{
            first_name: "Jonathan",
            last_name: "Reardon",
            age: 30
        },{
            first_name: "Finian",
            last_name: "O'Connor",
            age: 23
        }
    ]
}
使用 Ajax 加载并处理 JSON 数据 
dojo.xhrGet({
    url: "data.json",
    handleAs: "json",
    load: function(data) {
        var table = "<table 1\">";
        table += "<tr><th>Name</th><th>Age</th>
</tr>";
        dojo.forEach(data.people, function(person) {
            table += "<tr><td>";
            table += person.first_name+" "+person.last_name;
            table += "</td><td>";
            table += person.age;
            table += "</td></tr>";
        });
        table += "</table>";
        dojo.place(table, dojo.body());
    }
});

在 Firebug 中试一下清单  中的代码。一个表格将动态地添加到您的页面上，其中含有从 JSON 文件中加载的数据

dojo学习 dojo
上一篇: Docker从头开始：使用容器，第1部分
下一篇: 从头开始WPF（1）为什么用wpf而不是winform

继续阅读