SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to organize JS files?

    Hi guys,

    This is my first thread so please be patient with me

    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!

  2. #2
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Hi bootareen, welcome to the forums!

    Quote Originally Posted by bootareen View Post
    The problem is that many of these plugins have lib, dist, source, and etc. folders wherein css and js files are scattered about.
    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.

    Quote Originally Posted by bootareen View Post
    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.
    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.

    Quote Originally Posted by bootareen View Post
    what is the best practice to organizing them to my liking especially when using multiple plugins?
    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).

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I put all my JS in one file at the bottom. That is the best and fastest.

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •