Question

I have been developing a new JavaScript application which is rapidly growing in size.

My entire JavaScript Application has been encapsulated inside a single function, in a single file, in a way like this:

(function(){  
   var uniqueApplication = window.uniqueApplication = function(opts){
      if (opts.featureOne)
      {
         this.featureOne = new featureOne(opts.featureOne);
      }
      if (opts.featureTwo)
      {
         this.featureTwo = new featureTwo(opts.featureTwo);
      }
      if (opts.featureThree)
      {
         this.featureThree = new featureThree(opts.featureThree);
      }
   };

   var featureOne = function(options)
   {
       this.options = options;
   };
   featureOne.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureTwo = function(options)
   {
       this.options = options;
   };
   featureTwo.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureThree = function(options)
   {
       this.options = options;
   };
   featureThree.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };
})();

In the same file after the anonymous function and execution I do something like this:

(function(){
   var instanceOfApplication = new uniqueApplication({
       featureOne:"dataSource",
       featureTwo:"drawingCanvas",
       featureThree:3540
   });
 })();

Before uploading this software online I pass my JavaScript file, and all it’s dependencies, into Google Closure Compiler, using just the default Compression, and then I have one nice JavaScript file ready to go online for production.

This technique has worked marvelously for me – as it has created only one global footprint in the DOM and has given me a very flexible framework to grow each additional feature of the application. However – I am reaching the point where I’d really rather not keep this entire application inside one JavaScript file.

I’d like to move from having one large uniqueApplication.js file during development to having a separate file for each feature in the application, featureOne.js – featureTwo.js – featureThree.js

Once I have completed offline development testing, I would then like to use something, perhaps Google Closure Compiler, to combine all of these files together – however I want these files to all be compiled inside of that scope, as they are when I have them inside one file – and I would like for them to remain in the same scope during offline testing too.

I see that Google Closure Compiler supports an argument for passing in modules but I haven’t really been able to find a whole lot of information on doing something like this.

Anybody have any idea how this could be accomplished – or any suggestions on a development practice for writing a single JavaScript Library across multiple files that still only leaves one footprint on the DOM?

Answer 1

The jQuery github has a similar setup to the one you speak of. There is even a Makefile / ant build.xml that use the google closure complier.

The basic concept is to develop all your stuff in separate files, then use cat (or something similar) to put all the files together.

 cat intro.js core.js featureOne.js featureTwo.js featureThree.js outro.js > build/script.js

The code inside intro.js and outro.js from jQuery:

 // intro.js
 (function(window, undefined) {

 // outro.js
 })(window);