dojo中模块的定义与使用

最新推荐文章于 2024-09-14 11:27:21 发布

shiyangxu

最新推荐文章于 2024-09-14 11:27:21 发布

阅读量885

点赞数

文章标签： dojo创建模块

本文链接：https://blog.csdn.net/shiyangxu/article/details/81702503

版权

异步模块定义（AMD）格式是Dojo从Dojo 1.7开始采用的模块格式。它提供了许多传统Dojo模块样式的增强功能，包括完全异步操作，真正的程序包可移植性，更好的依赖关系管理以及改进的调试支持。它也是一个社区驱动的标准，这意味着编写到AMD规范的模块可以与任何其他符合AMD的加载器或库一起使用。

1 什么是模块

模块是可由单个引用访问的值。如果要在模块中公开多个数据或函数，则它们必须是表示模块的单个对象的属性。使用模块对模块化编码更有意义，将代码拆分为逻辑子集以处理特定功能。

2 创建模块

使用AMD，可以通过注册到加载程序的方式来创建模块。加载器就是处理定义和加载模块背后逻辑的代码。加载器定义了与之交互的函数：require和define。
全局函数define中使用加载器注册模块。

2.1 语法

define函数接受以下参数：
moduleId（可选，默认=未定义）：模块标识符。此参数主要是早期AMD加载器的历史工件或支持AMD之前的Dojo，不应提供。
dependencies（optional，default = []）：模块标识符的数组，它们是模块的依赖项。如果已指定，将在评估模块之前解析这些模块，并将它们作为参数按顺序传递给工厂函数。
factory：模块的值，或“factory”函数返回值

2.2 示例

define(function(){
    var privateValue = 0;
    return {
        increment: function(){
            privateValue++;
        },

        decrement: function(){
            privateValue--;
        },

        getValue: function(){
            return privateValue;
        }
    };
});

此代码使用闭包来创建外部代码无法直接访问的私有值，但可以通过作为模块值返回的对象上提供的方法进行检查和操作。

定义的模块是对对象的引用，而不是构造函数 - 这意味着加载此模块的每一段代码都将获得对完全相同对象的引用。通常，模块返回构造函数，但在某些情况下，返回单个对象是合适的。

3 配置加载程序

要利用AMD，首先需要显式配置加载程序以异步方式运行。这是通过将async配置属性设置为true：

<script data-dojo-config="async: true" src="dojo1.13.0/dojo.js"></script>

而我们必须在加载dojo.js文件之前设置dojoConfig变量。

<script>
    var dojoConfig = {
        baseUrl: "",
        tlmSiblingOfDojo: false,
        packages: [
            { name: "dojo", location: "dojo1.13.0/dojo" },
            { name: "dijit", location: "dojo1.13.0/dijit" },
            { name: "dojox", location: "dojo1.13.0/dojox" },
            { name: "resources", location: "dojo1.13.0/resources"}
        ]
    };
</script>
<script src="dojo1.13.0/dojo/dojo.js" data-dojo-config="async: true"></script>

baseUrl：定义加载包的基本URL，默认dojo.js文件夹的路径。
tlmSiblingOfDojo：默认情况下，加载程序期望在文件夹中找到模块，这些模块是加载加载器的文件夹的兄弟文件夹（即存放dojo.js文件文件夹的兄弟文件夹）。默认值为true。
packages：包配置对象的数组。在最基础的层面上，包只是模块的集合。dojo，dijit和dojox都是包的例子。然而，与目录中的简单模块集合不同，软件包充满了一些额外的功能，这些功能显着增强了模块的可移植性和易用性。便携式包是独立的，也可以通过cpm等工具安装。包配置允许您指定：

name：包的名称。这应该与包含模块的文件夹的名称匹配。
location：包裹的位置; 可以是其路径相对baseUrl 或绝对路径。
main(可选，默认= main.js)：用于在有人试图要求包本身时加载的正确模块。

4 加载模块

要加载模块，首先需要某种方法来识别它。与其他编程语言的模块/包系统类似，AMD模块由其路径和文件名标识。
将前面的代码保存在resource文件夹下，名字为counter.js。文件目录结构如下：

/
    index.html
    /dojo1.13.0/
        /dijit/
        /dojo/
        /dojox/
        /themes/
        /resources/
            counter.js

使用require([ "resources/counter"])语句来加载模块。

require函数接受以下参数：
configuration(optional,default=undefined)：具有加载程序配置选项的对象 - 这允许您在运行时重新配置加载程序。
dependencies(optional,default = [])：模块标识符数组。如果指定，则在评估代码之前将解析这些模块。它们将按列出的顺序加载，并作为参数传递给回调函数，也按顺序传递。
callback：包含要运行的代码的函数，该代码取决于中的模块dependencies。您需要将代码包装在回调函数中，以支持异步加载并能够使用对模块的非全局引用。

index页面如下所示：

<html>
    <body>
        <script>
            var dojoConfig = {
                baseUrl: "",
                tlmSiblingOfDojo: false,
                packages: [
                    { name: "dojo", location: "dojo1.13.0/dojo" },
                    { name: "dijit", location: "dojo1.13.0/dijit" },
                    { name: "dojox", location: "dojo1.13.0/dojox" },
                    { name: "resources", location: "dojo1.13.0/resources"}
                ]
            };
     </script>
        <script src="dojo1.13.0/dojo/dojo.js" data-dojo-config="async: true"></script>
        <script>
            require([
                "resources/counter"
            ], function(counter){
                log(counter.getValue());
                counter.increment();
                log(counter.getValue());
                counter.decrement();
                log(counter.getValue());
            });
        </script>
    </body>
</html>

如果需要对模块的引用，则需要提供回调函数。加载器将确保模块已加载，一旦加载，它将调用回调函数将任何模块作为参数传递给它。与任何其他函数一样，可以随意命名参数：不要求参数名称与模块名称有任何关系。这就是说，使用类似名称的模块名称很好的做法。本例中require中的第二个参数function即是回调函数，该回调函数中的参数为counter，取了和模块相同的名字。

5 模块加载模块

当应用程序由组织良好的模块组成时，模块之间自然存在很多依赖关系。define函数可以自动加载模块的依赖项，我们只需要将依赖项列表传递到define模块值之前。例如：

define([
    "dojo/_base/declare",
    "dojo/dom",
    "app/dateFormatter"
], function(declare, dom, dateFormatter){
    return declare(null, {
        showDate: function(id, date){
            dom.byId(id).innerHTML = dateFormatter.format(date);
        }
    });
});