views:

300

answers:

3

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!

+2  A: 

I'd start here for inspiration:

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

This is a perfect example of what I am NOT looking for. The article shows how to do extremely basic jQuery. I want to know what people are using for classes and managing a large codebase.
subtleGradient
+3  A: 

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

Zac
That is indeed quite nicely readable. Is this a common jQuery idiom?
subtleGradient
I see it a lot in the ol' jQuery circles, yes. Although I believe the general structure could be used equally well with other libraries.Since jQuery relies so heavily on anonymous functions, you do need to watch out for the 'this' keyword. I've added a link in the original post.
Zac
Big drawback with the object literal syntax is that you can't create multiple instances. What if I want to have two instances of Widget on the screen? I suggest you go with real objects that simply container and use jQuery instances. function Widget() { }; Widget.prototype.load() {}; etc.
Jason Moore
A: 

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.

mcaaltuntas