Dojo 1.10 教程(1)-基础入门篇Hello Dojo

来源：互联网发布：淘宝信用值怎么增加编辑：程序博客网时间：2024/05/01 23:31

本篇教程翻译自dojo官网上的dojo1.10教程，中间对部分内容进行了酌情增删，限于个人水平，如果有什么地方翻译不到位或者理解上出了偏差，敬请指出，谢谢!

转载请注明出处:http://blog.csdn.net/qq_21251983/article/details/39548483

原文地址:Hello Dojo!

序言

欢迎来到Dojo!在本篇教程中，你将会学到如何加载Dojo以及如何使用它的部分核心功能。你也会学到Dojo的AMD模块架构,学会如何加载额外的模块来为你的网站或应用增加新的功能,以及学会如何解决问题。

难度等级:初学者

Dojo版本:1.10

开始

开始使用Dojo很简单，只需要像使用其他任何的JavaScript文件一样将dojo.js引入到你的页面里面即可。CDN上一般都有Dojo，这样的话，我们新建一个名字为hellodojo.html的网页并输入以下代码，然后用你的浏览器打开。

<!DOCTYPEhtml><html><head>    <metacharset="utf-8">    <title>Tutorial:Hello Dojo!</title></head><body>    <h1id="greeting">Hello</h1>    <!--load Dojo -->    <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"            data-dojo-config="async:true"></script></body></html>

PS：访问不了google的CDN的请自行翻墙。或者参考本篇教程最后一部分关于如何使用本地的dojo。

通常，一旦你已经加载了一个库的JS文件，那么你就能使用它里面所有的方法。在过去，Dojo也是如此，但是从1.7版本以后，Dojo采取了异步模块加载机制(即AMD)来格式化它的源码，从而完全地模块化了web应用开发的开发。选择AMD是因为它使用的是纯粹的JS语言,在允许源文件在浏览器上运行的同时也支持构建一个进程来提供最优的资源以确保应用的性能部署。

那么在dojo.js加载完成后我们能使用什么呢？那就是Dojo的AMD加载器，它定义了两个全局的函数:require和define。在Github上的AMD介绍(PS:说的有些乱，但是如果对AMD这套东西没有了解的还是最好去看看，个人推荐另外一篇关于AMD的文章)这篇教程里有更多的关于AMD的信息。很容易理解，require是让你可以加载模块并使用它们，而define允许你定义你自己的模块。通常一个模块就代表了一个JavaScript文件。

用于操作HTML DOM对象的Dojo模块有dojo/dom和dojo/dom-construct。让我们看看我们是如何加载这些模块并且使用它们提供的功能。

<!DOCTYPEhtml><html><head>    <metacharset="utf-8">    <title>Tutorial:Hello Dojo!</title></head><body>    <h1id="greeting">Hello</h1>    <!--load Dojo -->    <scriptsrc="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-construct'        ],function(dom, domConstruct) {            vargreetingNode= dom.byId('greeting');            domConstruct.place('<i>Dojo!</i>', greetingNode);        });    </script></body></html>

Require的第一个参数 (14~17行)是一个模块标识符数组--你想要加载的模块的标识符。通常的，这些映射直接就是文件名字，如果你下载了Dojo的资源描述文档并在里面找过，你就会发现在dojo目录下找到dom.js和dom.construct.js，这就是所谓的模块。

AMD加载器是异步加载，在JavaScript里面异步加载是通过callback函数来实现的，所以require的第二个参数(17行)就是一个callback函数。在这个函数里面你需要提供你对这些模块进行的操作。AMD加载器以参数的形式将模块传递给callback函数(和他们在模块id数组里面的顺序相同)。callback函数里的参数名你可以随意的定义，但是为了一致性和可读性，我们建议使用基于模块id的名字。

在第18~19行，你会发现dom和dom-construct模块通过用来获取一个DOM节点的引用并操作相应的目录。PS:如果你对AMD有初步的了解的话，就会知道dom.byId()的意思就是在调用dojo目录下dom.js中的byId()函数。

AMD加载器会自动为被请求的模块加载所有子项依赖，所以在你的请求列表里面应当只有你直接使用的模块。

定义AMD模块

这时候你已经看到了一个关于如何加载和使用模块的例子。为了定义和使用你自己的模块，你需要确保你是通过Http Server来访问你的Html页面(虽然可以使用访问本地文件，不过由于一些安全敏感的站点会阻止file:///这样形式的访问,所以你还是需要一个Http Server)。在这些例子里面，除了文件服务功能,你的web server不需要任何花哨功能。在hellodojo.html同级目录下新建一个demo目录,然后在demo目录下新建一个名为myModule.js的文件，并在里面写下如下代码:

define([    //我们自定义的这个模块需要用到dojo/dom模块，所以你在dependency列表中能找得到它    'dojo/dom'], function(dom){// 一旦dependency列表里面的所有模块都加载完毕,// 这个函数就开始进行demo/myModule 模块的定义.     varoldText = {};     // return 返回的内容就是你定义的模块    return{        setText:function(id, text) {            varnode= dom.byId(id);            oldText[id]= node.innerHTML;            node.innerHTML= text;        },         restoreText: function(id){            varnode= dom.byId(id);            node.innerHTML= oldText[id];            deleteoldText[id];        }    };});

AMD的define函数接收的参数和require函数的差不多—一个包含了模块id的数组以及一个callback函数。AMD加载器保存了callback函数的返回值来作为这个模块的值，因此，任何其他通过require或者define来加载模块的代码都将会获得一个对应的模块的返回值的引用。

CDN的使用

在使用来自CDN的Dojo的同时加载本地的模块需要一点额外的配置(更多关于如何配置Dojo的AMD加载器和使用CDN加载Dojo会在后面的高级AMD教程和使用CDN加载模块教程中进行说明)。将hellodojo.html的代码修改成如下:

<!DOCTYPE html><html><head>    <metacharset="utf-8">    <title>Tutorial: HelloDojo!</title></head><body>    <h1id="greeting">Hello</h1>    <!-- configure Dojo -->    <script>        // Instead ofusing data-dojo-config, we're creating a dojoConfig        // object*before* we load dojo.js; they're functionally identical,        // it's justeasier to read this approach with a larger configuration.        vardojoConfig= {            async:true,            //This code registers the correct location of the "demo"            //package so we can load Dojo from the CDN whilst still            //being able to load local modules            packages:[{                name:"demo",                location:location.pathname.replace(/\/[^/]*$/, '') + '/demo'            }]        };    </script>    <!-- load Dojo -->    <scriptsrc="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>     <script>        require([            'demo/myModule'        ],function(myModule) {            myModule.setText('greeting','Hello Dojo!');             setTimeout(function(){                myModule.restoreText('greeting');            },3000);        });    </script></body></html>

除了增加Dojo的配置以外,我们还重定义了主要的代码—现在它只加载demo/myModule，利用它实现了操纵页面上的文字。正如你所看到的,定义和加载模块实在是很简单的。我们同样也改变了引入dojo.js的URL来忽略网页所使用的协议(http或https)，从而防止了在一些浏览器中会因为目录混淆而产生的安全警告。

AMD模块化设计可以允许你编写能直接在浏览器中执行的模块化的JavaScript代码，同样这些代码也很方便进行debug。AMD模块使用的是局部变量，这样就避免了全局命名空间的混淆，同时提供了更快的名称解析。AMD是一种有多种实现的标准规范，所以你不必为任何一种实现所局限—AMD模块可以被任何AMD加载器加载。

等待DOM加载结束

通常来说，一件在执行代码前必须让你的web应用实现的事情是浏览器的DOM元素已经加载完成。在Dojo里这通过一个很特殊的被称作”插件”的AMD模块实现。插件可以像其它模块一样被reuqire，但是他们特殊的功能只有在定义的模块的最后加上一个感叹号从才会被激活。就DOM的ready事件来说，Dojo提供了dojo/domReady插件。只需要任意的require或者define请求中以引用的形式加入这个插件，直到DOM加载完了这个callback函数才会去执行:

require([    'dojo/dom',    'dojo/domReady!'], function(dom) {    vargreeting = dom.byId('greeting');    greeting.innerHTML += ' from Dojo!';});

上面的例子是在”greeting”元素上添加了一些文字--这些文字只有在DOM加载完才会再加上去(以前我们并不这样做是因为script标签是放在了body标签之后的--这样的话script中的内容只有在DOM加载完才会继续执行)。再次强调，需要注意模块的定义需要以”!”结尾，不这样的话，dojo/domReady模块就会变得和其他模块一样。

注意到在这个例子中，dependency数组引用了两个模块，但是callback函数中，只有一个参数，这就是下面要解释的问题。

有些时候，比如dojo/domReady组件，我们加载他只需要他的一些侧面效果，并不需要引用他。但是AMD加载器无法知道这一点--它总是在dependency数组中为每个模块传递一个指向callback函数的引用,所以任何一个不需要返回值的模块应当放在dependency数组的最后，在callback函数中对应的引用就相应的省略掉。

更多的关于DOM操作将在Dojo DOM Functios教程中进行说明。

添加视觉效果

现在我们来对我们的example进行升级，让它变得更加”生动”。dojo/fx模块可以实现这个效果。我们现在来使用dojo/fx的slideTo函数来为”greeting”元素添加一个滑动的效果:

require([    'dojo/dom',    'dojo/fx',    'dojo/domReady!'], function(dom, fx) {    // The piece we had before...    vargreeting = dom.byId('greeting');    greeting.innerHTML += ' from Dojo!';     // ...but now, with an animation!    fx.slideTo({        node: greeting,        top: 100,        left: 200    }).play();});

正如你所看到的，我们又新引用了一个dojo/fx模块，然后实现了”greeting”元素滑动的效果。

使用本地Dojo

CDN很是方便。我们在教程里面使用CDN，是因为这样的话大家复制教程上的代码后不需要做什么修改就可以直接用。但是这也有一些缺点:

因为一些展示上的问题，CDN上的都是”build”版本，这意味着上面的每一个组件都是压缩过的并且也进行过优化处理以便能在网络上尽可能快地传输。这就意味着当你出现问题的时候，想要进行debug就变得更加的困难。

这要求你的用户必须连上网才能使用你的应用，但很多时候，并不允许连接外网。(比如我大天朝的神奇的网络就不能访问Google的CDN)。

很多时候需要根据自己的产品应用以及目标浏览器来对dojo进行最优的定制，CDN上的都是一个完整的版本，并不适合。

下面的来对通常情况下在项目中使用dojo的方法进行说明:

1. 下载Dojo.

2. 将dojo导入你的项目中, 目录结构可以如下:

demo/

   myModule.js

dojo/

dijit/

dojox/

util/

hellodojo.html

3. 本地加载dojo.js ,而不是从CDN:

<script src="dojo/dojo.js"></script>

4. 更新你的package configuration:

vardojoConfig = {    async: true,    baseUrl: '.',    packages: [        'dojo',        'dijit',        'dojox',        'demo'    ]};

0 0