What is the industry and community best practice for coding proper maintainable readable jQuery for a large codebase?

Question

Coming from a Ruby background, I'm used to writing all my code using classes with methods and such. I do know javascript quite well, but I'm new to jQuery and its best practices.

Obviously there are a million ways to simulate classes in javascript. But, what is the actual jQuery community REALLY using in the real world?

Specific examples would be ideal. Or links to real production code. Links to fictional ideal code would also be helpful.

Thanks!

Answer 1

I'd start here for inspiration:

http://errtheblog.com/posts/73-the-jskinny-on-jquery

Answer 2

This doesn't apply specifically to jQuery, but I like the object literal syntax for simulating classes in my own code.

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

I tend to often use something like this (simplified) framework:

var Widget = {

    sound:'bleep',

    load:function(){

        // do stuff here that doesn't need to wait until the DOM is ready.

        // Inside an anonymous function (such as the 'click' handler below),
        // 'this' loses its scope and no longer refers to the widget object.
        // To retain a reference to the widget object, assign 'this' to a
        // variable. I use an underscore... some people like 'self':
        var _ = this;

        // when the DOM is ready, run the init "method":
        $(document).ready(function(){
            _.init(); // the underscore now refers to the widget object
        });

    },

    init:function(){

        var _ = this;

        // whenever a <p class="noisy"> element is clicked, call makeNoise()
        $("p.noisy").click(function(){
            _.makeNoise();
        });

    },

    makeNoise:function(){

        alert(this.sound); // alert 'bleep'

    }

};

Widget.load();

Edit: More information on use of the 'this' keyword, noted above:

http://groups.google.com/group/jquery-en/browse_thread/thread/328d07f90467cccc?pli=1

Answer 3

I am struggling with same problem using jQuery in my current project and I am feeling same about jQuery. It is like big cryptic method chains. And when it is getting bigger it takes more time to understand what I wrote earlier.

The only way I found to make more maintainable jQuery code is Module Pattern.Maybe it can be useful.Also you can look at Ajaxian jQuery vs. Prototype: OO JavaScript with or without training wheels article about same problem.