翻译 - 【Dojo Tutorials】Hello Dojo!

原文：Hello Dojo

欢迎使用Dojo。在本教程中，你将学习如何载入Dojo并开始探索它的核心功能。还会学习到Dojo的基于AMD的模块架构，涵盖了如何通过载入第三方模块来为你的网站或应用增强功能，以及在遇到问题时如何寻求帮助。

开始

开始使用Dojo很简单，在网页中加入dojo.js的script标签即可，和载入其他js文件一样。Dojo在流行的CDN服务器上都有放置，作为开始，我们把下面的内容保存为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="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"  data-dojo-config="async: true"></script>
    </body>
</html>

 一般情况下，一旦你载入了一个JavaScript库文件，那么它的所有方法都可用了。之前版本的Dojo确实是这样的，但是从版本1.7起，Dojo为它的源代码采用了异步模块定义（AMD）格式，允许纯模块化的web应用开发。之所以选择AMD，因为它运行于纯JavaScript环境，允许源文件运行于浏览器中，同样也提供了用于部署生产环境的优化资源，用于提供应用的性能。

所以当Dojo载入后什么是可用的？Dojo的AMD加载器可以，且为了使用它还定义了两个全局函数require和define。在介绍AMD教程中有更多的细节。首先应该明白，当使用define定义了你自己的模块后，使用require能够载入它们。一个模块一般就是一个单独的js文件。

一些为Dom提供的Dojo基础模块有dojo/dom和dojo/dom-construct。让我看看如何载入这些模块，并使用它们提供的功能：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial: Hello Dojo!</title>
    </head>
    <body>
        <h1 id="greeting">Hello</h1>
        <!-- load Dojo -->
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"  data-dojo-config="async: true"></script>
        <script>
    　　　　require([
　　　　　　　　'dojo/dom', 
　　　　　　　　'dojo/dom-constrct'
　　　　　　], function(dom, domConstruct) {
　　　　　　　　var greetingNode = dom.byId('greeting');
　　　　　　　　domConstruct.place('<i> Dojo!</i>', greetingNode);
　　　　　　});
        </script
    </body>
</html>

 

require的第一个参数是一个要载入的模块标识的数组。一般，他们直接映射到文件名，如果你下载了Dojo的源码且查看了dojo的目录，你将会看到定义了对应模块的dom.js和dom-construct.js文件。

AMD加载器的操作都是异步的，且在JavaScript中异步操作是通过回调来实现的，所以require的第二个参数是一个回调函数。在这个函数中你就可以使用这些模块编写自己的代码。AMD加载器将模块按序通过回调函数的参数传递。在回调函数中模块对应的参数名可以自由发挥，但是为了一致性与可读性我们建议使用模块的标识作为参数名。

在18至19行中可以看到使用dom和dom-construct模块根据id获取DOM节点并修改了它的内容。

AMD加载器将会自动为模块加载子依赖，所以你只需要在你的依赖列表中直接使用所需要的模块就好了。

定义AMD模块

已经学习了模块加载和使用的例子了。为了定义和载入你自己的模块，需确定是从HTTP服务器载入HTML文件。在这些示例中，你的web服务器除提供文件之外不需要任何其他的功能。在hellodojo.html所在的目录新增demo文件夹，在demo文件夹下新建myModule.js文件。

/demo
    myModule.js
hellodojo.html

 然后在myModule.js中输入下面的内容：

 1 define([
 2     'dojo/dom'
 3 ], function(dom) {
 4     var oldText = {}; 
 5     return {
 6         setText: function(id, text) {
 7             var node = dom.byId(id);
 8             oldText[id] = node.innerHTML;
 9             node.innerHTML = text;
10         },
11         restoreText: function(id) {
12             var node = dom.byId(id);
13             node.innerHTML = oldText[id];
14             delete oldText[id];
15         }
16     };
17 });

AMD的define函数接受像require一样的参数，一个模型标识数组和一个回调函数。AMD加载器保存回调函数的返回值作为模块的值，所以其他的代码中使用require或define载入模块时，将接受到这个回调函数返回值的一个引用。

使用CDN

使用CDN中的Dojo载入本地模块需要一些额外的配置（更深入的了解请转到AMD进阶和结合CDN使用模块）。更新hellodojo.js文件如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Tutorial: Hello Dojo!</title>
 6     </head>
 7     <body>
 8         <h1 id="greeting">Hello</h1>
 9         <!-- configure Dojo -->
10         <script>
11             var dojoConfig = {
12                 async: true,
13                 packeages: [{
14                     name: "demo",
15                     location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
16                 }]
17             };
18         </script>
19         <!-- load Dojo -->
20         <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
21         <script>
22             require([
23                 'demo/myModule'
24             ], function(myModule) {
25                 myModule.setText('greeting', 'Hello Dojo!');
26                 setTimeout(function() {
27                     myModule.restoreText('greeting');
28                 }, 3000);
29             });
30         </script>
31      </body>
32 </html>

除了添加Dojo配置，我们还重定义了主代码——现在只需要载入demo/myModule，且利用它操纵了页面的内容。正如你所看到的，定义和载入模块是如此的简单。我们还修改了dojo.js的URL，省去了协议部分-这样创建的连接将使用页面所使用的协议（不管是http还是https），防止有些浏览器中由于安全警告而导致的内容混淆。

使用AMD组织代码，可以创建模块化的JavaScript代码且在浏览器中立即执行它，还比较好调试。AMD模块中使用本地变量区间，避免了全局变量导致的杂乱无章。AMD对于多重实现是一个标准的规格，所以你并没有禁锢在单独的实现中——AMD模块可以被其他任意的AMD加载器使用。

等待DOM加载完成

在web应用开发是，经常在代码执行之前需要确定浏览器DOM已经可用（加载完成）。这可以通过一个叫做插件的AMD模块来完成。插件可以包含任意其他模块，但是他们的特定功能在模块标识尾部被添加一个惊叹号时才被激活。对于DOM准备好的事件，Dojo提供了dojo/domReady插件。只需要在require或define调用时将其加入依赖列表，回调就会在DOM准备好之后调用。

1 require([
2     'dojo/dom',
3     'dojo/domReady!'
4 ], function(dom) {
5     var greeting = dom.byId('greeting');
6     greeting.innerHTML += ' form Dojo!';
7 });

 

上面的例子在greeting元素后追加了内容——只能在DOM载入后才能执行的操作（）。再次注意到模块的标识后加了！；没有这个，dojo/domReady就会和其他模块一样。

有些时候，像dojo/domReady这样，我们只需要载入并不需要他的引用。AMD加载器没有办法知道这些，它总是将模块按序传入回调函数，所有那些不需要关系返回值的模块应该放在依赖数组尾部，它们对应的参数就可以省略了。

更多关于DOM操作的函数请关注Dojo DOM Functions指南。

添加视觉动画效果

现在我们可以加入动画将我们的例子变得活泼起来。我们可以载入一个模块来给页面添加动效，那就是dojo/fx。让我使用dojo/fx的slideTo方法给greeting添加一个滑动的效果。

 1 require([
 2     'dojo/dom',
 3     'dojo/fx',
 4     'dojo/domReady'
 5 ], function(dom, fx) {
 6     var greeting = dom.byId('greeting');
 7     greeting.innerHTML += ' form Dojo!';
 8 
 9     fx.slideTo({
10         node: greeting,
11         top: 100,
12         left: 200
13     }).play();
14 });

 正如你所看到的，我们另加了dojo/fx的依赖，然后使用这个模块在greeting元素上播放了动画。

 更多有小动效和动画的信息请移步Dojo Effects和Animations

使用Dojo源码

CDN是很方便，我们在例子都用它，那是因为你可以直接使用它上面的代码，而不需要为你的工作改动代码。但CDN也有一些不便的对方：

  • 基于性能的问题，它们是构建好的Dojo，每个模块都做了压缩和优化方便在互联网上高效的传输。但是如果你遇到问题，调试则成了大问题。
  • 它要求用户在使用你的应用要能连接互联网，在很多时候这是不太实际的。
  • 你要使用自定义的模块需要做更多的努力。
  • 也许你想针对指定的浏览器发布你的应用，那就不需要全部的Dojo代码，也许你想要的一个裁切的版本。（按需加载）

接下来我们逐步来看看如何使用Dojo源代码来开发你的应用：

  1. 下载Dojo，也可以是用git获取。
  2. 解压Dojo到你的项目目录。
  3. 载入本地的dojo代码。
  4. 更新包配置。

获取帮助

不管是你有什么困惑或者在运行中遇到什么棘手的问题，你都不是一个人在战斗。一大批志愿者随时准备着，他们通过邮件和IRC提供帮助。如果你发现了文档中的错误，或者有误导的地方，请点击文件下方的反馈按钮将问题公司我们。

如果你需要一些紧急或私密的帮助，或者有个难题需要我们的志愿者团队来帮助解决。Dojo的商业支持或培训班也许能帮助你。

接下来我们做什么

我们直接办dojo载入页面再加上一些模块就可以开始开发了，但是这相对与Dojo的强大和广袤而言，还只是冰山一角（我们只是了解了下皮毛）。利于你的提高，我们提供了一些教程：

不管你想要怎么的结果，Dojo提供的业界领先的开源工具可以让你在项目花费较少的时间完成惊人的工作。我们期待你更好的表现。

posted on 2014-09-16 16:48  古道倦马  阅读(432)  评论(0)  编辑  收藏  举报

导航