学习要点:
1、dojo框架;
2、dojo框架下类的定义与继承;
3、dojo资源:
http://dojotoolkit.org/api/
http://dojotoolkit.org/download/
http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/
最近在研究arcgis js api,但好像不可避免要遇到dojo框架的学习与使用,因为arcgis js api就是基于dojo开发的。
思路:1、本地部署好arcgis js api(过程略);2、dojo简单实例代码;3、dojo类的定义与继续;
一、官网实例
实例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
这个实例中引用了dojo CDN官网api,试了下,并不好用,还是换成自己本地部署的api好使;
实例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
输出结果为:Hello Dojo!
实例3,类的定义与调用。定义一个js类,然后在html页面中调用
define([
// The dojo/dom module is required by this module, so it goes
// in this list of dependencies.
'dojo/dom'
], function(dom){
// Once all modules in the dependency list have loaded, this
// function is called to define the demo/myModule module.
//
// The dojo/dom module is passed as the first argument to this
// function; additional modules in the dependency list would be
// passed in as subsequent arguments.
var oldText = {};
// This returned object becomes the defined value of this module
return {
setText: function (id, text) {
var node = dom.byId(id);
oldText[id] = node.innerHTML;
node.innerHTML = text;
},
restoreText: function (id) {
var node = dom.byId(id);
node.innerHTML = oldText[id];
delete oldText[id];
}
};
});
hellodojo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- configure Dojo -->
<script>
// Instead of using data-dojo-config, we're creating a dojoConfig
// object *before* we load dojo.js; they're functionally identical,
// it's just easier to read this approach with a larger configuration.
var dojoConfig = {
async: true,
// This code registers the correct location of the "demo"
// package so we can load Dojo from the CDN whilst still
// being able to load local modules
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require([
'demo/myModule'
], function (myModule) {
myModule.setText('greeting', 'Hello Dojo!');
setTimeout(function () {
myModule.restoreText('greeting');
}, 3000);
});
</script>
</body>
</html>
在上面这个实例中,实现了js类的定义与调用,但在html页面中有个段代码需要注意,没有这段代码无法实现调用
<script>
// Instead of using data-dojo-config, we're creating a dojoConfig
// object *before* we load dojo.js; they're functionally identical,
// it's just easier to read this approach with a larger configuration.
var dojoConfig = {
async: true,
// This code registers the correct location of the "demo"
// package so we can load Dojo from the CDN whilst still
// being able to load local modules
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
二、类的定义与继承(http://dojotoolkit.org/reference-guide/1.10/dojo/_base/declare.html)实例请参见官网
cacheMap.js
/**
* Created by neil on 2015/8/27.
*/
define(["dojo/_base/declare",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileInfo"], function (declare, ArcGISTiledMapServiceLayer, SpatialReference, Extent, TileInfo) {
return declare(ArcGISTiledMapServiceLayer, {
constructor: function (baseUrl) {
this.baseUrl=baseUrl;
}
});
});
dojo5.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>这是测试瓦片地图的一个类</title>
<script>
var dojoConfig = {
async: true,
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
<script src="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/init.js"></script>
<script>
require(["demo/cacheMap"], function (cacheMap) {
var googleMapLayer = new cacheMap("baseUrl");
greeting.innerHTML=googleMapLayer.baseUrl;
});
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>
未完