1.引言
在本篇博客中主要讲解一下如何在dojo中使用模块，如何自定义自己的模块等等，在使用dojo编程的时候，大家一定要转变自己的思想，一定要用面向对象的思想去思考问题。大家如果学过后台语言，那么就应该知道：一个可执行程序肯定只有一个入口。就好比Java中的main函数一样，那么对应到dojo中应该如何去理解呢？大家可以将require函数当作程序的入口，然后我们去定义一系列的模块.所以的模块在require函数中进行整合。可能这样说大家并不是很了解，接下来我们就以实例来说明一下。
2.Dojo之模块化
在AMD规范中使用define方法去定义模块，我们先来看一下define的简单使用：
define([],function(){});- 1
- 1
- define函数有2个参数，第一个参数是该模块所依赖的其他模块（可选，可以不写），第二个参数回调函数（也是可选的，也可以不写），加载依赖模块成功之后的回调。接下来我们定义一些简单的模块
2.1定义模块
- 如果一个模块仅含值对，没有任何依赖（moudle1.js）
define({
color: "black",
size: "unisize"
});- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 如果模块没有任何依赖，但是需要一个做准备活动的函数（moudle2.js）
define(function () {
//在这里可以一些准备工作
return {
color: "black",
size: "unisize"
}
//return 是模块的返回值
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 如果模块存在依赖，假设模块依赖需要用到dojo/dom模块（moudle3.js）
//该模块提供了一个方法，可以改变dom元素的innerHTML
define(["dojo/dom"], function(dom) {
return {
change: function(id,text) {
dom.byId(id).innerHTML=text
}
}
}
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2.2调用模块
在前面我们定义了三个模块，那么我们在我们的程序中应该如何引用呢？如何让dojo去找到我们的js文件呢？首先我们先看一下我们的项目路径：
js
moudle1.js
moudel2.js
moudel3.js
index.html- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
我们将js文件夹看成一个模块，那么我们应该告诉dojo框架我们的js文件在什么位置，在上一篇博客中我们知道可以通过dojoConfig去添加我们自己的配置，告诉dojo框架自定义模块所处的位置用的是packages属性，如下面所示：
<script>
var dojoConfig={
packages: [{
name: "js",//模块的名字
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'//模块所处的路径
}]
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
添加好了配置，我们如何在require引用我们的模块呢？下面的代码便是引用我们的模块,首先设置一个div（用于模块三）
<div id="test1"></div>- 1
- 1
require(["js/moudle1","js/moudle2","js/moudle3"], function(moudle1,moudle2,moudle3) {
alert(moudle1.color)
alert(moudle2.color)
moudle3.change("test1","文本改变了moudle3")
});
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
2.3解释dojoConfig的全局变量
在上一篇博客中我们说，如果在dojoConfig设置一些我们自定义的属性，那么该属性便是全局的，在整个项目中都可以使用，现在我们来看一看，这句话应该如何理解。
假设我们有一个属性叫做projectName，其中记录的是项目的名字。该名字可能在项目任何地方使用。那么我们应该如何做呢？代码如下
var dojoConfig={
packages: [{
name: "js2",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js2'
}],
projectName:"test"
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 我们定义了两个模块
moudle1,首先修改了模块的名称，然后返回最初模块的名称
define(["dojo/_base/config"], function(config) {
return {
getName: function() {
var name=config["projectName"]
config["projectName"]="修改了test";
return name;
}
}
}
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- moudle2只返回了当前模块的名称
define(["dojo/_base/config"], function(config) {
return {
getName: function() {
return config["projectName"];
}
}
}
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 主页面
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 运行结果
首先弹出test，然后弹出修改了test，因此大家理解刚刚说的那句话了吗？我们可以通过设置dojoConfig设置全局属性。
3.总结
在上面的例子中，我们讲解了如何去定义模块，以及如何去调用模块，不知道大家注意到了没有，在整个程序中我只用了一次require函数，但是用了很多次define函数，也就是说我们定义了很多个模块，但是函数的入口却只有一个。我们从另外一个角度来看。模块的使用非常类似与面向对象中的类中的静态方法。在dojo中，还提供给我们一个模块叫做dojo/_base/declare,我们可以利用此模块定义类，关于此模块的使用，主要在下一篇博客中介绍。