javascript - 如何定义一个模块并用它来分隔js文件

Question

我有一个 HTML 文件在网络 map 的要素图层上执行查询任务。

现在我想将该文件分成 3 个不同的文件:html 文件、一个加载 webmap 的 main.js 文件，以及一个执行查询任务和其他任务的 Color-Code.js 文件。基本上，html 文件应该调用 main.js，而 main.js 又应该调用 Color_Code.js。我用 require.js 尝试过...但我每次都收到文件 Color-Code.js not found 错误。我真的是 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

第一个和第二个。也许寻找一个基本的 requireJS 教程来解释 requireJS-module-definitions。

首先是单独的文件。然后在每个文件中调用

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/