學習筆記--dojo define/declare使用和esri.dijit.Bookmarks的簡單改寫

時間 2019-12-08

標籤學習筆記 dojo define declare 使用 esri.dijit.bookmarks esri dijit bookmarks 簡單改寫欄目 Dojo 简体版

原文原文鏈接

寫在前面

地圖服務中，經常會使用到書籤功能，來記錄並定位興趣點或興趣區域。arcgis api for javascript提供了一個書籤小功能，即esri.dijit.Bookmarks。在使用的過程當中，發現這個書籤功能僅實現了頁面緩存興趣點或興趣範圍的增刪改功能，然而，項目中應用時，每每須要鏈接到數據庫，將前臺興趣點或興趣範圍的增刪改查功能與後臺數據進行交換。在實現這個功能的過程當中，也學習了一波dojo中define/declare的使用方法。本文在dojo使用方法部分的介紹，參照學習了官網文檔，及《一個de兩種意思——談談Dojo define 和declare的區別》，感謝做者。javascript

dojo define/declare使用

define 用於定義一個模塊（module），定義以後，這個模塊能夠被require引用，至關於自定義組件。define的第一個參數引入須要用到的其餘模塊，使用數組對象。第二個參數描述當前自定義的模塊具體功能，而且給第一個參數中引用的模塊分別起一個名字，使用函數對象。
declare 做爲在define 第二個參數function中的return對象，包含三個部分：
- 第一個參數是自定義類名，使用中不定義；
- 第二參數是superclasses超類，是被declare中繼承的類，能夠爲null，能夠爲一個，也能夠爲數組對象，當有多個超類的時候，第一個被繼承類默認爲declare類的base prototype(基礎原型類，我的翻譯，用於理解)，其餘的類認爲是mixins（混入類），大概是第一個使用到的超類是最爲重要的意思；
- 第三個參數是方法對象，其中有三個比較重要的概念：
  - 一、constructor method 構造方法
  - 二、inheritance 繼承的思想
  - 三、this.inherited ：使用過程當中，一般寫法是 this.inherited(arguments); 做用是直接在declare的方法中調用第一個超類中的同名方法，但不能再constructor中使用。

以上是純屬我的理解，可能出現不正確不許確的地方，主要仍是要多看dojo官方文檔，在以後的學習中，可能須要修正html

esri.dijit.Bookmarks的簡單改寫

0、後臺準備java
- 一張數據表
- 接口：增、刪、改、查
一、js文件主體jquery

define(["dojo/_base/declare", 
    "esri/map",
    "dojo/dom",
    ...],
    function (declare, Map, dom,..., template) {
        return declare([_BaseWidget, _WidgetsInTemplateMixin], {
            templateString: template,//使用自定義的內容
            startup: function () {
                console.log("BookMarkWidget::startup");
                this.inherited(arguments);              
            },
            // ... 自定義方法
            });
    });
複製代碼

二、書籤數據查詢方法

getBookmarkInfo: function () {
    var bookmarkInfo = null;
    xhr(getBookmarkUrl , {
        handleAs: "json",  // 返回json格式的data
        method: "get",
        timeout: 3000,
        sync: true,
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function(data){
        if (data.success === 1) {
            bookmarkInfo = data.data;
        }
    }, function(err){
    }, function(evt){
    });
    return bookmarkInfo;
}
複製代碼

三、書籤刪除方法

deleteBookmarkHandler: function (event) {
    if (!window.confirm("肯定刪除嗎？")) {
        return;
    }
    var _self = this; //重要步驟
    xhr(deleteBookmarkUrl, {
        data: dojo.toJson(queryData),
        method: "post",
        timeout: 3000,
        handleAs: "json",
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function(data){
        if(data.success === 1) {
            // 刪除內存中的書籤---esri.dijit.Bookmarks自帶方法
            _self.bookmarks.removeBookmark(name);
            // ... 設定一個容器bookmarkData，用於維護數據
        }
    }, function(err){
    }, function(evt){
    });     
}
複製代碼

四、書籤增長/編輯方法

editBookmarkHandler: function (event) {
    var _self = this;
    // 編輯書籤部分
    if (bookmarksLenght == _self.bookmarkData.length) {
        // ... 對比獲取當前被修改的書籤的ID---用於queryData構造
        xhr(alterBookmarkUrl, {
            data: dojo.toJson(queryData),
            handleAs: "json",
            method: "post",
            timeout: 3000,
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data){
            if(data.success === 1) {
                // 維護bookmarkData數據
            }
        }, function(err){
        }, function(evt){
        });
    } 
    // 添加書籤部分
    else if (bookmarksLenght > _self.bookmarkData.length) {
        // 添加同名書籤時，阻止書籤添加，並刪除內存中添加的書籤
        for (var i = 0; i < _self.bookmarkData.length; i++) {                    
            if (currentName == _self.bookmarkData[i].name ) {
                messageAlert(0, "不可添加同名書籤!");
                var equalNodeId = "dojoUnique" + bookmarksLenght;
                domConstruct.destroy(equalNodeId);
                return;
            }
        }
        xhr(addBookmarkUrl, {
            data: dojo.toJson(queryData),
            handleAs: "json",
            method: "post",
            timeout: 3000,
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data){
            if(data.success === 1) {
                // 隱藏原生刪除按鈕，添加自定義刪除按鈕
                var image_bookmarkRemove = query(".esriBookmarkRemoveImage")[bookmarksLenght - 1];
                var removeButton = domConstruct.toDom("<button class = 'btn_bookmarkRemove' \ title = '移除'\ style = 'width:20px; height:20px;\ background: transparent url(./images/close.gif) no-repeat scroll center center;\ border: 0; float: right;'>\ </button>");
                domConstruct.place(removeButton, image_bookmarkRemove, "after"); 
                query(".esriBookmarkRemoveImage").style({display: "none"});
                // 監聽書籤的刪除操做
                on( query(".btn_bookmarkRemove")[bookmarksLenght - 1], "click", lang.hitch(_self, _self.deleteBookmarkHandler));
                // 維護bookmarkData數據
                _self.bookmarkData = data.data;
            }
        }, function(err){
            _self.bookmarks.removeBookmark(currentName);
        }, function(evt){
        });
    }
複製代碼

五、書籤實例化：以上的三個方法在書籤實例化中使用，或者監聽相關操做後進行調用

setbookmark: function (url) {
    if (this.bookmarks != "YES") {
        return;
    }
    // 實例化書籤
    this.bookmarks = new Bookmarks({
            map: this.map,
            bookmarks: [],
            editable: true
        },
        document.getElementById("bookmarks_div")
    ); 
    this.rootUrl = url;
    // 獲取數據庫中所存在的全部bookmarks數據，for循環進行構造bookmarkItem,並addBookmark
    this.bookmarkData = this.getBookmarkInfo();
    for (var i = 0; i < this.bookmarkData.length; i++) {
        var bookmarkItem = {
            "extent": {
                "spatialReference": {
                    "wkid": this.bookmarkData[i].wkid
                },
                "xmin": this.bookmarkData[i].xmin,
                "ymin": this.bookmarkData[i].ymin,
                "xmax": this.bookmarkData[i].xmax,
                "ymax": this.bookmarkData[i].ymax
            },
            "name": this.bookmarkData[i].name,
            "bookmarkItemId": this.bookmarkData[i].id
        };
        this.bookmarks.addBookmark(bookmarkItem);
        // 隱藏原生刪除按鈕，添加自定義刪除按鈕
        var image_bookmarkRemove = query(".esriBookmarkRemoveImage")[i];
        var removeButton = domConstruct.toDom("<button class = 'btn_bookmarkRemove' \ title = '移除'\ style = 'width:20px; height:20px;\ background: transparent url(./images/close.gif) no-repeat scroll center center;\ border: 0; float: right;'>\ </button>");
        domConstruct.place(removeButton, image_bookmarkRemove, "after"); 
        query(".esriBookmarkRemoveImage").style({display: "none"}); 
    }
    // 監聽書籤的編輯/刪除操做
    on(this.bookmarks, "edit", lang.hitch(this, this.editBookmarkHandler));
    query(".btn_bookmarkRemove").on("click", lang.hitch(this, this.deleteBookmarkHandler));
}
複製代碼