Dojo是什么?

Dojo是面向对象的JavaScript框架:Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。

官方:https://dojotoolkit.org/documentation/tutorials/1.10/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基于AMD协议的模块组织架构,探索如何加载额外的模块来添加额外的功能到你的网站上或者APP上,以及当出现问题时如何寻求帮助。

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 popular CDNs, so to get started enter the following in a file named hellodojo.html and open it in your web browser.

上手Dojo就如同在网页上包含dojo.js一样简单。Dojo可以在流行的CDNs上获取到。打印下面的代码到你的文件,命名为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="//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(Asynchronous Module Definition)异步模块定义格式,完全模块化的web应用程序开发。之所以选择AMD,是因为它采用纯JavaScript,允许源代码在浏览器上运行,同时支持开发过程中编译过程生成最优的资源。

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 and dojo/dom-construct. Let's see how we can load these modules and use the functionality they provide:

Dojo的几个HTML DOM操作模块是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行)的第一个参数是一个module ids数组——你想要加载的模块的标识符。通常,这些直接映射到文件名,如果你下载了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.

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.

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.

原文地址:https://www.cnblogs.com/2008nmj/p/13879688.html