道場AMD模塊改變的「本」

Question

我真的很困惑，一些行爲，我看到在努力學習道場的AMD樣式的引用。當我實例化我的模塊/對象時，「this」指向我的構造函數中的對象。我調用了一個內部函數，並且該內部函數中的「this」引用了Window對象。所以，當我到達this.attachMapEventHandlers我得到一個「對象[對象全局]有沒有方法'attachMapEventHandlers」錯誤。我究竟做錯了什麼？更新：我發現lang.hitch，這似乎表明，異步性質是什麼絆倒了我，但我對如何實現解決方案相混淆。

我的劇本里的index.html：

require(["javascript/layout", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/layout/AccordionContainer", 
     "dojo/dom", "dojo/dom-attr", "dijit/Toolbar", "dijit/form/Button", "dijit/Dialog","dijit/ProgressBar", "dojo/domReady!"], 
     function (layout, dom, domAttr) { 
      mapControl = new layout(); 

layout.js：

define(["dojo/_base/declare"], function(declare) { 
return declare(null, { 
    action:"pan", 
    activeMeasureTool:"", 
    aerialLayer:"", 
    legendLayers:"", 
    loadedServices:"", 
    popup:"", 
    resizeId:0, 
    constructor: function() { 
     this.init(); 
    }, 
    init: function() { 
     require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], 
      function(Map, config, SpatialReference, Extent) { 
      //custom map requires a proxy to function properly. 
      esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php"; 

      var spatRef = new SpatialReference(2276); 

      var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef); 
      var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef); 

      map = new Map("map", {extent: startExtent, isZoomSlider:true, logo:false, sliderStyle:"large"}); 
      this.attachMapEventHandlers(); 
      this.createLayers(); 
      this.handleLayerVisibilityChange(); 
     }); 
    }, 

Answer 1

可以在另一個變量把 '這個'，像_this，並在內部功能使用_this，像

init: function() { 
     var _this= this; 
     require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], 
      function(Map, config, SpatialReference, Extent) { 
      ... 
      _this.attachMapEventHandlers(); 
      _this.createLayers(); 
      _this.handleLayerVisibilityChange(); 

Answer 2

有幾件事你可以做，以解決這個問題。

首先，你可以添加你需要依賴於define陣列，這樣你就不需要做異步要求類的構造函數中。

這將是這樣的：

define(["dojo/_base/declare", "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], function (declare, Map, config, SpatialReference, Extent) { 
    return declare(null, { 
    action: "pan", 
    activeMeasureTool: "", 
    aerialLayer: "", 
    legendLayers: "", 
    loadedServices: "", 
    popup: "", 
    resizeId: 0, 
    constructor: function() { 
     this.init(); 
    }, 
    init: function() { 
     //custom map requires a proxy to function properly. 
     esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php"; 

     var spatRef = new SpatialReference(2276); 

     var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef); 
     var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef); 

     map = new Map("map", { 
     extent: startExtent, 
     isZoomSlider: true, 
     logo: false, 
     sliderStyle: "large" 
     }); 
     this.attachMapEventHandlers(); 
     this.createLayers(); 
     this.handleLayerVisibilityChange(); 
    } 
    }); 
}); 

，或者你可以做需要

init: function() { 
    var that = this; 
    require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], 
    function (Map, config, SpatialReference, Extent) { 
     //custom map requires a proxy to function properly. 
     esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php"; 

     var spatRef = new SpatialReference(2276); 

     var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef); 
     var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef); 

     map = new Map("map", { 
     extent: startExtent, 
     isZoomSlider: true, 
     logo: false, 
     sliderStyle: "large" 
     }); 
     that.attachMapEventHandlers(); 
     that.createLayers(); 
     that.handleLayerVisibilityChange(); 
    }); 
}, 

編輯時的this當前範圍保存在封閉的東西：你的第三個選擇是使用郎.hitch，它可以讓你在回調函數指定的this範圍。要使用它，你會增加dojo/_base/lang你定義（）依賴列表，幷包裹需要回調lang.hitch(this, function(){});

define(["dojo/_base/declare", "dojo/_base/lang"], function (declare, lang) { 
    return declare(null, { 
    //... 
    init: function() { 
     require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], 
     lang.hitch(this, function (Map, config, SpatialReference, Extent) { 
      //this now refers to the instance of the class 
     })); 
    } 

    }); 
}); 

我會強烈建議使用第一個選項去，因爲它是與整個使用AMD的一致（聲明模塊執行之前需要什麼依賴關係，而不是實時加載它）。