Seperate JS files

jaykapalczynski

I have an app that is starting to get a rather large amount of JS.

I was wondering if I could start to separate certain bits of code in a separate JS file and then just reference them.

If I reference it in HTML as I do the main JS file I get errors saying the map is not defined.

<script src="js/index.js"></script>
<script src="js/elevationprofile.js"></script>

Is there a way to reference all the split out JS files in the main JS file?

kenbuja

So if I comment out almost all of the requires, leaving

<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp; <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/webMercatorUtils"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="comment token">//"esri/dijit/Legend", //"esri/symbols/SimpleFillSymbol",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/geometry/Extent", "esri/layers/ArcGISDynamicMapServiceLayer", 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', "esri/layers/ImageParameters",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/_base/array", "dojo/on", "esri/graphic", "esri/graphicsUtils", "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/tasks/LinearUnit", "esri/symbols/SimpleLineSymbol",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/layers/LabelClass", "esri/dijit/BasemapToggle", "esri/dijit/HomeButton", "esri/dijit/Search", "esri/dijit/LocateButton",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp; "esri/urlUtils", "esri/dijit/Directions",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/toolbars/draw", "esri/symbols/CartographicLineSymbol", "esri/units", "esri/dijit/ElevationProfile",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/Color", "dojo/_base/array",&nbsp; "esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer", "dijit/form/CheckBox", "dojo/dom-construct",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/keys", "esri/SnappingManager", "esri/dijit/Measurement", "esri/tasks/GeometryService", "esri/config", "esri/sniff", "esri/dijit/BasemapGallery",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/symbols/SimpleLineSymbol",</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp;&nbsp;&nbsp; "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "esri/dijit/Scalebar", "dijit/TitlePane", "dojo/domReady!"</SPAN>
 <SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> webMercatorUtils<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">,</SPAN> parser
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Map, webMercatorUtils, dom, FeatureLayer, Legend, SimpleFillSymbol,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; Extent, ArcGISDynamicMapServiceLayer, WMSLayer, WMSLayerInfo, ImageParameters,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; array, on, Graphic, graphicsUtils, Geoprocessor, FeatureSet, LinearUnit, SimpleLineSymbol,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; SimpleRenderer, SimpleMarkerSymbol, LabelClass, BasemapToggle, HomeButton, Search, LocateButton,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//urlUtils, Directions,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; Draw, CartographicLineSymbol, Units, ElevationsProfileWidget,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; Color, arrayUtils, parser, InfoTemplate, ClassBreaksRenderer, CheckBox, domConstruct,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; keys, SnappingManager, Measurement, GeometryService, esriConfig, has, BasemapGallery,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//&nbsp; LabelLayer, TextSymbol, Font, SimpleLineSymbol</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

then the code works. If I uncomment the next module, "esri/layers/FeatureLayer", then the code fails. The time it takes to load all those modules was causing a problem. To fix that, I used dom/ready on the other js file. This makes

<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dojo/ready"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>ready<SPAN class="punctuation token">,</SPAN> Map<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"clicked"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

From the documentation

dojo/ready registers a function to run when the DOM is ready and all outstanding <SPAN class="">require()</SPAN> calls have been resolved, and other registered functions with a higher priority have completed.