Question

I have lots of functions and event handlers that are split across multiple javascript files which are included on different pages throughout my site.

For performance reasons I want to combine all of those files into 1 file that is global across the site.

The problem is I will have event handlers called on elements that won’t necessarily exist and same function names.

This is an example of a typical javascript file…

$(document).ready(function(){
    $('#blah').keypress(function(e){
        if (e.which == 13) {
            checkMap();
            return false;
        }
    });
});

function checkMap() {
    // code
}

function loadMap() {
    // code
}

I would need to seperate this code into an object that is called on that specific page.

My thoughts are I could re-write it like this:

(function($) {
    $.homepage = {
        checkMap: function(){
            // code
        },
        loadMap: function(){
            //code  
        }
    };
})(jQuery);

And then on the page that requires it I could call $.homepage.checkMap() etc.

But then how would I declare event handlers like document.ready without containing it in it’s own function?

Answer 1

I think that all you need is a namespace for you application. A namespace is a simple JSON object that could look like this:

var myApp = {
    homepage : {
      showHeader : function(){},
      hideHeader : function(){},
      animationDelay : 3400,
      start : function(){} // the function that start the entire homepage logic
    },
    about : {
    .... 
    }
}

You can split it in more files:

1. MyApp will contain the myApp = { } object, maybe with some useful utilities like object.create or what have you.
2. Homepage.js will contain myApp.homepage = { … } with all the methods of your homepage page.
3. The list goes on and on with the rest of the pages.

Think of it as packages. You don’t need to use $ as the main object.

 <script src="myapp.js"></script>
 <script src="homepage.js"></script>
 <-....->
 <script>
   myApp.homepage.start();
 </script>

Would be the way I would use the homepage object.

When compressing with YUI, you should have:

<script src="scripts.min.js"></script>
<script>
    myApp.homepage.start();
 </script>