（2）Dojo学习之模块化

1.引言

在本篇博客中主要讲解一下如何在dojo中使用模块，如何自定义自己的模块等等，在使用dojo编程的时候，大家一定要转变自己的思想，一定要用面向对象的思想去思考问题。大家如果学过后台语言，那么就应该知道：一个可执行程序肯定只有一个入口。就好比Java中的main函数一样，那么对应到dojo中应该如何去理解呢？大家可以将require函数当作程序的入口，然后我们去定义一系列的模块.所以的模块在require函数中进行整合。可能这样说大家并不是很了解，接下来我们就以实例来说明一下。

2.Dojo之模块化

在AMD规范中使用define方法去定义模块，我们先来看一下define的简单使用：

define([],function(){});

define函数有2个参数，第一个参数是该模块所依赖的其他模块（可选，可以不写），第二个参数回调函数（也是可选的，也可以不写），加载依赖模块成功之后的回调。接下来我们定义一些简单的模块

2.1定义模块

如果一个模块仅含值对，没有任何依赖（moudle1.js）

define({
    color: "black",
    size: "unisize"
});

如果模块没有任何依赖，但是需要一个做准备活动的函数（moudle2.js）

define(function () {
    //在这里可以一些准备工作

    return {
        color: "black",
        size: "unisize"
    }
    //return 是模块的返回值
});

如果模块存在依赖，假设模块依赖需要用到dojo/dom模块（moudle3.js）

//该模块提供了一个方法，可以改变dom元素的innerHTML
define(["dojo/dom"], function(dom) {
        return {
            change: function(id,text) {
                dom.byId(id).innerHTML=text
            }
        }
    }
);

2.2调用模块

在前面我们定义了三个模块，那么我们在我们的程序中应该如何引用呢？如何让dojo去找到我们的js文件呢？首先我们先看一下我们的项目路径：

js
    moudle1.js
    moudel2.js
    moudel3.js
index.html

我们将js文件夹看成一个模块，那么我们应该告诉dojo框架我们的js文件在什么位置，在上一篇博客中我们知道可以通过dojoConfig去添加我们自己的配置，告诉dojo框架自定义模块所处的位置用的是packages属性，如下面所示：

<script>
        var dojoConfig={
            packages: [{
                name: "js",//模块的名字
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js'//模块所处的路径
            }]
        }
    </script>

添加好了配置，我们如何在require引用我们的模块呢？下面的代码便是引用我们的模块,首先设置一个div（用于模块三）

<div id="test1"></div>

require(["js/moudle1","js/moudle2","js/moudle3"], function(moudle1,moudle2,moudle3) {
            alert(moudle1.color)
            alert(moudle2.color)
            moudle3.change("test1","文本改变了moudle3")
        });

2.3解释dojoConfig的全局变量

在上一篇博客中我们说，如果在dojoConfig设置一些我们自定义的属性，那么该属性便是全局的，在整个项目中都可以使用，现在我们来看一看，这句话应该如何理解。
假设我们有一个属性叫做projectName，其中记录的是项目的名字。该名字可能在项目任何地方使用。那么我们应该如何做呢？代码如下

var dojoConfig={
            packages: [{
                name: "js2",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js2'
            }],
            projectName:"test"
        }

我们定义了两个模块moudle1,首先修改了模块的名称，然后返回最初模块的名称

define(["dojo/_base/config"], function(config) {
        return {
            getName: function() {
                var name=config["projectName"]
                config["projectName"]="修改了test";
                return  name;
            }
        }
    }
);

moudle2只返回了当前模块的名称

define(["dojo/_base/config"], function(config) {
        return {
            getName: function() {
                return  config["projectName"];
            }
        }
    }
);

主页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script>
        var dojoConfig={
            packages: [{
                name: "js2",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js2'
            }],
            projectName:"test"
        }
    </script>
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>
        require(["js2/moudle1","js2/moudle2"], function(moudle1, moudle2) {
            alert(moudle1.getName())
            alert(moudle2.getName())
        });
    </script>
</head>
<body class="tundra">
</body>
</html>

运行结果

这里写图片描述

首先弹出test，然后弹出修改了test，因此大家理解刚刚说的那句话了吗？我们可以通过设置dojoConfig设置全局属性。

3.总结

在上面的例子中，我们讲解了如何去定义模块，以及如何去调用模块，不知道大家注意到了没有，在整个程序中我只用了一次require函数，但是用了很多次define函数，也就是说我们定义了很多个模块，但是函数的入口却只有一个。我们从另外一个角度来看。模块的使用非常类似与面向对象中的类中的静态方法。在dojo中，还提供给我们一个模块叫做dojo/_base/declare,我们可以利用此模块定义类，关于此模块的使用，主要在下一篇博客中介绍。