5

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
  • Lots of favorites, but no responses! Oct 17, 2008 at 12:56
  • I certainly hope that doesn't imply that it's normal for jQuery to be written as a giant lump of code with no reusable Classes or anything. Most of the examples I've seen imply that it's the case, but I can't bring myself to believe it. Oct 20, 2008 at 17:43

3 Answers 3

3

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

3
  • That is indeed quite nicely readable. Is this a common jQuery idiom? Oct 21, 2008 at 21:21
  • 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
    Oct 22, 2008 at 15:57
  • 1
    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. Nov 13, 2008 at 0:49
2

I'd start here for inspiration:

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

1
  • 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. Oct 19, 2008 at 17:01
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.