Javascript is not my core work, but I do want to structure my jQuery file properly. For now, I've got some functions and loose jQuery, but nothing really OO ;) Mind you, I'm mostly manipulating the DOM, like adding and removing classes and inserting HTML. Nothing fancy really.

Just wondering how you people structure these things. Maybe some good articles somewhere on this?

Oh, I am using JSLint though, and that helps a bit with consistency, but it doesn't care about how I structure it all. ;)

Just to show you what I mean by simple jQuery, see this Codepen: codepen.io/robertvanderelst/pen/xZrjRq

Take a look at this video youtube.com/watch - I pretty much follow this pattern for jquery development and it works for me - even for the simple sort of task you mention in your example.

If you don't have that much Javascript, you can go with modules.

(function($) {
 var Module = {

    'common': {
      init: function() {
             xxx
      },
      finalize: function() {
             xxx
      }
    },

    'home': {
      init: function() {
        xxx
     }
    },
  };
})(jQuery);

However as I am using babel and browserify and some ES6 sugar, I am going a more modular way.

app.js

My main javascript file, which requires or imports (es6 way) my components. Example:

import Slider from './Components/Slider'

var mainSlider = new Slider('.carousel')
mainSlider.up()

const magConfig = {
    slidesToShow: 5,
    slidesToScroll: 1,
    ....
}


var magazinSlider = new Slider('.magazin-listing', magConfig )
magazinSlider.up()

Components/Slider.js

import slick from 'slick-carousel'
import $ from 'jquery'
import _ from 'underscore'

class Slider {

  constructor(selector, settings) {
    let defaultSettings = {
     // Some slider settings....

    }

    this.settings = defaultSettings

     // Some other constructor code....

  }

  up() {

    $(this.selector).slick(this.settings)
  }

  down() {
    $(this.selector).slick('unslick')
  }
}

export default Slider

It's actually a bit more work, but it's cleaner and you can reuse stuff easy.

ToggleMenu

import $ from 'jquery';

const selector = '.mobile-trigger';
const navigation = '.main__navigation__content';

class MobileMenu {
  constructor() {
    $(selector).on('click', (e) => {
      $(navigation).toggleClass('main__navigation--open')
    })
  }
}

export default new MobileMenu()

I've actually just finished converting all my jQuery to the modules pattern and it works just fine! :)

The approach that I use currently is to have my javascript functions in separate module files using a module pattern (see post from @Kleo) and then call those functions from a simpler jQuery file. This allows me to re-use the javascripts in other projects ... for example (this is made up):

// module file
var myCar = (function () {
  var configs = {
    "colour" : "red",
    "cost" : 10000, 
  };

  function _applyPaint() {
    // private, not exposed
    ...
  }

  function start() {
   ...
  }

  function stop () {
   ...
  }

  function accelerae () {
    ...
  }

  var publicFunctions {
    start : start,
    stop : stop,
    accelerate : accelerate,
  }

  return PublicFunctions;

})();


// jQuery file

$(document).ready( function() {

  $("#start").click (function (e) {
    e.preventDefault();
    myCar.start();
  })

  $(".stop").click (function (e) {
    e.preventDefault();
    myCar.stop();
  })

});

If you need good structure try any JavaScript framework. Most of them are easy to use for little tasks.

For your codepen example no further organisation is nessecary... that's just a function, so just bring the file which holds that code in after your jquery include at the bottom of your HTML.

I totally get what you are saying, sorry for taking you too literally about your codepen example :) As the main compexitites in the javascript are jQuery itself, thats where most of the organisation is, you are then tapping in to that library of possible functions etc.... If you were doing all the jQ stuff yourself youd find that much easier to organise (there are lots of logical groupings).....

..... but .....

As you are just using some bits of jQuery you have two main options.

Logically group your functions together and comment them well - you'll end up with basically a headed list of groups of functions/lines in your file.... (although I imagine this is where you are already)
Go more OO, group funcs by creating objects that hold functions..

'logical gouping' could be taken many ways - but how about 'all these function contirbute to the specific functions of this page , or group of pages', or 'all these functions go together to make this modular element complete' - A happy side affect of this is you should end up with modules of code that contirbute specific functionality, that you can probably use elsewhere in your projects for free. (see Mr. Petrov's answer)

@Robert I will agree with Steffen. Going more OO (where possible) and logically grouping functions certainly helps.

I'm actually testing the module pattern like @Kleo suggested and that works pretty good actually. :) Still some things to figure out, but it's working so far

Using AMD (Asynchronous Module Definition)

Libraries like RequireJS and CommonJS will help to you keep our code modularized. AMD allows you to explicitly state what your code depends on and call it on demand. You will have to include only one javascript in your HTML and the necessary modules will get executed after its dependencies got loaded. That way global variable pollution will be completely gone (if done properly).

Modules

Using the Module Pattern or Revealing Module Pattern brings sanity to every spaghetti code. Addy Osmani explains greatly the two patterns in his Learning JavaScript Design Patterns:

Script configurations

Things that should be customized, will be separated in it's own configuration object literal. That way other developers won't need to go through the whole code to find what they need to change. Chirstian Heilmann (from whom I've learned about this approach) wrote:

There’s a clear separation of “change what you need to change here” and “only touch this if you know what you are doing” – allowing more developers to use your code.

Here is a simple example:

var module = function(){
  // configuration, change things here
  var config = {
    CSS:{
     classes:{
       hover:'hover',
       active:'current',
       jsEnabled:'js'
     },
     ids:{
       container:'maincontainer'
     } 
    },
    timeout:2000,
    userID:'chrisheilmann'
  };

  // start of main code 
  function init(){
     ...
  };
  // ... more methods and other code ...

  // make init a public method
  return {
    init:init
  };
}();
module.init();

You can read more about the topic here - Providing Script Configuraton In-line and programatically

Will have a look at the patterns, but like I said, my code is nothing fancy or probably even modular. It's really bare bones jQuery, so I'm worried that using RequireJS or CommonJS is overkill for me. Hmmm, maybe I should show an example on Codepen to show you what I mean.

My bad, I didn't read the whole question. For a small code base RequireJS will definitely be an overkill. Showing a code example is a good idea. :)

No problem :) The module pattern looks promising though. I've been rebuilding a bit (a separate file of course! ;) ) to see how and if it works for me and it looks better and more organized (so far).

Thread

How do you structure your jQuery file?

Responses(6)

app.js

Components/Slider.js

ToggleMenu

Using AMD (Asynchronous Module Definition)

Modules

Script configurations

Recent threads

Search Hashnode

How do you structure your jQuery file?

Responses(6)

app.js

Components/Slider.js

ToggleMenu

Using AMD (Asynchronous Module Definition)

Modules

Script configurations

Recent threads