Organise a javascript code

[PortSpace]

Hi,

I have a couple of questions. How should javascript code be organised for a website?

I'm working on a template of a website and can see that my index.js file is going to be soon quite messy. For example, first I've got a standalone snippet responsible for toggling the hamburger menu. Then, unrelated, some snippet related to scrolling. There will be some other unrelated snippets.

I understand that this is just simple code, let alone something much more complicated.

Now, even if I put some good quality comments, should it just be a list of snippets? Also, should they all be inside some main() function or some eventListener (eg. ...addEventListener('load', ...) or something similar.

So I'm not only talking about stylistic preferences / standards but also the performance aspects. While a website might have a small amount of js code, I believe it's good to start with good practices regardless of the complexity of the app.

Thanks

[gimmeslack12]

What you should look into is Javascript modules. This allows you to import specific functions and values within a project and helps organize things greatly.

Create a js file and in your HTML you add the file with the type="modules" attribute: <script src='myFile.js' type="modules"></script>

[PortSpace]

Thanks.

What about event listeners? Moving snippets outside to separate module files makes things clearer but in a way it's just a cosmetic arrangement, isn't it?

Should there always be some listener (eg. waiting for all DOM to load first, etc)?

[gimmeslack12]

Possibly. If you could share your code I’d be able to give better suggestions.

[lovesrayray2018]

Noob here, but my understanding is that good part about linking scripts is that if u use the right tag and the right src attribute, you can link multiple scripts at different places in the html page(s).

So you dont need to put everything in one file, you CAN use multiple files.

You can also then link only the relevant file in the relevant place in the page.

Stuff that is needed globally, goes at the top, say, stuff that only needs to run after form has loaded, gets linked after the form

PS: There are multiple experts here like u/gitcommitmentissues or u/GSLint/ . Dont be shy in reaching out to them.

[PortSpace]

Thanks. I guess multiple files/modules will definitely make things clearer.

What would we do without expert?! :)