Question

My JavaScript file is now more than 1000 lines long. I need to make it more manageable. Here is the basic structure of my file:

// Some settings (easily put in a separate file)

// Some jQuery plugins (easily put in a separate file)

$(function () {
   var gadget1 = (function() {
       var private, public;
       // stuff
       return public;
   }());

   var gadget2 = (function() { // gadget2 uses gadget1
       var private, public;
       // stuff
       return public;
   }());

   var gadget3 = (function() {  // gadget3 uses gadget1 and gadget2
       var private, public;
       // stuff
       return public;
   }());

   // Playing around with the gadgets.
});

The bulk of my code is wrapped in $(document).ready() and is made of “gadgets” that are chunky closures. How can I separate each “gadget” in a separate module?

Answer 1

You can use the namespacing pattern

MyAPP = {}
MyAPP.Gadget1 = (function () {
    //blah blah
})()

and then have a helper

MyAPP.helpers = (function () {
  //here are my helper functions/properties etc.
})()

These namespaced objects would be in separate files.