Dojo 1.6 ——Hello Dojo!-CSDN博客

本文介绍如何将Dojo工具包整合到HTML页面中，包括加载Dojo脚本、使用`dojo.ready`函数执行JavaScript代码、模块加载及动画效果实现。通过实例展示了从简单引用到动态内容更新、依赖模块加载的过程。

Getting Started

我们的目标是一个简单的HTML页面。我们希望加载Dojo到页面，并添加一些代码，标志着我们的成功。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
</head>
<body>
    <h1 id="greeting">Hello</h1>
</body>
</html>

我们在<head>标签里加入 Dojo脚本标签，它也可以在<body>标签的结尾 -用一个src属性指定dojo.js文件所在的URL。

在本教程中，我们将通过谷歌的CDN加载Dojo 工具包。如果您已经下载了一个已发布的Dojo包，调整的网址指向自己的服务器上的dojo.js的位置。假设URL是正确的，Dojo是现在悄悄地在后台加载完毕。下一步，我们准备地方运行Dojo代码，以便我们可以用它做的东西。

dojo.ready

准备就绪，因为他关联到一个html页面和浏览器，可以是一个不稳定的牵制过程，我们两边的DOM都为操作做好准备，然后Dojo包在我们的JavaScript代码运行前被载入，由于ready 在不同的浏览器上意味着不同的方式的原因，Dojo提供了一个可靠的、跨浏览器函数：dojo.ready。我们通过这个函数来执行 Ready这个时刻。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
    <script>
        dojo.ready(function(){
            alert("Dojo version " + dojo.version + " is loaded");
        });
    </script>
</head>
<body>
    <h1 id="greeting">Hello</h1>
</body>
</html>

当页面载入的时候我们通过dojo.ready这个函数页面可以一个弹出一个弹出框。Dojo有一个版本属性,用于演示ready函数。当我们更深入的学习dojo，弹出变的越来越烦人。然后我们需要了解在浏览器的控制台记入日志。在其他教程上挖掘更多的细节。不过现在，我们在<h1>标签上得到得到简单的引用然后跟新他的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
    <script>
        dojo.ready(function(){
            dojo.byId("greeting").innerHTML += ", from " + dojo.version;
        });
    </script>
</head>
<body>
    <h1 id="greeting">Hello</h1>
</body>
</html>

这时在我们的ready函数里，我们用dojo.byIds函数在DOM上得到给定Id的元素，然后在他的内容里面增加Dojo的版本信息。

注意,您可以写任意个dojo.ready，每个ready函数将按你写的顺序执行，实际上，如果你不只是有几行代码，常常定义一个函数(非匿名),然后传递给dojo.ready如下：

function init() {
    alert("Dojo ready, version:" + dojo.version);
    // More initialization here
}
dojo.ready(init);

注意，当我们传递给ready函数的是自定义函数的名字而不是函数内容

如果你为了Dojo的Hello World 例子而来，我们早已完成，但是早些时候，我们提到关于“显示依赖”，让我们回到那个。

Modules

.Dojo 还有更多功能，dojo.js 实际上让你得到了什么?Dojo是一个模块化工具包，它带有一个包管理功能让你你可以选择载入你需要的包。JavaScript开发一直面临着一个问题是缺乏一个本机js文件的加载功能(在相同的方式,您可能需要/导入模块或者类使用Java,PHP,Python等)。Dojo填补了这一空白用直观的方式来组织代码和一个简单的API(dojo . require)来表示一个依赖特定的模块。

Module loading for more shine

那么，如果在<h1>标签设置了innerHTML不需要花多少时间，Dojo“base”包含动画框架的视觉效果和一些更常见的效果(Dojo。fadeOut和dojo.fadeIn)，这很好，但是我们希望在页面滑动着“greeting”，所以我们可能会用到 dojo.fx.slideTo这个函数，但是dojo.fx这个模块在我们的dojo.js里还没被包含进来，所以我们需要加载它

// New: Require in the dojo.fx module
dojo.require("dojo.fx");
 
// Remember, dojo.ready waits for both the DOM and all dependencies
dojo.ready(function(){
    // The piece we had before - change our innerHTML
    dojo.byId("greeting").innerHTML += ", from " + dojo.version;
 
    // Now, slide the greeting
    dojo.fx.slideTo({
        top: 100,
        left: 200,
        node: dojo.byId("greeting")
    }).play();
});

slideTo功能是dojo.fx模块的一部分，dojo.require 这行表明依赖，问加载程序加载文件,如果它不是已经可用了，没有新脚本标记乱动，至关重要的是，我们剩下的初始化不需要改变。我们还使用dojo.ready ,我们的代码将只运行一次DOM,已准备好所有依赖项都加载。

下一个部分是插件例子。像想Dojo中的动画属性,我们通过在一个对象和一个节点引用,和其他属性来配置动画。我们将会进一步来看Dojo的动画演示在将来的教程。

Conclusion

开始使用Dojo工具包非常简单,如添加一个脚本标记,但适用范围广泛的工具包，在你需要它时，需要你信手拈来。在这个教程我们第一步把Dojo放到你的网站或应用中运行起来，在将来的这系列教程中，我们将会讨论各大主要的函数组像

Ajax，特效，事件等，探索和解释路上的每一步。