如何组合我的JavaScript文件并仍然让我的回调等待就绪状态？

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

First of all: Depending on how much code you have, you should consider, if serving all your code in one file is really a good idea. It's okay to save http-requests, but if you load a huge chunk of code, from which you use 5% on a single page, you might be better of by keeping those js files separated (especially in mobile environments!). Remember, you can let the browser cache those files. Depending on how frequent your code changes, and how much of the source changes, you might want to separate your code into stable core-functionality and additional .js packages for special purposes. This way you might be better off traffic- and maintainance-wise.

Encapsulating your functions into different objects is a good idea to prevent unnecessary function-hoisting and global namespace pollution.

Finally you can prevent calling needless event handlers by either:

Introducing some kind of pagetype which helps you decide calling only the necessary functions.

or

checking for the existence of certain elements like this if( $("specialelement").length > 0 ){ callhandlers}

to speed up your JS, you could use the Google Closure Compiler. It minifies and optimizes your code.

Answer 2

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>

Answer 3

Just to make sure I've understood you correctly, you have one js file with all your code, but you want to still be in control of what is executed on a certain page?

If that is the case, then the Terrific JS framework could interest you. It allows you to apply javascript functionality to a module. A module is a component on your webpage, like the navigation, header, a currency converter. Terrific JS scans the dom and executes the js for the modules it finds so you don't have to worry about execution. Terrific JS requires OOCSS naming conventions to identify modules. It's no quick solution to your problem but it will help if you're willing to take the time. Here are some more links you may find useful:

Hello World Example: http://jsfiddle.net/brunschgi/uzjSM/

Blogpost on using: http://thomas.junghans.co.za/blog/2011/10/14/using-terrificjs-in-your-website/

Answer 4

I would use something like YUI compressor to merge all files into one min.js file that is minified. If you are looking for performance both merging and minifiying is the way to go. http://developer.yahoo.com/yui/compressor/

Example: Javascript input files: jquery.js, ads.js support.js

run yui with jquery.js, ads.js, support.js output it into min.js

Javascript output files: min.js

then use min.js in your html code.