Dojo翻译系列之一Hello Dojo!

翻译的不怎么好，以后会逐步修改的，好像博客园上面的Dojo文章很少啊。。。。。。。

Hello Dojo!

　　欢迎来到Dojo!，在这个教程中，你将学会怎样加载Dojo并且探索一些它的核心功能，你也将了解Dojo的基于AMD的模块架构，发现怎样加载额外的模块用来添加额外的功能到你的web站点或应用程序，同时当你遇到困难时怎么获取帮助。

准备开始

简单的包含dojo.js脚本到你的web页面就可以开始了，就像其他任何javascript文件一样，在流行的CDNs上dojo也是可以用的，那么准备一个文件名为hellodojo.html，在你的浏览器中打开它。

 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     <!-- load Dojo -->
10     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
11             data-dojo-config="async: true"></script>
12 </body>
13 </html>

View Code

通常情况下，一旦你加载了一个库的javascript文件，你就可以使用它的方法了，在过去的Dojo中这是真的，但是在dojo1.7release源码中采用了AMD格式，允许完全的模块化web应用程序开发，AMD被选择，是因为它使用纯javascript，允许源文件在web浏览器中工作，同时也支持一个构建过程使得生产优化资源，在部署中提高了应用的性能。

那么当dojo.js被加载时，什么是可用的呢？Dojo的AMD加载器，它定义了两个全局函数require和define，在Introduction to AMD tutorial.涵盖了大部分AMD的细节，作为开始，要理解require让你能加载模块并使用模块，define允许你定义你自己的模块，一个模块通常是单个javascript源文件

一些dojo的基本模块用来HTML DOM操作是dojo/dom 和 dojo/dom-construct.

让我们看看怎么加载模块并使用它们提供的功能

 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     <!-- load Dojo -->
10     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
11             data-dojo-config="async: true"></script>
12 
13     <script>
14         require([
15             'dojo/dom',
16             'dojo/dom-construct'
17         ], function (dom, domConstruct) {
18             var greetingNode = dom.byId('greeting');
19             domConstruct.place('<em> Dojo!</em>', greetingNode);
20         });
21     </script>
22 </body>
23 </html>

View Code

Require的第一个参数是一个模块标识数组module ids，--你想加载的模块标识，通常，直接映射到文件名，如果你夏总了dojo的源文件，查看dojo的目录，你将会看到dom.js和dom-construct.js文件中定义了那些模块。

AMD加载器操作是异步的，使用回调来实现javascript异步操作，require的第二个参数是回调函数，在这个函数中你提供你的代码来使用模块，AMD加载器传递模块作为回调函数的参数（按照在模块标识数组中指定的同样的顺序），在你的回调函数中你可以自由的命名你喜欢的参数名，但是出于一致性和可阅读性的目的，我们推荐使用基于模块标识的命名。

在18和19行，你可以看到dom和dom-construct模块用来通过ID获取一个DOM节点的引用，同时操作它的内容。

AMD加载器对于请求的模块将会自动的加载子依赖，因此，在你的依赖列表中仅仅需要你直接使用的的模块。

定义AMD模块

在此，你将会看到一个加载和使用模块的例子，为了定义和加载你自己的模块，你需要确保你从HTTP服务器上加载你的HTML文件（localhost是好的，但是你需要一个HTTP服务器，因为使用file:///协议会因为安全的微妙之处而阻止一些东西），对于这些例子，你不需要任何花哨的功能，而是您的web服务器提供文件的能力，添加demo文件夹到包含hellodojo.html的目录中，在demo目录中创建名为myModule.js的文件

1 demo/
2     myModule.js
3 hellodojo.html

View Code

现在进入myModule.js

 1 define([
 2     // The dojo/dom module is required by this module, so it goes
 3     // in this list of dependencies.
 4     'dojo/dom'
 5 ], function(dom){
 6     // Once all modules in the dependency list have loaded, this
 7     // function is called to define the demo/myModule module.
 8     //
 9     // The dojo/dom module is passed as the first argument to this
10     // function; additional modules in the dependency list would be
11     // passed in as subsequent arguments.
12 
13     var oldText = {};
14 
15     // This returned object becomes the defined value of this module
16     return {
17         setText: function (id, text) {
18             var node = dom.byId(id);
19             oldText[id] = node.innerHTML;
20             node.innerHTML = text;
21         },
22 
23         restoreText: function (id) {
24             var node = dom.byId(id);
25             node.innerHTML = oldText[id];
26             delete oldText[id];
27         }
28     };
29 });

View Code

AMD 的define函数和require函数接收同样的参数，一个模块标识数组和一个回调函数，AMD加载器存储了回调函数的返回值作为模块的值，因此任何其他代码使用require或者define加载模块，将接收一个此定义模块返回值的引用。

CDN用法

加载本地模块当从CDN上使用dojo需要一点额外的配置，配置dojo的AMD加载器和用CDN使用Dojo被找到在Advanced AMD 和 Using Modules with a CDN 教程

 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         // Instead of using data-dojo-config, we're creating a dojoConfig
12         // object *before* we load dojo.js; they're functionally identical,
13         // it's just easier to read this approach with a larger configuration.
14         var dojoConfig = {
15             async: true,
16             // This code registers the correct location of the "demo"
17             // package so we can load Dojo from the CDN whilst still
18             // being able to load local modules
19             packages: [{
20                 name: "demo",
21                 location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
22             }]
23         };
24     </script>
25     <!-- load Dojo -->
26     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
27 
28     <script>
29         require([
30             'demo/myModule'
31         ], function (myModule) {
32             myModule.setText('greeting', 'Hello Dojo!');
33 
34             setTimeout(function () {
35                 myModule.restoreText('greeting');
36             }, 3000);
37         });
38     </script>
39 </body>
40 </html>

View Code

除了添加Dojo的配置，我们重新定义了主要代码，现在仅仅加载demo/myModule，利用它来完成页面文本的操作，正如你所看到的，定义和加载模块是相当简单的，我们也改变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 += ' from Dojo!';
7 });

View Code

上面的例子简单的添加了一些文本到greeting元素中，一旦DOM被加载，某些事情就可靠的执行，（在之前的代码中我们不用这个，因为script元素被包含在body底部，这会延迟处理script直到DOM被加载），再次注意模块标识后面的！没有这个，dojo/domReady将被当做简单的函数像其他任何函数一样。

在某些情况下，正如dojo/domReady，我们为了它的副作用而加载模块，不需要对它引用，AMD加载器没有办法知道这个—它总是对依赖数组的每个模块传递一个引用给回调函数，因此对于你不需要使用的任何模块应当被放在依赖列表的最后，回调函数中忽略对它们的引用。

更多关于DOM操作的函数能被找到在Dojo DOM Functions教程

添加视觉效果

现在我们能通过添加动画来生动我们的例子，我们能加载来添加效果到页面的一个模块是dojo/fx，让我们添加一个滑动动画到greeting通过dojo/fx的slideTo方法

 1 require([
 2     'dojo/dom',
 3     'dojo/fx',
 4     'dojo/domReady!'
 5 ], function (dom, fx) {
 6     // The piece we had before...
 7     var greeting = dom.byId('greeting');
 8     greeting.innerHTML += ' from Dojo!';
 9 
10     // ...but now, with an animation!
11     fx.slideTo({
12         node: greeting,
13         top: 100,
14         left: 200
15     }).play();
16 });

View Code

就像你看到的一样，我们添加了又一个依赖使用dojo/fx，然后使用这个模块播放了一个动画在我们的greeting元素上

使用Dojo的源

CDNs是方便的，我们在教程中使用它们，因为这意味着你可以直接复制代码并且不用改变任何地方就可以很好的为你工作，它们有一些缺点：

出去性能的原因，它们是一个构建Dojo版本，意味着每个模块都是最小化和优化的能有效的在Internet上发送，这就意味着当你有个问题，它们是很难调试的。

它们要求你的用户有公共的互联网访问来使用你的应用程序，在很多情况下，这可能是不实际的

它要求更多的努力去包含你自己的自定义模块

如果你想生产化你的应用，从一个特殊应用和目标浏览器中量身定制的构建Dojo版本中能获得好的性能，你不能实现CDN与万能的构建

按照下面的步骤来开始使用Dojo源，这是一般的你将使用Dojo开发项目

1，下载Dojo

2，提取dojo架构到你的项目文件夹

1 demo/
2     myModule.js
3 dojo/
4 dijit/
5 dojox/
6 util/
7 hellodojo.html

View Code

3，更新你的包配置

 1 var dojoConfig = {
 2     async: true,
 3     baseUrl: '.',
 4     packages: [
 5         'dojo',
 6         'dijit',
 7         'dojox',
 8         'demo'
 9     ]
10 };

View Code

posted @ 2016-07-23 18:56 becauseCode 阅读(388) 评论(0) 编辑收藏举报

becauseCode

Dojo翻译系列之一Hello Dojo!

Hello Dojo!

公告