Как определить модуль и использовать его для разделения файлов js

Question

У меня есть файл HTML, выполняющий задачу запроса на функциональном уровне веб-карты.

Теперь я хочу разделить файл на 3 разных файла: html-файл, файл main.js, который загружает веб-карту, и файл Color-Code.js, который выполняет задачу Query, а остальное. В принципе, html-файл должен вызывать main.js, который в свою очередь должен вызывать Color_Code.js.I пробовал его с require.js ... но я получаю файл Color-Code.js, который не каждый раз обнаруживает ошибку. Я действительно новичок в dojo и arcGIS, так что кто-то может указать, где я ошибаюсь.

Main.js -> require([ 
      "Color-Extent", 
      "dojo/parser", 
      "esri/arcgis/utils", 
      "esri/map", 
      "esri/dijit/Legend", 
      "dojo/domReady!" 
], function (
      ColorExtent, 
      parser, 
      arcgisUtils, 
      Map, 
      Legend 
     ) { 
    parser.parse(); 
    return { 
     createMap: function() { 
      arcgisUtils.createMap("ce88f9dba8d748a4bf3aa8d6c8027d2e ", "map").then(function (response) { 
       var map = response.map; 

       var legend = new Legend({ 
        map: map, 
        layerInfos: (arcgisUtils.getLegendLayers(response)) 
       }, "legendDiv"); 
       legend.startup(); 
      }); 
      return map; 
      ColorExtent.colorCurrentExtent(); 
     } 
    }   
     }); 


Color-Code.js -> 

define([  "Main", 
       "dojo/parser", 
       "esri/arcgis/utils", 
       "esri/map", 
       "esri/dijit/Legend", 
       "esri/tasks/QueryTask", 
       "esri/tasks/query", 
       "esri/symbols/SimpleMarkerSymbol", 
       "esri/symbols/SimpleLineSymbol", 
       "esri/Color", 
       "dojo/_base/json", 
       "dojo/text!./jdata.txt", 
       "esri/geometry/Extent", 
       "dojo/_base/array", 
       "esri/layers/GraphicsLayer", 
       "esri/graphic", 
       "dojo/domReady!" 
    ], function (
       main, 
       parser, 
       arcgisUtils, 
       Map, 
       Legend, 
       QueryTask, 
       Query, 
       SimpleMarkerSymbol, 
       SimpleLineSymbol, 
       Color, 
       json, 
       JData, 
       Extent, 
       array, 
       GraphicsLayer, 
       Graphic 
      ) { 
      function colorCurrentExtent() { 
       parser.parse(); 
       map.on("load", function() { 
        var map = main.createMap(); 
        var queryTask = new QueryTask(featureLayer.url); 
        var query = new Query(); 
        query.outFields = ["OBJECTID"]; 
        query.returnGeometry = true; 
        query.where = "1=1"; 
        queryTask.execute(query, showResults); 
       }) 

       function showResults(featureSet) { 
        var symbol = new SimpleMarkerSymbol(); 
        symbol.setSize(20); 
        var resultFeatures = featureSet.features; 
        var storeobj = dojo.fromJson(JData); 

        map.on("extent-change", function() { 
         var extent = map.extent; 
         graphiclayer.clear(); 
         //var extent = map.geographicExtent;       
         array.forEach(resultFeatures, function (feature) { 
          if (extent.contains(feature.geometry)) { 
           for (var i = 0; i < 30; i++) { 
            if (feature.attributes.OBJECTID === storeobj[0].data[i].assetID) { 
             switch (storeobj[0].data[i].colorCode) { 
              case 1: 
               symbol.setColor(new Color([0, 255, 0, 0.75])); 
               break; 
              case 2: 
               symbol.setColor(new Color([255, 165, 0, 0.75])); 
               break; 
              case 3: 
               symbol.setColor(new Color([255, 255, 0, 0.75])); 
               break; 
              case 4: 
               symbol.setColor(new Color([255, 0, 0, 0.75])); 
               break; 
              default: 
               symbol.setColor(new Color([128, 128, 128, 0.75])); 
               break; 
             } // end switch 
             graphiclayer.add(new Graphic(feature.geometry, symbol)); 
             break; 
            } //end if 
           } // end for 

          } //end if 
         }) // end forEach 
        }) // end extent-change 
       } // end showResults 
       map.addLayer(graphiclayer); 
      } //colorCurrentExtent 
    }); and 

Я ссылки на них на странице HTML, как

<script src="https://js.arcgis.com/3.16/"></script> 
    <script data-main="Main" src="require.js"></script> 

Answer 1

Результаты должны это сделать: https://www.google.de/search?q=require+js+basic+tutorial&ie=utf-8&oe=utf-8&gws_rd=cr,ssl&ei=GSc3V_OzEYvxUsDDlcgE#q=require+js+multiple+files

1-й и второй. Возможно, найдите базовый учебник requireJS, в котором объясняются определения requireJS-модулей.

Прежде всего отдельные файлы. Затем звоните в каждом файле

require(["modules", "needed", "for", "THIS", "file"], function(a,b,c,d,e) { 
    /*code goes here*/ 
    return Module; 
}); 

Надеюсь, это поможет.

Хороший учебник я думаю: http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Answer 2

Я думаю, что вам нужно сделать несколько настроек, чтобы сделать. По умолчанию, если вам нужен модуль «Main», загрузчик добавляет baseUrl к нему и пытается его загрузить. Я предлагаю this tutorial для более спокойного.

Answer 3

Что такое ссылка для require.js?

требуется, чтобы JS уже являлся частью ESRI API. вам не нужно включать это явно. Если вы добавляете ссылки на свои пользовательские модули, убедитесь, что вы добавили их после esri api. Этот способ не даст ошибки.

Также в функции colorCurrentExtent() вы устанавливаете событие загрузки карты и внутри этого вы создаете экземпляр карты. Я думаю, что это не сработает, поскольку карта не создается, когда событие инициализируется. переместите строку ниже вне события.

var map = main.createMap(); 

Также как называется функция colorCurrentExtent?

Answer 4

Я думаю, что вам не хватает пары вещей.

1. API Esri JS поставляется с модульным загрузчиком от Dojo, который работает с модулями AMD, поэтому вам не нужно загружать requirejs.
2. Кажется, что вы потеряли переменную dojoConfig или не разместили ее, это говорит загрузчику AMD, где можно найти ваши локальные модули. Я рекомендую прочитать этот учебник для ArcGIS. https://developers.arcgis.com/javascript/latest/sample-code/get-started-mapview/index.html. По-прежнему может быть полезно прочитать учебное пособие requirejs/dojo AMD, если вы не знаете, как работают модули.
3. Похоже, что Main.js зависит от Color-Code.js, который зависит от Main.js, эта круговая зависимость вызовет проблемы.

Я пытаюсь включить основной пример ниже, но я определенно рекомендую посмотреть учебники Esri, чтобы помочь вам начать работу.

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My App</title> 
    </head> 
    <body> 
    <script> 
     var base = location.href.replace(/\/[^/]+$/, ''); 
     var dojoConfig = { 
     parseOnLoad: false, 
     async: true, 
     packages: [ 
      { name: 'js', location: base + '/js' } 
     ], 
     deps: ['js/Main', 'dojo/domReady!'], 
     callback: function (Main) { Main.createMap(); } 
    }; 
    </script> 
    <script src='//js.arcgis.com/4.0/init.js'></script> 
    </body> 
</html> 

додзё/domReady! срабатывает, когда dom готов, неожиданно, и загружен Main.js, затем мы запускаем наше приложение, вызывая Main.createMap. Этот путь можно настроить в папку js под свойством packages в переменной dojoConfig. Перед загрузкой js api это должно присутствовать и настраиваться.

Main.js

define([ 
    "js/Color-Code", 
    "dojo/parser", 
    ... // remaining dependencies 
], function (ColorCode, parser) { 
    parser.parse(); 

    return { 
    createMap: function() { ... } 
    }; 
}); 

Color-Code.js

define([ 
    // Dependencies of the Color-Code.js Module only go here, e,g, you don't need the parser again 
    "esri/Map", 
    "esri/views/MapView" 
], function (Map, MapView) { 

// Return the interface to the Color-Code file, either an object, function, class, etc. 
    return { 
    colorCurrentExtent: function() { ... } 
    }; 

}); 

Примечание: Этот пример использует модули и файлы из 4.0 API, а не 3,16, но установка часть является одна и та же. И я бы порекомендовал использовать @dazlious связанные учебные пособия, чтобы убедиться, что у вас есть хорошее представление о том, как работают модули и каковы хорошие шаблоны проектирования.