How to structure my javascript/jquery code?

Question

I am toying around with a pretty intensive ajax based jquery web application. It is getting to a point where I almost loose track of what events that should trigger what act

Answer 1

I really like these articles:

http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

They helped me to understand how telerik creates extensions for asp.net mvc.

Answer 2

I like the idea of AMDs (see nix's answer).

But I typically compile all my JS files into one JS file. In that case the asynchronous part is not needed. So I wrote a little "Infile Module Loader".

Here it is: https://codereview.stackexchange.com/questions/14530/a-little-infile-amd

Answer 3

For javascript code I found the following links from Christian Heilmann indispensable

• The module pattern
• Configuring scripts

I also really like the method described by Peter Michaux here

For jQuery, I heartily recommend reading the guides on Authoring and I found this tutorial on jQuery plugin patterns very good

Answer 4

(function($, window, slice)
{

    $.subscribe = function(eventName, obj, method)
    {
        $(window).bind(eventName, function()
        {
            obj[method].apply(obj, slice.call(arguments, 1));
        });
        return $;
    };

    $.publish = function(eventName)
    {
        $(window).trigger(eventName, slice.call(arguments, 1));
        return jQuery;
    };

})(jQuery, window, Array.prototype.slice);

Answer 5

We can use mvc pattern in our javascript-jquery applications. (Backbone.js, knockout.js vs.... ) are mature libraries we can use for this aim.

Answer 6

I definitely recommend reading up on the object literal pattern in addition to the module pattern; here's a good writeup:

http://ajaxian.com/archives/show-love-to-the-object-literal