Hello Dojo

最新推荐文章于 2024-10-02 05:39:15 发布

chuozi5114

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量128

点赞数

文章标签： javascript git ViewUI

原文链接：https://my.oschina.net/fjs/blog/761284

版权

Hello Dojo!

Welcome to Dojo! In this tutorial, you’ll learn how to load Dojo and begin exploring some of its core functionality. You’ll also learn about Dojo’s AMD-based module architecture, discover how to load additional modules to add extra functionality to your Web site or application, and find out how to get help when things go wrong.

您好 Dojo!

欢迎来到Dojo！在本教程中，您将学习如何加载Dojo和开始探索它的一些核心功能。您还将了解Dojo的基于AMD处理器的模块结构，探索如何加载额外的模块额外的功能添加到您的网站或应用程序，并找出如何获得帮助时出问题。

Getting Started

Getting started with Dojo is as simple as including the dojo.js script in a web page, just like any other JavaScript file. Dojo is available on popularCDNs, so to get started enter the following in a file named hellodojo.htmland open it in your web browser.

入门

开始使用Dojo是为包括简单dojo.js的脚本在网页中，就像任何其他JavaScript文件。Dojo是很多流行的CDN，所以上手在一档名为输入以下hellodojo.html并在Web浏览器中打开它。

<!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>

Normally, once you've loaded a library's JavaScript file you have all of its methods available. This was true in the past with Dojo, but with the 1.7 release Dojo adopted the Asynchronous Module Definition (AMD) format for its source code, allowing completely modular web application development. AMD was chosen because it works with pure JavaScript, allowing source files to work in web browsers, while also supporting a build process for producing optimized resources to enhance application performance in deployment.

通常情况下，一旦加载库的JavaScript文件有其所有的可用方法。这与过去使用DOjo是真实的，但与1.7释放道场通过的异步模块定义（AMD）的格式为它的源代码，从而允许完全模块化的web应用程序的开发。AMD之所以被选择，因为它与纯JavaScript的作品，让源文件的Web浏览器，同时还支持构建过程生产优化资源，以加强在部署应用程序的性能。

So what is available when dojo.js has been loaded? Dojo's AMD loader is, and it defines two global functions for using it - require and define. AMD is covered in more detail in the Introduction to AMD tutorial. For getting started, it is sufficient to understand that require enables you to load modules and use them, while define allows you to define your own modules. A module is typically a single JavaScript source file.

所以，当dojo.js 被加载的时候它有什么用？Dojo的AMD加载器是，它定义了两个全局函数使用它- require和define。AMD在详细介绍了介绍AMD教程。对于入门来说，就足以明白，require使您能够加载模块和使用它们，同时define允许你定义自己的模块。一个模块通常是一个JavaScript源文件。

A few of Dojo's basic modules for HTML DOM manipulation are dojo/dom anddojo/dom-construct. Let's see how we can load these modules and use the functionality they provide:

对HTML 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="//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>

The first parameter to require (lines 14-17) is an array of module ids — identifiers for the modules you want to load. Generally, these map directly to file names, and if you download the source distribution of Dojo and look in the dojo directory, you will see dom.js and dom-construct.js files which define those modules.

require（行14-17）的第一个参数是一组模块的ID ------你要加载模块的标识符。一般来说，这些直接映射到文件名，如果你下载的Dojo源分布，并期待在dojo目录中，你会看到dom.js和dom-construct.js它定义的模块文件。

AMD loaders operate asynchronously, and in JavaScript asynchronous operation is implemented with callbacks, so the second parameter to require(line 17) is a callback function. In this function you provide your code that makes use of the modules. The AMD loader passes the modules as parameters to the callback function (in the same order they were specified in the module id array). You are free to name the parameters to your callback function whatever you like, but for the sake of consistency and readability we recommend using names based on the module id.

AMD的装载机异步运行，并在JavaScript中异步操作与回调实现的，所以，require（行17）的第二个参数是一个回调函数。在此功能中提供的代码，使用的模块。AMD的装载机传递模块作为参数给回调函数（以相同的顺序他们模块ID阵列中被规定）。你可以自由命名任何你喜欢的参数回调函数，但为了一致性和可读性起见，我们建议您使用基于模块ID名称。

On lines 18 and 19 you can see the dom and dom-construct modules in use to get a reference to a DOM node by its id and manipulate its content.

行18和19可以看到使用dom和dom-construct模块，通过ID获取DOM节点的引用和操作的内容。

The AMD loader will automatically load all sub-dependencies for a requested module, so only the modules that you need to use directly should be in your dependency list.

AMD的加载器会自动加载所有的子依赖为请求的模块，所以只是你需要直接使用应该在你的依赖列表的模块。

Defining AMD Modules

At this point you've seen an example of loading and using modules. To define and load your own modules, you'll need to ensure that you are loading your HTML file from an HTTP server (localhost is fine, but you do need an HTTP server since there are security subtleties that will prevent many things from working with the "file:///" protocol). For these examples, you don't need any fancy features in your web server other than the ability to serve files. Add ademo directory in the directory that contains your hellodojo.html file, and in the demo directory create a file named myModule.js:

定义AMD模块

此时，您已经看到了加载和使用模块的例子。为了定义和加载自己的模块，你需要确保你正在从HTTP服务器加载的HTML文件（本地主机是好的，但你需要一个HTTP服务器，因为存在安全细微之处，以防止从工作的很多东西"file:///"协议）。对于这些示例，您不需要在Web服务器中有任何奇特的功能，除了能够提供文件。添加一个demo目录包含您的目录中hellodojo.html的文件，并在demo目录中创建一个文件名为myModule.js：

demo/
    myModule.js
hellodojo.html

Now enter the following in myModule.js:

现在，请在下面myModule.js：

define([
    // The dojo/dom module is required by this module, so it goes
    // in this list of dependencies.
    'dojo/dom'
], function(dom){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the demo/myModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments.

    var oldText = {};

    // This returned object becomes the defined value of this module
    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];
        }
    };
});

The AMD define function accepts similar parameters to the require function - an array of module ids and a callback function. The AMD loader stores the return value of the callback function as the module's value, so any other code that loads the module with require (or define) will receive a reference to the return value of the defining module.

AMD的define函数接受类似的参数的require功能-模块ID数组和一个回调函数。AMD加载器存储回调函数的返回值作为模块的值，所以任何其他使用require (或 define)加载模块的代码都会接收对定义模块的返回值的引用。

CDN Usage

Loading local modules while using Dojo from a CDN requires a little extra configuration (more information on configuring Dojo's AMD loader and using Dojo with a CDN can be found in the Advanced AMD and Using Modules with a CDN tutorials). Update hellodojo.html as follows:

CDN使用

加载本地模块，会同时使用Dojo从一个CDN需要一些额外的配置（上配置Dojo的AMD加载器，并使用Dojo和CDN的更多信息，可在发现高级AMD和使用模块与CDN教程）。更新hellodojo.html如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- configure Dojo -->
    <script>
        // Instead of using data-dojo-config, we're creating a dojoConfig
        // object *before* we load dojo.js; they're functionally identical,
        // it's just easier to read this approach with a larger configuration.
        var dojoConfig = {
            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 -->
    <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>

In addition to adding configuration for Dojo, we've redefined the main code - now it only loads demo/myModule, and utilizes it to accomplish manipulation of the text on the page. As you can see, defining and loading modules is pretty simple. We've also changed the URL to dojo.js to omit the protocol (line 26) - this creates a link that uses whatever protocol the page is using (http or https), preventing mixed content which raises security warnings in some browsers.

除了增加配置Dojo，我们已经重新定义了主要的代码-现在它只是加载demo/myModule，并利用它来实现页面上的文本操作。正如你所看到的，定义和加载模块是非常简单的。我们也改为URL dojo.js省略协议（第26行） -这将创建一个使用的任何协议的页面使用的链接（HTTP或HTTPS），防止混合内容这引起了在某些浏览器的安全警告。

Organizing code in AMD modules allows you to create modular JavaScript source that is immediately executable in the browser, and easy to debug as well. AMD modules use local scope for variables, avoiding cluttering the global namespace and providing faster name resolution. AMD is a standard specification with multiple implementations, so you are not locked into any single implementation - AMD modules can be used with any AMD loader.

在AMD模块组织代码允许你创建模块化JavaScript源是在浏览器中直接执行，并易于调试为好。AMD模块使用的局部变量的范围，避免杂乱的全局命名空间，并提供更快的名称解析。AMD是具有多种实现标准规范，这样你就不会被锁定在任何单一的实现 - AMD模块可以与任何AMD用于加载程序。

Waiting for the DOM

One of the common things that you need to accomplish with web applications is to ensure that the browser's DOM is available before executing code. This is accomplished via a special AMD module called a "plugin". Plugins can be required like any other module, but their special functionality is only activated by adding an exclamation point (bang) to the end of the module identifier. In the case of the DOM ready event, Dojo provides thedojo/domReady plugin. Simply include this plugin as a dependency in anyrequire or define call and the callback will not be fired until the DOM is ready:

等待DOM

对，你需要使用Web应用程序来完成共同的东西是要确保浏览器的DOM是执行代码之前可用。这是通过所谓的“插件”的特殊的AMD模块来完成的。插件可以被要求像任何其他的模块，但其特殊功能只能通过添加一个感叹号（爆炸）的模块标识符年底启动。在DOM ready事件的情况下，Dojo提供的dojo/domReady插件。只要有这个插件在任何依赖require或define请求和回调不会被解雇，直到DOM已准备就绪：

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

The example above simply adds some text to the greeting element — something that can only be done reliably once the DOM is loaded (we did not use this in previous code since the script element is included at the bottom of the body element — this delays processing of the script until the DOM has loaded). Again, note that the module identifier ends with !; without this, thedojo/domReady module would simply function like any other module.

上面简单的例子中增加了一些文本的greeting元件---------只有在加载DOM后才能可靠地完成（我们没有使用以前的代码，因为使用此script元素被包括在所述的底部body元件-这延迟的脚本的处理直到DOM加载）。再次注意，该模块标识符与结束！ ; 没有这一点，该dojo/domReady模块将简单的功能就像任何其他的模块。

In some cases, as with dojo/domReady, we only load a module for its side-effects and do not need a reference to it. The AMD loader has no way of knowing this — it always passes a reference to each module in the dependencies array to the callback function, so any modules for which you do not need to use the return value should be placed at the end of the dependency array, and references to them omitted from the parameter list to the callback function.

在某些情况下，如dojo/domReady，我们只加载其副作用的模块，并且不需要对它的引用。AMD的装载机没有办法知道这种方式-它总是传递一个参考的依赖阵列回调函数中的每个模块，所以您不需要使用返回值的任何模块应放在依赖关系的结束阵列，并且对它们的引用从参数列表回调函数忽略。

More information on DOM manipulation functions can be found in the Dojo DOM Functions tutorial.

对DOM操作功能的更多信息可以在找到DojoDOM 功能教程。

Adding Visual Effects

Now we can liven up our example by adding some animations. One module we can load to add effects to the page is dojo/fx. Let's add a sliding animation to the greeting with dojo/fx's slideTo method:

添加视觉效果

现在，我们可以通过添加一些动画搞活我们的例子。一个模块，我们可以装载到效果添加到页面dojo/fx。让我们一个滑动动画添加到跟人打招呼用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();
});

As you can see, we've added one more dependency with dojo/fx, then used that module to play an animation on our greeting element.

More information on effects and animations can be found in the Dojo Effects and Animations tutorials.

正如你所看到的，我们增加了dojo/fx，那么使用的模块来我们对播放动画greeting元素。

在效果和动画的更多信息可以在找到道场效果和动画教程。

Using the Dojo Source

CDNs are handy. We use them in the tutorial examples, because it means you can copy the code directly and don't have to change anything to have them work for you. They have a few disadvantages though:

For performance reasons, they are a "built" version of Dojo, which means that each of the modules is minimized and optimized to be sent efficiently over the Internet. This means that when you have an issue, they are more difficult to debug.
They require your user to have access to the public Internet to use your application. In a lot of cases that may or may not be practical.
It requires more effort to include your own custom modules.
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源

CDN的都得心应手。我们使用他们的实例教程，因为这意味着你可以直接将代码复制，并没有改变任何东西让他们为你工作。他们有一些缺点，但：
由于性能的原因，它们是Dojo的“内置”的版本，这意味着每一个模块的最小化和优化，可以通过Internet有效地发送。这意味着，当你有一个问题，他们更难以调试。
他们需要你的用户能够访问公共互联网使用应用程序。在很多，可能或可能不实用的情况下。
它需要更多的努力，包括您自己的自定义模块。
如果你想productionize您的应用程序，你的表现会从适合您的具体应用和目标浏览器，你不能达到与一个尺寸适合所有CDN构建的Dojo内置版本大大受益。
按照这些步骤来使用Dojo源，通常是你将如何使用Dojo的开发项目开始

Download Dojo - look near the bottom and download the source release.

If you are experienced with git and GitHub, you can clone Dojo from GitHub. At a minimum, get dojo. You will likely want dijit, dojox, andutil at some point as well (these are all included in the source download).
Extract the Dojo archive into your project folder, e.g.:

下载Dojo -看起来接近底部并下载源代码版本。

如果您正在使用git和GitHub上，可以从GitHub克隆道场。至少，获得Dojo。你可能会想的dijit，DojoX中，并UTIL在某些时候，以及（这些都包含在源下载）。
提取Dojo归档到项目文件夹，例如：
```
demo/
    myModule.js
dojo/
dijit/
dojox/
util/
hellodojo.html
```
3.Load dojo.js locally, rather than from the CDN:

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

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

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

转载于:https://my.oschina.net/fjs/blog/761284