Javascript 在dojo.ready中调用函数

Javascript 在dojo.ready中调用函数,javascript,dojo,arcgis-server,Javascript,Dojo,Arcgis Server,我的ArcGIS Javascript代码如下: <script type="text/javascript"> require(["dojo/ready", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dijit/registry",

我的ArcGIS Javascript代码如下:

<script type="text/javascript">
      require(["dojo/ready",
      "dgrid/OnDemandGrid",
      "dgrid/Selection",
      "dojo/store/Memory", 
      "dojo/_base/array",
      "dojo/dom-style",
      "dijit/registry",
      "esri/map", 
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/layers/FeatureLayer",
      "dojo/dom-class",
      "dojo/dom-construct",
      "dojo/on", 
      "esri/InfoTemplate",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "dojo/_base/declare", 
      "dojo/number", 
      "dojo/on",
      "dojox/charting/Chart",
      "esri/renderers/UniqueValueRenderer",
      "dojo/parser",
      "dojo/_base/Color", 
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"
      ], function (
        ready,
        Grid, 
        Selection, 
        Memory, 
        array,
        domStyle,
        registry,
        Map,
        Popup,
        PopupTemplate, 
        FeatureLayer,
        domClass,
        domConstruct,
        on, 
        InfoTemplate,
        SimpleLineSymbol,
        SimpleFillSymbol,
        QueryTask,
        Query,
        declare, 
        dojoNum, 
        on,
        Chart, 
        UniqueValueRenderer,
        parser
      ) {
        ready(function() {

          parser.parse();

          var popup = Popup({
            titleInBody: false
          },domConstruct.create("div"));

          // create the dgrid
          window.grid = new (declare([Grid, Selection]))({
            // use Infinity so that all data is available in the grid
            bufferRows: Infinity,
            columns: {
              "FID": "FID",
              "PROV": "PROV"
            }
          }, "grid");
          // add a click listener on the ID column
          grid.on(".field-id:click", selectState);

          var initialExtent = new esri.geometry.Extent({"xmin":89.971,"ymin":-12.472,"xmax":144.301,"ymax":9.511,"spatialReference":{"wkid":4326}});
          map = new esri.Map("map", { extent: initialExtent,infoWindow: popup});

          //var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
          var basemap2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer",{"opacity":0.4});
          map.addLayer(basemap2);
          //map.addLayer(basemap);


          domClass.add(window.map.infoWindow.domNode, "myTheme");
            var template = new PopupTemplate({
            title: "Data Luas Lahan Sawah {PROV}",
            description: "of starters from {PROV} finished",
          });

          window.statesUrl = "http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer/8";
          window.outFields = ["FID","PROV"];

          var fl = new FeatureLayer(window.statesUrl, {
            id: "stat",
            mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
            infoTemplate:template,
            outFields: window.outFields
          });

          fl.on("load", function() {
            fl.maxScale = 0; // show the states layer at all scales
            fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
          });

          fl.on("click", selectGrid);

          // change cursor to indicate features are click-able
          fl.on("mouse-over", function() {
            map.setMapCursor("pointer");
          });
          fl.on("mouse-out", function() {
            map.setMapCursor("default");
          });


          map.addLayer(fl);

          map.on("load", 
            function addFeatureLayer() {
              var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
              defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

              //create renderer
              var renderer = new UniqueValueRenderer(defaultSymbol, "PROV");

              //add symbol for each possible value
              renderer.addValue("Banten", new SimpleFillSymbol().setColor("#00FA1D"));
              renderer.addValue("Dki Jakarta", new SimpleFillSymbol().setColor("#FA0000"));
              renderer.addValue("Jawa Barat", new SimpleFillSymbol().setColor("#FAFA00"));
              renderer.addValue("Jawa Tengah", new SimpleFillSymbol().setColor("#00FA1D"));
              renderer.addValue("Daerah Istimewa Yogyakarta", new SimpleFillSymbol().setColor("#FAFA00"));
              renderer.addValue("Jawa Timur", new SimpleFillSymbol().setColor("#FAFA00"));
              var template = new PopupTemplate({
                title: "Data {PROV}",
                description: "Data Luas Lahan Sawah {PROV}",
              });
              var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer/8", {
                mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
                infoTemplate:template,
                outFields: window.outFields
              });

              featureLayer.setRenderer(renderer);
              map.addLayer(featureLayer);
            } ,
            function( evt ){
              // show the border container now that the dijits 
              // are rendered and the map has loaded
              domStyle.set(registry.byId("container").domNode, "visibility", "visible");
              populateGrid(Memory); // pass a reference to the MemoryStore constructor
          });

          function populateGrid(Memory) {
            var qt = new QueryTask(window.statesUrl);
            var query = new Query();
            query.where = "1=1";
            query.returnGeometry = false;
            query.outFields = window.outFields;
            qt.execute(query, function(results) {
              var data = array.map(results.features, function(feature) {
                return {
                  // property names used here match those used when creating the dgrid
                  "FID": feature.attributes[window.outFields[0]],
                  "PROV": feature.attributes[window.outFields[1]]
                }
              });
              var memStore = new Memory({ data: data });
              window.grid.set("store", memStore);
            });
          }
          // fires when a row in the dgrid is clicked
          function selectState(e) {
            // select the feature
            var fl = map.getLayer("stat");
            var query = new Query();
            query.objectIds = [parseInt(e.target.innerHTML)];
            fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
              if ( result.length ) {
                // re-center the map to the selected feature
                window.map.centerAt(result[0].geometry.getExtent().getCenter());
              } else {
                console.log("Feature Layer query returned no features... ", result);
              }
            });
          }

          // fires when a feature on the map is clicked
          function selectGrid(e) {
            var profinsi = e.graphic.attributes.PROV;
            var id = e.graphic.attributes.FID;
            // select the feature that was clicked
            var query = new Query();
            query.objectIds = [id];
            var states = map.getLayer("stat");
            states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
            // select the corresponding row in the grid
            // and make sure it is in view
            grid.clearSelection();
            grid.select(id);
          }

          function test(){
            alert("alert");
          }
        });
    });
</script>
我想在dojo.ready函数中调用函数。例如,我想用onclick调用函数测试,如下所示:

<input type="submit" value="Submit" onclick="test();">
但仍然不起作用。
有人能帮我解释一下如何在dojo.ready中调用函数吗?

这是因为在文档中编写事件处理程序是一种不好的做法。如果在函数中添加函数,它们的作用域就是该函数,也就是说,它们只能从ready函数中访问,而不能从HTML页面的DOM=中访问

正常情况下:按钮看不到功能测试

您可以通过两种方式解决此问题:

第一种方法是通过将测试函数移出ready回调或用以下方法替换该函数来全局确定测试函数的作用域:

test = function() {
    alert("alert");
};
因为您没有将var放在测试变量前面,这意味着它现在是全局范围的,这意味着可以从DOM访问它。然而,我不建议这样做,这被认为是一种不好的做法。通过谷歌搜索为什么全局变量不好javascript,您可以大致了解它不好的原因

第二种可能是通过使用dojo/on模块或dojo/query模块将事件声明本身移动到就绪范围中,例如:

require(["dojo/ready", "dojo/query"], function(ready, query) {
    ready(function() {
        query("input[type=\"submit\"]").on("click", test);

        function test() {
            alert("test");
        }
    });
});
和一个JSFiddle:


这可以被认为是一种更好的做法,因为您不使用全局名称空间,并且可以定义事件处理程序。

这是因为在文档中编写事件处理程序是一种不好的做法。如果在函数中添加函数,它们的作用域就是该函数,也就是说,它们只能从ready函数中访问,而不能从HTML页面的DOM=中访问

正常情况下:按钮看不到功能测试

您可以通过两种方式解决此问题:

第一种方法是通过将测试函数移出ready回调或用以下方法替换该函数来全局确定测试函数的作用域:

test = function() {
    alert("alert");
};
因为您没有将var放在测试变量前面,这意味着它现在是全局范围的,这意味着可以从DOM访问它。然而,我不建议这样做,这被认为是一种不好的做法。通过谷歌搜索为什么全局变量不好javascript,您可以大致了解它不好的原因

第二种可能是通过使用dojo/on模块或dojo/query模块将事件声明本身移动到就绪范围中,例如:

require(["dojo/ready", "dojo/query"], function(ready, query) {
    ready(function() {
        query("input[type=\"submit\"]").on("click", test);

        function test() {
            alert("test");
        }
    });
});
和一个JSFiddle:


这可以被认为是一种更好的做法,因为您没有使用全局名称空间,可以定义事件处理程序。

您是否尝试过使用dojo小部件定义输入字段。或者,我认为您需要在dojo.ready函数中注册事件处理程序。您是否尝试过使用dojo小部件定义输入字段。或者,我认为您需要在dojo.ready函数中注册事件处理程序。嘿,它成功了。谢谢您的回答和解释。Dimitri:Dhey,它成功了。谢谢您的回答和解释