Keeping your javascript structured and tidy (as an OO programmer)

One important aspect to remember about Javascript is that it is a prototypical language. Functions can be objects, and anything can be put on the object, often affecting related objects in the process. There's no official way to 'extend' an object because of this. It's a concept that I still have a hard time understanding.

Javascript 'acts' like any other OOP language for the most part, with some exceptions, namely extending objects (http://jsweeneydev.net84.net/blog/Javascript_Prototype.html).

After extensive research, I did find a very, very light-weight way to simulate expanding objects (I'm using using it in my GameAPI). The first field is the parent object, the second is the object that expands.

extend  : function(SuperFunction, SubFunction) {

    //'Extends' an object

    SubFunction.prototype = new SuperFunction();
    SubFunction.prototype.constructor = SubFunction;
},

This link might clear up some problems and misconceptions: http://www.coolpage.com/developer/javascript/Correct%20OOP%20for%20Javascript.html

Personally, I tend to be anti-framework, and I haven't seen a framework yet that doesn't force the programmer to significantly change their programming style in this regard anyway. More power to you if you find one, but chances are you won't really need one.

My best advise is to try to adapt to Javascript's prototypical style, rather than force old methodologies on it. I know it's tricky; I'm still trying to myself.

Best of luck diggingforfire.

I generally follow the make-an-anonymous-function-then-call-it pattern. Basically, you create an inner scope and return a single object containing your interface. Nothing else escapes, because it's all trapped within the function scope. Here's an example using jQuery:

var FancyWidget = (function($) {
    // jQuery is passed as an argument, not referred to directly
    // So it can work with other frameworks that also use $

    // Utility functions, constants etc can be written here
    // they won't escape the enclosing scope unless you say so
    function message(thing) {
       alert("Fancy widget says: " + thing);
    }

    // Make a simple class encapsulating your widget
    function FancyWidget(container) {
        container = $(container); // Wrap the container in a jQuery object
        this.container = container; // Store it as an attribute

        var thisObj = this;
        container.find("#clickme").click(function() {
            // Inside the event handler, "this" refers to the element
            // being clicked, not your FancyWidget -- so we need to
            // refer to thisObj instead
            thisObj.handleClick();
        });
    }

    // Add methods to your widget
    FancyWidget.prototype.handleClick = function() {
        this.container.find("#textbox").text("You clicked me!");
        message("Hello!");
    };

    return FancyWidget; // Return your widget class
                        // Note that this is the only thing that escapes;
                        // Everything else is inaccessible
})(jQuery);

Now, after all this code executes, you end up with one class, FancyWidget, which you can then instantiate.

You can define multiple classes this way too; instead of using return FancyWidget, you can return an object literal instead:

    return {
        FancyWidget: FancyWidget,
        Frobnicator: Frobnicator,

        // Nested namespaces!
        extra: {
            thing: thing,
            blah: blah
        }
    };

I have never used this personally, but have seen backbone.js referenced many times to this question. See at: http://documentcloud.github.com/backbone/

Using some framework designed to meet similar requirements may be a good idea.

But there are some things you should really follow to be efficient:

• remember about closures in JavaScript and do not forget about var keyword,
• use callbacks where possible and reasonable, JavaScript is asynchronous by nature,