dojo学习之1

来源：互联网发布：宋朝历史书籍推荐知乎编辑：程序博客网时间：2024/05/15 06:06

<!DOCTYPE html><html ><head><title>Exploring Dojo</title><link rel="stylesheet" href="dijit/themes/claro/claro.css"><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.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 border=\"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 文件中加载的数据

0 0