Dojo1.11官方教程文档翻译（1.2）Hello Dojo！

hellodojo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
dojo.js
require
define
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>

<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
require
dom.js
dom-constuct.js
require
dom
dom-construct
demo
hellodojo.html
demo
myModule.js
demo/
myModule.js
hellodojo.html
define([
// 这个模块需要用到dojo/dom模块，所以要把它放进依赖模块列表中。
'dojo/dom'
], function(dom){
// 一旦依赖模块列表中的模块全都加载完成，就会调用这个函数来定义demo/myModule模块。
//
// dojo/dom 作为第一个参数传递给这个函数，依赖列表中的其他模块会作为随后的参数传入。

var oldText = {};

// 这个返回的对象成为该模块定义的值
return {
setText: function (id, text) {
var node = dom.byId(id);
oldText[id] = node.innerHTML;
node.innerHTML = text;
},

restoreText: function (id) {
var node = dom.byId(id);
node.innerHTML = oldText[id];
delete oldText[id];
}
};
});
define
require
hellodojo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- 配置 Dojo -->
<script>
// 为了代替data-dojo-config，我们在加载dojo.js之前创建一个dojoConfig对象；
//它们在功能上完全相同，只是这种方法对于大型配置来说更容易读懂。
var dojoConfig = {
async: true,
// 这个代码注册“demo”包的正确位置，这样我们就能够在从CDN加载Dojo的同时加载本地模块了
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
<!-- 加载 Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<script>
require([
'demo/myModule'
], function (myModule) {
myModule.setText('greeting', 'Hello Dojo!');

setTimeout(function () {
myModule.restoreText('greeting');
}, 3000);
});
</script>
</body>
</html>
demo/myModule
dojo.js
dojo/domReady
require
define
require([
'dojo/dom',
'dojo/domReady!'
], function (dom) {
var greeting = dom.byId('greeting');
greeting.innerHTML += ' from Dojo!';
});
greeting
script
body
dojo/domReady
dojo/fx
dojo/fx
slideTo
require([
'dojo/dom',
'dojo/fx',
'dojo/domReady!'
], function (dom, fx) {
// 我们之前有的
var greeting = dom.byId('greeting');
greeting.innerHTML += ' from Dojo!';

// 现在，有了动画
fx.slideTo({
node: greeting,
top: 100,
left: 200
}).play();
});
dojo/fx
greeting
demo/
myModule.js
dojo/
dijit/
dojox/
util/
hellodojo.html
<script src="dojo/dojo.js"></script>
var dojoConfig = {
async: true,
baseUrl: '.',
packages: [
'dojo',
'dijit',
'dojox',
'demo'
]
};

Dojo1.11官方教程文档翻译（1.2）Hello Dojo！

Dojo1.11官方教程文档翻译（1.2）Hello Dojo！

简介

入门

定义AMD模块

CDN的使用

等待DOM

添加视觉特效

使用Dojo资源

获取帮助

下一步做什么？