How to organize JS files?

Hi guys,

This is my first thread so please be patient with me :stuck_out_tongue:

I’m starting to make simple sites and use many available JS plugins. The problem is that many of these plugins have lib, dist, source, and etc. folders wherein css and js files are scattered about. I can usually make the plugin work by dragging all the files the folders to my site’s root, but when I try to organize the files like group the css and js together in my own /css and /js folders, things start to break. Is there a reason why plugins are organized the way they are when you download them and what is the best practice to organizing them to my liking especially when using multiple plugins?

This has been one of the pain points for me when making websites so any help would be very much appreciated. Thanks!

Hi bootareen, welcome to the forums!

Source is often where you can find the library’s component parts in separate files, if you’re intending to work on the library itself. Lib will often contain dependencies that are necessary for the main script to run such as jQuery, or that are included for demo purposes. Dist will normally have the main file that you want.

It shouldn’t be a problem in most cases, as usually JS files don’t include other JS files or CSS files directly… you have to reference them in your HTML files. The only thing you’ll want to keep an eye out for is the order in which the files are loaded… you almost always want to be loading jQuery first, for example.

I guess it’s a matter of personal preference… as long as you adopt some kind of folder structure as your project grows, and stick to it, it should help to keep things manageable. I usually create a subfolder under my js folder called libs where I keep jQuery and any plugins etc… and my own code goes directly in js (and subfolders where necessary).

I put all my JS in one file at the bottom. That is the best and fastest.

Thanks for the comprehensive reply fretburner. I also have a problem with jquery. I usually link to a Google hosted jquery, but sometimes the js plugin comes with it’s own jquery file and it seems if I don’t include that, the whole plugin doesn’t work. Has anyone heard of this issue, or am I doing something wrong?

Yeah that can happen if there’s a mismatch between the version of jquery that you’re using, and the version that the plugin expects. Most of the time if you make sure you’re using the latest version of jquery (currently 1.10.1 or 2.0.2) then your plugins should work OK, but I’ve run into a couple of situations where I was using an older version of a plugin and it wasn’t playing well with the latest jquery… if the plugin is still actively developed then it’s usually just a case of re-downloading the latest version.