Dojo学习笔记

最新推荐文章于 2017-04-06 22:49:00 发布

py_tofee

最新推荐文章于 2017-04-06 22:49:00 发布

阅读量561

点赞数

分类专栏： javascript 文章标签： dojo

javascript 专栏收录该内容

3 篇文章

订阅专栏

Dojo 学习 - - 第一天

Dojo 学习 - - 第一天

Dojo加载

建立 Dojo 最简单的方法是从一个 Content Delivery Network (CDN) 提供它，这将从附近的客户机器上传递 Dojo JavaScript 文件，而不是从自己的服务器上。这不仅有助于加速脚本加载，也意味着用户从其他网站加载 Dojo 文件的机会有所增加，这使得它们从缓存中加载，进一步提高了加载速度。

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>

另外，也可以下载 Dojo 到您自己的服务器上，然后从那里加载它。我的首选方法是从一个 CDN 加载，同时有一个本地副本在 CDN 服务器出现问题时作为后备。为了做到这一点，下载 Dojo 并将文件放在一个相对于存储您的 web 目录比较合适的位置。假设从您 web 目录到 Dojo 脚本文件的相对路径是 “script/”，下面的代码将首先从 CDN 加载 Dojo，如果失败，则加载本地版本。

使用本地回退从 CDN 加载 Dojo

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js">
</script>
<script>
typeof(dojo) === "undefined" && document.write(unescape('%3Cscript
src="js/libs/dojo-1.5.min.js"%3E%3C/script%3E'))
</script>

有一点很重要，将以 typeof(dojo) 开头的代码放在一行；否则，它将不能运行。如果您想测试副本是否起作用，只需要注释掉从 CDN 加载的这一行，然后使用 “Hello, World!” 示例（几分钟内就可以创建）测试您的页面即可。

Dojo Hello World 应用程序

<html>
<head>
    <title>Exploring Dojo</title>
</head>
<body>
<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 src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js">
</script>
<script>
dojo.addOnLoad(function() {
    dojo.create(
        "div",
        {
            "innerHTML": "Hello, World!"
        },
        dojo.body()
    );
});
</script>
</body>
</html>

该函数将附加一个 anonymous 函数，DOM 加载完成后触发该函数。这个函数使用 dojo.create 来构建一个新 DOM < div > 元素，将它的 innerHTML 属性设置为 “Hello, World!”，然后使用实用工具函数 dojo.body 将它插入到页面正文中。您会注意到 “Hello, World!” 消息已经附加在页面的结尾处了。

这里写图片描述

Dojo基础知识

dojo.byId

dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点。该函数是标准 JavaScript document.getElementById 函数的一个别名，简短，且还解决了很多跨浏览器矛盾。

dojo.byId("greeting").innerHTML;//获得单个元素的内容，引用单个元素

dojo.fadeOut 命令

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

元素逐渐淡出，从页面上消失了。要想使其再次渐显回来，在命令行中将 fadeOut 修改为 fadeIn，再次运行即可。

dojo.query

同时获得多个元素的内容，即同时引用多个元素

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

这里写图片描述

dojo.query 函数接受一个字符串参数，使用一个 CSS3 选择器引用您想选择的元素。在这个具体实例中，假设您想选择所有 li 元素，这是 ID 为 “list” 的元素的子元素。该函数返回一个组匹配查询的元素。在上述示例中，您使用 dojo.forEach 函数对这个数组进行遍历，然后将发现的每个元素的 innerHTML 属性输出到控制台。

使用 dojo.query 寻找任何类名为 highlight 的 HTML 元素

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

这里写图片描述

其他实用函数

dojo.body 函数只返回文档的 < body > 元素，dojo.body 的一个引用，以及文档对象本身。dojo.create 让您可以快速创建一个新元素、定义它的属性、然后将它放在 DOM 中。现有的其他函数包括 dojo.place，它允许您将现有的或新创建的元素放在文档的任何地方。dojo.empty 只执行您所期望的 — 清空一个 DOM 元素的内容。dojo.destroy 删除一个节点以及其所有子元素。

数组和 NodeLists

数组允许您存储一个值集合，在标准 JavaScript 中提供。在 Dojo 中，数组被扩展来包括几个帮助函数。这些扩展的数组被称为 NodeLists。一个 NodeList 可以使用任何标准数组函数，以及其他 Dojo 特定函数，当您使用上一小节中描述的 dojo.query 函数时，返回值是一个 NodeList（准确地说是 dojo.NodeList）对象。我们来看看 NodeLists 中可用的函数。

dojo.forEach

这个函数允许您在 NodeList 上定义一个迭代器，提供一个可以应用到 NodeList 中的每一项上的功能。

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

这里写图片描述

使用一个命名函数通过 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”);.

var list = ['My','name','is','Joe','name'];
dojo.indexOf(list, "name");//1
dojo.lastIndexOf(list,"name");//4

dojo.filter

dojo.filter 函数支持您创建一个新数组，这个新数组是另一个数组的过滤版。

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

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

这里写图片描述

其他 NodeList 函数

dojo.map 函数允许您创建一个新数组 — 现有数组的修改版。
dojo.some 允许您检查在数组中匹配指定标准的项是否至少有一个。dojo.every 用于检查是否每一项匹配指定标准。等等

Dojo 中的事件处理

使用 dojo.connect 附加函数到 DOM 事件

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"
    });
});

连接函数到其他函数

//不使用 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 对象包含一个人的姓和名。您可以有一个订阅这个主题的组件，在任何时候当另一个组件使用一个人的名字发布到该主题时，这将会将这个名字打印到控制台。

dojo.subscribe("printName", function(msg) {
    console.log("The person's name is: "+msg.first_name+" "+msg.last_name);
});

要发布到该主题，您需要传递一个附带主题 API 的对象数组，（在本例中，对象必须有一个名称和一个姓氏）。

发布到一个主题

dojo.publish("printName", [
    {
        first_name: "Joe",
        last_name: "Lennon"
    }
]);

* 输出*

>>> dojo.publish("printName", [ { first_name: "Joe", last_name: "Lennon" } ]);
The person's name is: Joe Lennon

正如您所看到的，通过发布这个对象到 printName 主题，您的订阅函数将相应的一个消息输出到控制台。

转载于

http://www.ibm.com/developerworks/cn/web/wa-ground/