Dojo官方文档（五）之小部件——①超越Dojo

Beyond Dojo

原文地址：https://dojotoolkit.org/documentation/tutorials/1.10/beyond_dojo/index.html

    Dojo区别于其他JavaScript库的地方在于Dojo的范围。虽然您可以简单地使用Dojo基础的功能，DOM、Ajax、effects和其他常用功能。工具包提供了更多的功能。在本教程中，我们将快速浏览dojo工具包，介绍一些附带的组件，这些组件都是随每个版本一起发送的。

开始

    到目前为止，您可能只使用dojo的基本功能。您可能已经冒险进入dojo核心的其他部分，包含在发行版的/dojo/目录中的模块，并具有以dojo/*开头的模块ID。如果你下载dojo的sdk发行版，或者从SVN中签出一个版本，您将注意到dojo不是唯一的包：

    

    你不太可能发现到这一步，也不太可能在Dojo的不同部分闲逛。但是以防万一，让我们再来看一下基础知识。

包和模块

    Dojo中的包严格地是AMD包，它要求它包含位于根目录中的package.json文件以描述包。有三个包分发给dojo源分发器：dojo，dijit和dojox, 源分发中的第四个目录是util-它不是一个包，包含有用的实用工具，以便更容易地管理Dojo项目。

    模块组合成包。模块是一个JavaScript文件，可以通过Dojo loader（dojo加载器）(或另一个AMD加载器)加载到应用程序中，这些模块通常将以define()函数开始。由于dojo的扩展性质，您将在三个根包中找到许多子目录。有时我们将这些子目录称为“子包”，但严格地说它们不能作为一个AMD包来独立。模块的模块ID(MID)将直接映射到包内所占用的路径。例如，模块/dojo/fx.js有dojo/fx的模块ID，在包目录中通常会包含其他资源，包括测试、CSS、语言资源和图像。

    Base和Core

    传统的版本（在1.7之前的Dojo版本中），当dojo/dojo.js进入您的应用程序时默认加载一个功能集到您的应用程序，这个功能称为"base"Dojo。在Dojo1.7版本中，此功能被从dojo/dojo.js拿出放到dojo/_base中的各个目录中。如果您正在使用"legacy"模式（async:false），那么这些模块会在您加载dojo/dojo.js时自动加载到您的应用程序。如果您正在使用async模式，（async:true)，那么这些模块只有在需要时才会直接加载，或者如果加载的另一个模块依赖于该模块。

    dojo包中的其余模块被称为Core。如果您一直在阅读其他教程，您可能已经使用了Core的其余部分，例如animation tutorial中的dojo/fx。

    Dojo Core 提供了广泛的功能，包括feature detection、 deferreds和promises、事件处理、data store、DOM操作、查询、DOM effects、window lifecycle management、鼠标、触摸和键盘事件、拖放、日期和国际化。

    一个传统例子

    这个示例使用了一些“惯用”的方式，您可以使用dojo(以及潜在的其他javascript库)来进行DOM查询和操作：

require([
    "dojo/query",
    "dojo/_base/array",
    "dojo/dom-construct",
    "dojo/domReady!"
], function(query, array, domConst){
    function topLinks(){
        var headings = query('h2,h3');

        array.forEach(headings, function(elm){
            var topLink = domConst.create("a", {
                href: "#top",
                innerHTML: "^top"
            });

            domConst.place(topLink, elm, "before");
        });
    }
});

代码段使用CSS选择器查询DOM，以指向我们想要的<h2>和<h3>元素，并将每个元素作为引用节点来插入新创建的<a>元素。有专门的教程学习dojo/query、DOM functions和array helpers。

    Dojo Core 示例

    使用Core模块创建一个比较两个日期的函数并返回差异的示例

require([
    "dojo/date",
    "dojo/dom",
    "dojo/domReady!"
], require(date, dom){
    function daysSince(fromDate, target){

        if(!(fromDate instanceof Date)){
            fromDate = new Date(fromDate);
        }
        console.log("from date: ", fromDate);
        var now = new Date();
        console.log("From Date: " + fromDate.toUTCString());

        console.log("Difference in days: " +
            date.difference(fromDate, now, "day"));

        var days  = date.difference(fromDate, now, "day");

        dom.byId(target).innerHTML = days;
    }
});

VIEW DEMO

Dojo Base和Core中有丰富的功能，用于通用编辑任务。这些教程旨在介绍这些内容，但它不应该取代Reference Guide和API Reference