Loading one JS file before another

Question

Ok so I have a .js file with about 10k lines of code. This code can be split up in

sub-object definitions
container object definitions
initialization code (after the objects have been defined)
program functionality

I would like to split this one file into 4 separate files, because it provides a better oversight. How do I go about doing this, given that they absolutely have to be declared in that order? What should I wrap up in a $(document).ready() and what not?

If I just separate the files and link them to the html in the correct order, I get undefined object errors. I was also thinking of something like this; but I don't know if that's any good...

Second JS File

function initializeContainers() { var containerObj1 = { bla: 'bla', bla2: 'bla2' }, var containerObj2 = { bla: 'bla', bla2: 'bla2' }; };

First JS File

$(document).ready(function() { function initializeSubObjects(callback) { var subObj1 = { somekey: 'somevalue', someke2: 'someothervalue' }; callback(); }; initializeSubObjects(initializeContainers); });

I have no clue whether this is the correct way to do it? PS: I also know you can add the script tags dynamically; but is that good practice?

Files are evaluated in the order they are included in the page unless using asynchronous loading in which case I'd go for RequireJS — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Aug 20, 2013 at 14:57
4 files instead of 1 file will impact page load times. You could do this in development, but I would recommend that production code remain as one file. — Dark Falcon
– Dark Falcon, Commented Aug 20, 2013 at 14:59
Adding script tags dynamically causes the scripts to be loaded asynchronously, so you lose your ability to control the order in which they are executed unless you use a library or a series of callbacks. Since you know which files you want to load, you should include them statically and in order. — colestrode
– colestrode, Commented Aug 20, 2013 at 15:03
@cfs Oh rly(I'm not taking position)? Because according to this (pretty old) post, loading them dynamically is the "best way to load JS"? — webketje
– webketje, Commented Aug 20, 2013 at 15:08
That article outlines the best way to load javascript "without blocking", so if you have designed your site with progressive enhancement in mind then this is a good solution. Keep in mind you still have to handle load order with callbacks or another library. — colestrode
– colestrode, Commented Aug 20, 2013 at 15:15

Kenneth · Accepted Answer · 2013-08-20 14:59:56Z

In your example, you should swap the contents of your first and second file. You should only call the initializeContainers method when you know for sure the file has been loaded.

The easiest way to think about this is to load all files with definitions first (helpers, functions, classes, ...). Once all these are loaded, put the rest in the last file and start executing the code only in the last file

On a side note: If you deploy this into a production environment, you should consider bundling these files. Downloading 4 files will impact your load time, so it's better to just bundle them together and send them over as a single file. While you're at it, you probably also want to minify it.

Ugh of course. Stupid... And yes, minifying and merging is intended for production. But because I use an HTML editor with split views, it's easier for dev when the files are separated. Thanks!

Collectives™ on Stack Overflow

Loading one JS file before another

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related