不知道大家有沒有這種體驗(yàn)雕薪，我們開始學(xué)web開發(fā)的時(shí)候昧诱，會(huì)把HTML、JavaScript所袁、CSS代碼都堆疊在一個(gè)HTML文件中盏档，慢慢地，隨著代碼量的增多燥爷，不同的代碼堆疊在一起顯得很亂蜈亩，我們開始把html、css前翎、js獨(dú)立到不同的文件中稚配。隨著JS代碼的數(shù)量不斷增長(zhǎng)，JS文件的數(shù)量也一樣港华，管理和引用js代碼也變得復(fù)雜起來道川，而解決這種問題一個(gè)有效的方法就是采用“面向?qū)ο螅∣O）”模式。通過使用面向?qū)ο蟮娘L(fēng)格，可以避免應(yīng)用程序中代碼混亂冒萄，并且可以增加代碼的復(fù)用性臊岸，簡(jiǎn)化應(yīng)用程序后期維護(hù)，可以使錯(cuò)誤更快地修復(fù)尊流，并在更短的時(shí)間內(nèi)實(shí)現(xiàn)新功能帅戒。
ArcGIS API中的模塊
Dojo Toolkit是一個(gè)開源的模塊化JavaScript庫（或更具體地說是JavaScript工具包），Dojo的代碼被劃分為邏輯單元稱之為模塊, 這有點(diǎn)類似于Java中的package崖技，模塊中可以包含類和簡(jiǎn)單方法逻住。而ArcGIS API for JavaScript就是建立在Dojo的基礎(chǔ)之上，然后增加了自己的模塊响疚。
我們平常使用ArcGIS API for JavaScript開發(fā)時(shí)鄙信，首先得require需要用到的類，比如我們要?jiǎng)?chuàng)建一副地圖忿晕，首先得引用map類：
require(["esri/map"], function(Map) { /* code goes here */ });
如果你在本地部署了ArcGIS API就能看到在esri文件夾下有個(gè)map.js文件装诡，我們需要的Map類也就是在這個(gè)模塊中定義的。
我們可以打開map.js的源碼践盼，網(wǎng)上隨便找個(gè)工具格式化下鸦采，折疊declaredClass: "esri.Map"之后的代碼：
可以發(fā)現(xiàn)，Map對(duì)象的方法和屬性都在其中定義咕幻。
自己寫一個(gè)模塊
1渔伯、使用define()來加載模塊所需的依賴，具體用法可以參考文檔肄程。
declare用于創(chuàng)建一個(gè)可以實(shí)例化的類,所以必須引用
define(["dojo/_base/declare"],function(declare){
});
2锣吼、用declare(className,superclass,props)建一個(gè)類
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| className | String | 構(gòu)造函數(shù)的可選名稱。它將被用作創(chuàng)建的構(gòu)造函數(shù)的全局名稱蓝厌。 |
| superclass | Function or Function[] | 可以為空玄叠，函數(shù)或函數(shù)數(shù)組。這個(gè)參數(shù)指定一個(gè)繼承表（最左邊一個(gè)是最原始的父類） |
| props | Objectid | 定義類屬性和方法的對(duì)象拓提。通過使其成為一個(gè)名為“constructor”的屬性來定義一個(gè)構(gòu)造函數(shù)读恃。 |
下面這個(gè)示例定義一個(gè)Geocoder.js模塊，通過創(chuàng)建一個(gè)類Geocoder代态，調(diào)用百度地址逆編碼API寺惫，將Point轉(zhuǎn)為地址信息。
define(["dojo/_base/declare","dojo/request/script","dojo/json","dojo/dom"],function(declare,script,JSON,dom){
return declare(null, {
ak: null,
constructor: function(){
this.ak="WtSZiDjE0KEgfSMsxGY7pxng";
},
getLocation: function(opt){
var point=opt.point;
var domID=opt.domId;
var detailed=("detailed" in opt)?opt.detailed:false; //默認(rèn)為false蹦疑，不顯示詳細(xì)地址信息
var result={};
script.get("http://api.map.baidu.com/geocoder/v2/?coordtype=wgs84ll&location="+opt.point.getLatitude()+","+opt.point.getLongitude()+"&output=json&pois=1&ak="+this.ak, {
jsonp: "callback"
}).then(function(data){
result["description"]=data.result.sematic_description;
result["address"]=data.result.formatted_address;
console.log(result)
if(detailed){
dom.byId(opt.domId).innerHTML=result.address+","+result.description;
}else{
dom.byId(opt.domId).innerHTML=result.description;
}
})
}
})
})
-
constructor：構(gòu)造函數(shù)西雀，給ak屬性賦值 -
getLocation：獲取地址信息方法，其中opt參數(shù)為一個(gè)Objectid
opt={
point: //Point對(duì)象必尼，逆編碼的點(diǎn)
domID: //將地址信息插入的DOM的ID
detailed： //是否詳細(xì)輸出地址信息（true||false）
}
使用自己的模塊
在ArcGIS API 文件目錄（arcgis_js_api/library/3.20/3.20/）中新建一個(gè)文件夾為“gisxxcom”蒋搜，再將自己寫的模塊Geocoder.js放入其中篡撵。
項(xiàng)目中使用自己的模塊：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Simple Map</title>
<link rel="stylesheet" >
<style>html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ width: 75%; height: 100%; float: left; } #result{ width: 25%; height: 100%; float: left; }</style>
<script src="http://115.28.149.107/arcgis_js_api/library/3.20/3.20/init.js"></script>
</head>
<body>
<div id="map"></div>
<div id="result">
<h4 id="description"></h4>
</div>
</body>
<script>
require(["esri/map", "esri/geometry/Point", "gisxxcom/Geocoder", "dojo/domReady!"],
function(Map, Point, Geocoder) {
var map = new Map("map", {
basemap: "osm",
center: [116.026, 28.6826],
zoom: "15"
});
var geocoder = new Geocoder();
map.on("click",
function(e) {
console.log(e.mapPoint.getLongitude() + "," + e.mapPoint.getLatitude());
geocoder.getLocation({
point: e.mapPoint,
domId: "description"
});
});
});
</script>
</html>
效果預(yù)覽：
本文首發(fā)微信公眾號(hào) ：GISXXCOM
