Javascript – the industry and community best practice for coding proper maintainable readable jQuery for a large codebase

javascriptjqueryoopreadability

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!

Best Solution

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

Related Question