关于 dojo 已出版的书籍，大多版本较老，要学习最新的 dojo 1.9.3 （现在最新的已经是 1.10了），还是只有上官网。
开始 dojo 学习之旅吧。
本文参考：http://dojotoolkit.org/documentation/tutorials/1.9/hello_dojo/
难度等级：初级 Dojo版本：1.9
入门知识
建立第一个文件：hellodojo.html
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Tutorial: Hello Dojo!</title>
-
</head>
-
<body>
-
<h1 id="greeting">Hello</h1>
-
-
<script src=""
-
data-dojo-config="async: true"></script>
-
</body>
-
</html>
知识点：这里引入 dojo.js ，自 dojo 1.7 以后，dojo 已完全采用 AMD（异步模块定义）进行模块管理，带来的直接好处就是，对程序的发布可以进行 build，大幅提升性能。
当 dojo.js 加载后，两个全局函数就生效了（参考： ）：require 和 define（关于AMD的更多内容，参考这里：Introduction to AMD tutorial.）。作为初学者，我们只需要了解：require 是用来加载模块的，define 是用来定义模块的。一个模块一般就是一个单独的 javascript 文件。
用于 HTML DOM 操作的 dojo 模块很少，基本上就这几个： 和 。下面我们看下如何载入模块。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Tutorial: Hello Dojo!</title>
-
</head>
-
<body>
-
<h1 id="greeting">Hello</h1>
-
-
<script src=""
-
data-dojo-config="async: true"></script>
-
-
<script>
-
require([
-
'dojo/dom',
-
'dojo/dom-construct'
-
], function (dom, domConstruct) {
-
var greetingNode = dom.byId('greeting');
-
domConstruct.place(' Dojo!', greetingNode);
-
});
-
</script>
-
</body>
-
</html>
require的第一个参数是一个数组（其元素就是你需要加载的模块id）。一般来说，模块 id 直接对应文件名称。打开 dojo 发布包，在 dojo 目录下，我们可以找到 dom.js 和 dom-contruct.js 两个文件（这两个文件就是用来定义模块的）。
AMD loader 基于异步操作，而 JavaScript 的异步操作又是基于回调函数实现，所以 require 的第二个参数就是一个回调函数，在回调函数中实现我们的功能。AMD loader会将模块作为参数传入这个回调函数（参数顺序同require的第一个参数中顺序一致），参数名称可以任意取，不过为了可读性，建议尽量同模块名称一致。18-19 行展示了一下 dom 操作。
备注：AMD loader 会自动加载被请求模块的所有其他依赖关系，所以只需指定你需要使用的模块即可。
如何定义 AMD 模块
如何加载和使用模块，已初步了解。下面学习如何定义和加载自己的模块。首先准备下环境，确保你是通过 HTTP server 载入你的 HTML 文件（localhost 加载勉强可用，但"file:///"不支持某些 http 请求，调试麻烦）。下面例子很简单，在 hellodojo.html 文件的同级目录创建一个 demo目录，放入你自己的模块文件：myModule.js。
-
demo/
-
myModule.js
-
hellodojo.html
myModule.js 内容如下：
-
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];
-
}
-
};
-
});
AMD define 函数同 require 的参数形式极为类似，第一个参数依赖模块列表，第二个参数回调函数。AMD loader 会储存回调函数的返回值，并将其作为此模块的返回值。因此任何通过 require （或 define） 加载模块的代码，都将收到一个指向模块返回值的引用。
CDN 的使用
CDN网络国内基本被墙，这一章也别看了。
等待 DOM 就绪
有件事对 web 程序很重要，就是你必须确保页面 DOM 就绪后才执行代码。这是通过一个特殊的 AMD 模块 "plugin" 来实现的。插件可以通过require 引入，类似模块。其特别之处在于模块名后跟一个感叹号。对于 DOM ready 事件，dojo 提供了一个插件叫 dojo/domReady，简单的将其放入 require 或 define 的依赖模块列表参数中，则回调函数只有在 DOM ready时才会触发。
-
require([
-
'dojo/dom',
-
'dojo/domReady!'
-
], function (dom) {
-
var greeting = dom.byId('greeting');
-
greeting.innerHTML += ' from Dojo!';
-
});
上面的例子很简单，就是给 greeting 元素添加一些文本。一旦DOM加载就绪，上述工作就可以正确完成。我们没有使用前面那个例子，是因为前面那个例子中的 script 是放在 body 的底部，因此天然的就会在 DOM 加载完毕后执行，达不到演示的效果。请再次注意模块标识符后面的惊叹号！；没有这个，dojo/domReady 同其他的模块就没有什么区别了。
类似于 dojo/domReady，在某些情况下，我们加载模块的目的仅仅是想运行他（利用其副作用），不需要获取返回的引用。对于AMD加载器来说没有办法识别这种情况，他总是将引用传递给回调函数的依赖模块参数列表中，因此对于任何你不需要处理返回引用的模块，你可以将其放置在依赖模块参数列表的末尾，我们的回调函数只是简单的将其忽略就可以了（还记得JavaScript 的函数是可以不定长参数的吗）。
更多的DOM操作函数可以参考这里： Dojo DOM Functions 。
添加视觉效果
我们可以添加动画效果让页面更具动感。我们可以使用模块 dojo/fx。让我们在 greeting 上添加一个滑动动画效果（用到了 dojo/fx 的 slideTo 方法）：
-
require([
-
'dojo/dom',
-
'dojo/fx',
-
'dojo/domReady!'
-
], function (dom, fx) {
-
// The piece we had before...
-
var greeting = dom.byId('greeting');
-
greeting.innerHTML += ' from Dojo!';
-
-
// ...but now, with an animation!
-
fx.slideTo({
-
node: greeting,
-
top: 100,
-
left: 200
-
}).play();
-
});
如你所见，我们多添加了一个依赖模块 dojo/fx，然后就可以使用这个模块来实现动画效果了。
更多特效请参考： Dojo Effects 和 Animations。
直接使用 Dojo 源：
使用 CDN 很方便。前面的例子中我们就是用的 CDN，使用他我们就可以直接拷贝代码，无需修改直接运行。但他还是有如下缺点：
-
基于性能考虑，CDN 上都是 "built"版本的 Dojo，为了便于网络传输，模块进行了最小化优化处理。这意味着，当你碰到问题时，会更难调试。
-
最终用户要求能访问公网，否则没法用你的程序。很多情况下这可能不现实。
-
想要包含自定义模块会相对困难
-
If you want to productionize your application, your performance would benefit greatly from a built version of Dojo tailored to your specific application and target browsers, which you can't achieve with a one-size fits all CDN build.
我们按照以下步骤直接使用 Dojo 源，这也是使用 Dojo 开发应用的通用步骤：
1、下载 Dojo
2、解开压缩包，放到你的工程目录中，一般如下：
-
demo/
-
myModule.js
-
dojo/
-
dijit/
-
dojox/
-
util/
-
hellodojo.html
3、不用 CDN，本地载入 dojo.js
-
<script src="dojo/dojo.js"></script>
4、配置 package configuration：
-
var dojoConfig = {
-
async: true,
-
baseUrl: '.',
-
packages: [
-
'dojo',
-
'dijit',
-
'dojox',
-
'demo'
-
]
-
};
获取帮助：
无论何时你遇到复杂问题，你都要明白你不是一个人在战斗！志愿者们随时待命，通过邮件列表和 IRC（#dojo on irc.freenode.net）可以提供支持。如果你发现文档中的错误，或者含混不清误导人的，在所有文档页的底部都有反馈链接，请让我们知晓。
下一步该如何学习：
Getting started with the Dojo Toolkit is as simple as adding a script tag and requiring some modules, but the immense scope and power of Dojo means we've barely scratched the surface of what it can do. Depending upon your needs, there are a few different paths through this tutorial series:
-
If you have used Dojo before and want to get a better understanding of the World of AMD and "baseless" Dojo, plus understand other concepts that have changed, you should take a look at the Modern Dojo tutorial.
-
If you are interested in adding some features and effects to an existing static Web page or server-driven Web site, you will want to look next at Using dojo/query, Events with Dojo, and the effects and animations tutorials.
-
If you want to add some Ajax to your site, Ajax with Dojo is your ticket.
-
If you're looking to integrate a rich widget library with your Web site or application, take a look at the Creating Template-based Widgets tutorial plus our tutorial series on Dijit widgets.
-
If you're trying to learn more about architecting complex Web applications and leveraging the power of Dojo's utility functions, head over to the Core Concepts section.
-
If your goal is a mobile application, get up and running with Getting Started with dojox/mobile.
No matter your desired outcome, Dojo provides industry-leading open-source tools that can help you get your project done in less time with amazing results. We look forward to seeing what you come up with!
阅读(1116) | 评论(0) | 转发(0) |
