Dojo框架综合开发案例

标签： Dojo 分类： Javascript 创建时间：2020-11-06 00:57:43 更新时间：2025-01-17 10:39:22

概述
偶然翻开百度文库，发现自己还有一个Dojo开发的项目，前端使用Dojo.js,后台使用的是PHP。这是一个14年的项目，现在我连代码都找不到了，可惜了，当时应该上传CSDN的。

关于dojo开发的文章比较少，而且版本也比较老，最近因为项目开发的需要，学习了dojo,感觉挺费劲的。所以把自己的一些心得发出来，供后来者学习，也让大家少走些弯路。先贴一下自己造的界面吧。

这里面用了动画，css,还有php连接的数据库，当然，地图使用的是天地图地

(1) 下面是主文件的程序，用了许多小部件。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>创业指导平台</title>
    <link rel="stylesheet" href="http://localhost/dojo1.10/dijit/themes/claro/claro.css">
<style>
    @import "./widget/css/main.css";
    @import "./widget/css/shortcut.css";
    @import "./widget/css/signup.css";
    @import "./widget/css/friends.css";
    @import "./widget/css/urbanplan.css";
    @import "./widget/css/sidebar.css";
</style>
<script>
    //配置文件
    var dojoConfig = (function(){
        var base = location.href.split("/");
        base.pop();
        base = base.join("/");
        return {
            async: true,
            isDebug: true,
            parseOnLoad:true,
            packages: [
                {
                    name: "widget",
                    location: base + "/widget"
                }
            ]
        };
    })();
</script>
    <script src="http://localhost/dojo1.10/dojo/dojo.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script>
    require([
        "dojo/dom",
        "dojo/on",
        "dojo/dom-style",
        "dojo/fx",
        "widget/js/Shortcut",
        "widget/js/Signup",
        "widget/js/Friends",
         "widget/js/Sidebar",
        "dojo/domReady!"
    ], function(dom,on,DomStyle,fx,Shortcut,Signup,Friends,
                Sidebar
            ) {
        var mainMap;
        var zoom = 12;
        //初始化地图对象
        mainMap=new TMap("mapDiv");
        //设置显示地图的中心点和级别
        mainMap.centerAndZoom(new TLngLat(120.1167564,36.0000991),zoom);
        mainMap.enableHandleMouseScroll();//滚轮缩放
        mainMap.enableInertia();//启用惯性拖拽
        var config = {
            type:"TMAP_NAVIGATION_CONTROL_LARGE",   //缩放平移的显示类型
            anchor:"TMAP_ANCHOR_TOP_RIGHT",          //缩放平移控件显示的位置
            offset:[1300,70],
            showZoomInfo:true                       //是否显示级别提示信息，true表示显示，false表示隐藏。
        };
        //创建缩放平移控件对象
        var control=new TNavigationControl(config);
        //添加缩放平移控件
        mainMap.addControl(control);
        //加载创业伙伴窗口
        var friend=null
        on(dom.byId("friends"),"mousedown",function(){
            if(friend==null){
                friend=new Friends();
                friend.setMap(mainMap);
                friend.placeAt("content");
            }else{
                friend.setMap(mainMap);
            }
        })
        //加载注册栏
        var signup=new Signup();
        signup.setMap(mainMap);
        signup.placeAt("content");
        //加载控件
        var shortcut=new Shortcut();
        shortcut.placeAt("content");
        //加载侧边栏
        var sidebar=new Sidebar();
        sidebar.setMap(mainMap);
        sidebar.placeAt("content");
    });

</script>
</head>
<body class="claro">
<div id="content">
    <div id="miantitle">
        <div id="titleimg">
            <img src="widget/image/main/cloud2.png"/>
            <img  src="./widget/image/main/chuangye.png"/>
            <img src="widget/image/main/cloud.png"/>
        </div>
        <div class="mainmenu">
            <ul id="nav">
                <li id="friends"><a href="#">创业伙伴</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">购买我们</a></li>
            </ul>
        </div>
    </div>
    <div id="mapDiv"></div>
</div>
</body>
</html>

(2) 下面是文件目录：

(3) 下面是Shortcut.html内容

1
2
3
4
5
6
7
8
9
10
11
<div class="shortcut" id="shorccut">
    <div class="shortcutdiv" id="urbanplan" data-dojo-attach-event="onmousedown:_urbanPlan">
        <span>城市规划</span>
    </div>
    <div class="shortcutdiv" id="landPrice" data-dojo-attach-event="onmousedown:_landPrice">
        <span>城市地价</span>
    </div>
    <div class="shortcutdiv" id="business" data-dojo-attach-event="onmousedown:_businessDist">
        <span>商业分布</span>
    </div>
</div>

(4) 下面是shortcut.js内容：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
define([
    "dojo/dom",
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/dom-style",
    "dojo/on",
    "dojo/_base/fx",
    "dojo/query",
    "dojo/text!widget/template/Shortcut.html",
    "./UrbanPlan",
    "dojo/domReady!"
],function(dom,declare, _WidgetBase, _TemplatedMixin,_WidgetsInTemplateMixin,DomStyle,on,fx,query,
          templement,UrbanPlan) {
        return declare([_WidgetBase, _TemplatedMixin,_WidgetsInTemplateMixin], {
            templateString: templement,
            urbanPlanW:null,//城市规划窗口
            postCreate : function() {
                this.inherited(arguments);
            },
            _urbanPlan:function(){
                //变换按钮的样式
                dom.byId("urbanplan").className="shortcutclick";
                dom.byId("business").className="shortcutdiv";
                dom.byId("landPrice").className="shortcutdiv";
                if(this.urbanPlanW==null){
                    this.urbanPlanW=new UrbanPlan();//生成一个城市规划
                    this.urbanPlanW.placeAt("content");
                    this.urbanPlanW.showurbanplan();
                }else{
                    this.urbanPlanW.showurbanplan();
                }

            },
            _landPrice:function(){
                dom.byId("urbanplan").className="shortcutdiv";
                dom.byId("business").className="shortcutdiv";
                dom.byId("landPrice").className="shortcutclick";
            },
            _businessDist:function(){
                dom.byId("urbanplan").className="shortcutdiv";
                dom.byId("business").className="shortcutclick";
                dom.byId("landPrice").className="shortcutdiv";
            }
            });
    }
);

在shortcut.js还引用了一个urbanplan的小部件，不贴了。

**本文已结束，感谢您的观看**
鼓励一下

往期推荐

小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文