Reference JS page from JS

[jaykapalczynski]

I have an index.html page and a main.js page.

I am referencing the js page in html as such:  <script src="js/main.js"></script>

my main.js page is getting very long and want to do some house cleaning.  Can I create another .js page for instance and move all my Feature Layers in there....like below

Would I reference this in the HTML page or the Main.js page?

var Conservation = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/AVL_Locations/MapServer/7", {
mode: FeatureLayer.MODE_SNAPSHOT,
visible: false
});
legendLayers.push({ layer: Conservation, title: 'Conservation Lands' });‍‍‍‍‍

[ThomasSolow]

If I understand correctly, you want to split your JS up into multiple files but share the same context.

Browser JavaScript doesn't have the ability to import other JS files by default.  But there are lot of tools out there for this like browserify, webpack, or systemjs.  These tools work by letting you use import or require statements in your javascript files and handling the complex task of registering files as packages or bundling everything into one file.

If your project is small and you don't want to go to the trouble of pulling in a complex library for this, you could just use an object on the global object for things you want to share between JS files.  You could do this by attaching an object literal to the window, ie window.myNameSpace = {}

You'll be able to attach variables you want to share between files to window.myNameSpace, ie window.myNameSpace.map = new Map(...).  Keep in mind that the order your JS will run in matters if you take this approach.

[FilipKrál · Accepted solution]

Hello Jay,

You may get some valid but confusing answers because it depends on the frameworks you use in your app and whether you use asynchronous module loading, which you should use.

The simplest way to reference (aka import or load) another js file into your page is to add another <script src="my/script2.js" /> into your HTML page. The problem is that this is not asynchronous so it will lock the browser (not too much of a problem for small js file with a few utility functions). A bigger problem with this approach is that things may execute in wrong order and you app will not work. That's were the "require" function and asynchronous module loading come in. Coincidentally, somebody asked a related question just recently so I recommend you explore the links there:

load custom modules in JSAPI 4.3 

And also around here:

Create a Re-usable Widget | Guide | ArcGIS API for JavaScript 3.20 

Filip.

[ThomasSolow]

Great point, I forgot about the dojo loader because I don't use it.  But it makes perfect sense to use the dojo loader for this sort of thing since you're already using it to pull in Esri modules.

Introduction to AMD Modules - Dojo Toolkit Tutorial  is a good resource.

[jaykapalczynski]

Wow...great replays and great info guys....Much appreciated...this is more than I am willing to invest in resource wise and time wise....I will stick with the single JS file...will just try and make a bit more pretty....

Very very appreciative for your thoughts and comments...Cheers