Storing jquery code in external file and directory structure?

Question

Hi there,

Can anyone can confirm the best idea for storing jquery code, initially i was inserting everything in the HEAD of a document but i am seeing more and more code being used across pages,

Is the best way to use include files .. with the extension .JS?

Anything else or better with respect to this?

What would be the best place to store my .js file if this is the case..

of the root i have

/css /scripts

etc ... /scripts is where my jquery files are... but should i be using the same for my .js files?

Anyone have some recommendation on directory structure?

Answer 1

You should store as much code as you can in .js files, because that would allow the browser to download just once and re-use in all requests.

If you include your code directly in the HEAD section as plain text you're forcing that code to be downloaded in each request, slowing down the page transfer.

The directory where you store the files is up to you really... I use /css and /js, but /scripts is used as well in many ocassions.

Answer 2

Where you insert your JavaScript on the page depends on what you're trying to do. There are arguments to link your JavaScript at the end of the page for speed's sake, so that the browser can load the page before attempting to parse/execute any JavaScript. Of course, if you need the JavaScript to execute before your page loads, you'd need to put in the head of your document. It's really up to you and your needs.

.js is the standard extensions for JavaScript files, so it'd be preferable to keep using that. It's a good idea to link to your JavaScript files instead of putting them right on the page, so the user's browser can cache the JavaScript files.

Where you store the scripts is up to you, but it seems like a fine idea to store all your jQuery files in a /scripts directory.

Answer 3

It doesn't need to be too complicated. Yes, storing with the JS extension for sure, but keeping your Javascript seperate from 3rd party libraries is also recommended.

This is about all you would need:

.
./js/jquery/jquery.js
./js/yourfiles.js

Or, put your files under your company name:

./js/companyname/yourfiles.js

And as others have said: Put your JS at the end of the file if at all possible.

Answer 4

thank you everyone for the confirmations a feel a bit more prepared now

Answer 5

Seb is correct, but to add one thing, try to compress all of your JS and CSS files into one for each.

Regardless whether or not the files are cached, there is still a round-trip request to the server for each individual file to check if it has been updated. This can slow down the user's experience when there are many JS and CSS files.