nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

<SPAN class="keyword token">var</SPAN> Conservation <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fvafwisdev.dgif.virginia.gov%2Farcgis%2Frest%2Fservices%2FProjects%2FAVL_Locations%2FMapServer%2F7" target="_blank">https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/AVL_Locations/MapServer/7</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN>
visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legendLayers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> Conservation<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Conservation Lands'</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>

タグ付けされた投稿をもっと見る

Accepted answers

FilipKrál

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.

All comments

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

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.

FilipKrál

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.

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

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.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.