- 引言
- Dojo之模块化
- 1定义模块
- 2调用模块
- 3解释dojoConfig的全局变量
- 总结
- 1本篇博客代码下载地址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}}}
);
- 将模块定义为函数（moudle4.js）
define(function() {return function(text) {//弹出一下text文本alert(text);}}
);
2.2调用模块
在前面我们定义了四个模块，那么我们在我们的程序中应该如何引用呢？如何让dojo去找到我们的js文件呢？首先我们先看一下我们的项目路径：
jsmoudle1.jsmoudel2.jsmoudel3.jsmoudle4.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","js/moudle4"], function(moudle1,moudle2,moudle3,moudle4) {alert(moudle1.color)alert(moudle2.color)moudle3.change("test1","文本改变了moudle3")moudle4("aaaa")});
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,我们可以利用此模块定义类，关于此模块的使用，主要在下一篇博客中介绍。
