How do you structure your jQuery code?

Coming from mootools and JAVA, mootools class implementation is a real nice way to structure my code, plus I can have some nice features like extending, implementing and so on. Starting with jquery I found my self writing $.fn plugins that cant use code of other plugins. Plus it seems no goo开发者_开发百科d idea to use the plugin structure for complex stuff that hasn't much to do with DOM Elements. Is there a better way then $.fn? What do you recommend to structure my code using jquery.

This is a tough question to answer.

JavaScript's incredible flexibility's downside is that every programmer and his brother-in-law has a different way of doing things.

The downside of pulling in a library for doing "Class" based OOP in JavaScript (Prototype library, Moo, Joose, JS.Class, Base2, etc.) is that you immediately cut down on the number of fellow JavaScript programmers who can read your code.

Obviously, jQuery encourages you to think in terms of "collections." A collection is what you get back from a $() or jQuery() call. John Resig once considered adding a class system to jQuery, but finally decided against it. I think he's said that he's never needed a real "Class" system in JavaScript programming.

For all but the largest JS projects, I'd say forget about a Class system. Leverage JS's incredible object and array system (including literals). Namespace heavily (variables and methods alike).

I've had a lot of luck using arrays of objects for most situations I'd normally use Classes for.

An interesting extension of the jQuery collection concept is in Ariel Flesler's jQuery.Collection plugin here. It lets you treat "normal" data much as you would treat DOM data in jQuery.

I recently started using Underscore.js, which gives you a lot of functional tools to treat your data as collections.

What you generally need are mechanism for code extension and packaging.

For the former, I use the pseudo class-based default oo mechanism, sometimes with a helper function to make inheritance easier:

Function.prototype.derive = (function() {
    function Dummy() {}
    return function() {
        Dummy.prototype = this.prototype;
        return new Dummy;
    };
})();

function Base() {}
function Sub() {}
Sub.prototype = Base.derive();

The latter can be achieved by namespacing via self-executing functions. It's even possible to fake import statements:

// create package:
var foo = new (function() {
    // define package variables:
    this.bar = 'baz';
    this.spam = 'eggs';

    // export package variables:
    this.exports = (function(name, obj) {
        var acc = [];
        for(var prop in obj) {
            if(obj.hasOwnProperty(prop))
                acc.push(prop + '=' + name + '.' + prop);
        }
        return 'var ' + acc.join(',') + ';';
    })('foo', this);
});

// use package:
(function() {
    // import package variables:
    eval(foo.exports); 
    alert(spam);
})();

jQuery isn't really meant to be used for structuring your code. It's meant to be a tool that you use from your other code, not a way of life.

The rest of your code should be written whatever way you like. Just use jQuery when you want to do DOM manipulation, Ajax calls, cross-browser events, etc.

You may want to learn how to use the .prototype property to put some of your code into "classes", so that you can reuse the same code in different places, by just creating a new instantiation, basically.

You can also put code into objects so that you have a unique namespace, so it is easier to share related objects amongst different projects.

Basically you will be structuring your code as you do for straight javascript, but jQuery abstracts out some of the common functionality so you don't have to worry about browser issues, but it is just a helper, it really doesn't provide a framework as much as just making some concepts simpler. For example, rather than using onclick I tend to use .bind('click', ...) but that is if I want to have the potential of more than one event hander on an element.