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的版本信息。
function init() {
alert("Dojo ready, version:" + dojo.version);
// More initialization here
}
dojo.ready(init);
注意,当我们传递给ready函数的是自定义函数的名字而不是函数内容
.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