Can someone give me advice in regard to dividing a single JavaScript file into multiple separate files,

I have a single html, css and JavaScript file
(that uses JQuery) but the JavaScript file has over 200 lines of code and soon to be more.

Can someone send me examples of work (videos / github / codepen ) that display simple projects that preferably use JQuery in a object orientated approach.

I’m trying to learn about

  • Best practices
  • Passing information between functions
  • object orientated programming
  • Avoiding global scope
  • oop
1 Like

In terms of being object oriented, you’d want to create a separate JS file for a thing that you might want to use or interact with in another part of your application.
Just as an example – maybe you create a really snappy flyout menu. You might say to yourself, “Self, I bet that we’re going to have menus on some other new pages that we add to this website.”
“Darn, Self,” you’d reply, “I bet you’re right. Let’s do the smart thing and but the behavior of this flyout menu in its own file so we can include it in any page you want.” Then you might give yourself a high five.


Sorry. It’s a Saturday morning and I haven’t finished my coffee yet.

Thank you, how would these files e.g.(Cat.js and Dog.js) talk to each other ?

if there was a function in Cat.js that needed to send data to Dog.js ?

Can you point me in the direction of “working examples” ?

You could split into multiple .JS files of related functions then a main file that actually uses all of the functions. That’s one strategy you could use however I recommend merging everything into one file and minifying before pushing to production to reduce load time and the need for multiple HTTP requests. Of course still keep the development files organized and seperated. Hope this helps :slight_smile:

require
or
import if you’re using ES6.