arcgis api dojo模块的理解和调用自定义模块

51 阅读 0 评论 34 点赞

我是靠谱客的博主曾经羊，最近开发中收集的这篇文章主要介绍arcgis api dojo模块的理解和调用自定义模块，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

转载出处：https://blog.csdn.net/LoveCarpenter/article/details/53979717

1.引言

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

2.dojo模块化

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

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

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

------2.1 定义模块

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

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

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

  define(function() {
            //这个地方可以写一些准备的工作
            return{ //return是定义的模块的返回值
                 color:"black",
                 size:"unisize"
         }
     });

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

define(["dojo/dom"],function(dom){
    return{
        change:function(){
            
            dom.byId(id,text).innerHTML=text;
        }
        
    }
});

2.1.4 将模块定位为函数（moudle4.js）

define(function() {
              return function(text) {
                     //弹出一下text文本 alert(text);
                     }
        }
);

3.调用模块

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

js文件夹

moudle1.js

moudel2.js

moudel3.js

moudle4.js

index.html

如上是各个文件相对路径

我们将js文件夹看成一个模块，那么我们应该告诉dojo框架我们的js文件在什么位置。在上一篇博客中我们知道可以通过dojoConfig去添加我们自己的配置。

用来告诉dojo框架我们自定义的模块所处的位置用的是 dojoConfig的packages属性。如下：

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

调用自定义的模块：

此时 dojo框架已经能够找到自定义的模块位置的了，接下来，如果调用呢？引用模块用的是require

下面的代码便是引用我们的模块,首先设置一个div（用于模块三）

<div id="test1"></div>
require(["js/moudle1","js/moudle2","js/moudle3","js/moudle4"], function(moudle1,moudle2,moudle3,moudle4) {
            alert(moudle1.color)
            alert(moudle2.color)
            moudle3.change("test1","文本改变了moudle3")
            moudle4("aaaa")
        });

4. 解释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"]//首先获取projectName
                config["projectName"]="修改了test";//修改了项目名字
                return  name;
            }
        }
    }
);

moudle2：

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设置全局属性

5.总结

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