Programming OOP in Javascript - Properly

Question

I'm interesting in improving my javascript code to be properly OOP.... currently I tend to do something like this:

jQuery(document).ready(function () {
    Page.form = (function () {
        return {
            //generate a new PDF
            generatePDF: function () {

            },
            //Update the list of PDFs available for download
            updatePDFDownloads: function () {

            },
            /*
             * Field specific functionality
             */
            field: (function () {
                return {
                    //show the edit prompt
                    edit: function (id, name) {

                    },
                    //refresh the value of a field with the latest from the database
                    refresh: function (id) {

                    }
                };
            }())
        };
    }());
});

In the end it's just mainly organized functions I suppose... what's a good resource where I can learn to program javascript in an OOP manner, or what suggestions would you have for improving my current style of programming?

It seems like I should do a sort of model prototype and have my form object inherit from that prototype.

(I'm using jQuery instead of $ because of conflicts with prototypeJS)

Answer 1

Some good sources for Object-Oriented JavaScript and JavaScript in general...

Online Articles

• How to "properly" create a custom object in JavaScript?
• https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
• http://mckoss.com/jscript/object.htm
• http://ejohn.org/blog/simple-javascript-inheritance/
• JavaScript: How To Get Private, Privileged, Public And Static Members (Properties And Methods)

Books

• JavaScript: The Good Parts - Douglas Crockford
• Object-Oriented JavaScript - Stoyan Stefanov

I hope this helps.
Hristo

Answer 2

The top 3 I suggest to read is

1. JavaScript and Object Oriented Programming (OOP)

2. Classical Inheritance in JavaScript

3. Prototypal Inheritance in JavaScript

Have a nice reading!

Answer 3

There isn't one correct way... Some people use a framework to define their object, I like to just extend prototype directly. Anyhow, I wanted to say that Oran Looney has some good posts on OO mechanics in JS:

http://oranlooney.com/classes-and-objects-javascript/

Its also worth looking at his other articles:

http://oranlooney.com/deep-copy-javascript/ http://oranlooney.com/functional-javascript/

Answer 4

The code we are using follows this basic structure:

//Create and define Global NameSpace Object
( function(GlobalObject, $, undefined) 
{
    GlobalObject.Method = function()
    {
        ///<summary></summary>
    }

}) (GlobalObject = GlobalObject || {}, jQuery);

//New object for specific functionality
( function(Functionality.Events, $, undefined)
{
    //Member Variables 
    var Variable; // (Used for) , (type)

    // Initialize
    GlobalObject.Functionality.Events.Init = function()
    {
        ///<summary></summary>
    }

    // public method
    this.PublicMethod = function(oParam)
    {
        ///<summary></summary>
        ///<param type=""></param>
    }

    // protected method (typically define in global object, but can be made available from here)
    GlobalObject.Functionality.ProtectedMethod = function()
    {
        ///<summary></summary>
    }

    // internal method (typically define in global object, but can be made available from here)
    GlobalObject.InternalMethod = function()
    {
        ///<summary></summary>
    }

    // private method
    var privateMethod = function()
    {
        ///<summary></summary>
    }
}) (GlobalObject.Funcitonality.Events = GlobalObject.Funcitonality.Events || {}, jQuery )

The strength to this is that it initializes the Global object automatically, allows you to maintain the intergrity of your code, and organizes each piece of functionality into a specific grouping by your definition. This structure is solid, presenting all of the basic syntactical things you would expect from OOP without the key words. Even setting up intelisense is possible with javascript, and then defining each peice and referencing them makes writing javascript cleaner and more manageable. Hope this layout helps!

Answer 5

Your question is quite broad so I don't think a complete answer is possible here. But here are a few points.

Regarding the code you have shown. You're jumping a couple of redundant hoops.

1. Unless you're accessing the DOM in some way, there is no need to wrap your code in jQuery(document).ready()
2. There is no need to return an object from a self calling anonymous function unless you're closing over some private functions or data

The object you have created can be created more simply (a good thing) like this

var Page = {
    form: {
        //generate a new PDF
        generatePDF: function () {

        },
        //Update the list of PDFs available for download
        updatePDFDownloads: function () {

        },
        /*
        * Field specific functionality
        */
        field: {
            //show the edit prompt
            edit: function (id, name) {

            },
            //refresh the value of a field with the latest from the database
            refresh: function (id) {

            }
        }
    }
};

It's easier to read and less confusing, only do things that buy you something. see cargo cult programming

Here's an example using a self calling anonymous function to create private members

var Obj = (function() {
    privateFunction( param ) {
        // do something with param
    }

    var privateVar = 10;

    return {
        // publicMethod has access to privateFunction and privateVar
        publicMethod: function() {
            return privateFunction( privateVar );
        }
    }

})();

The structure you have used, object literals are very good, as you say, at grouping a set of functions (methods) and properties. This is a kind of namespace. It is also a way of creating a Singleton. You may also want to create many objects of the same Class.
JavaScript doesn't have classes like traditional OO languages (I'll get to that) but at the simplest level it's very easy to create a 'template' for creating objects of a particular type. These 'templates' are normal functions called constructors.

// a constructor
// it creates a drink with a particular thirst quenchingness
function Drink( quenchingness ) {
    this.quenchingness = quenchingness;
}

// all drinks created with the Drink constructor get the chill method
// which works on their own particular quenchingness
Drink.prototype.chill = function() {
   this.quenchingness *= 2; //twice as thirst quenching
}

var orange = new Drink( 10 );
var beer   = new Drink( 125 );

var i_will_have = ( orange.quenchingness > beer.quenchingness ) 
    ? orange 
    : beer; //beer

var beer2  = new Drink( 125 );
beer2.chill();

var i_will_have = ( beer2.quenchingness > beer.quenchingness )
    ? beer2 
    : beer; //beer2 - it's been chilled!

There's a lot to know about constructors. You'll have to search around. There are lots of examples on SO.
Inheritance, the foundation of OO, is not that intuitive in js because it is prototypal. I won't go into that here because you will more than likely not use js's native prototypal inheritance paradigm directly.
This is because there are libraries that mimic classical inheritance very effectively, Prototype (inheritance) or mootools (Class) for example. There are others.

Many say that inheritance is overused in OO and that you should favour composition and this brings me to what I initially set out to recommend when I started this rambling answer.

Design patterns in JavaScript are as useful as in any OO language and you should familiarise yourself with them

I recommend you read Pro JavaScript Design Patterns. There, that's it

Answer 6

I dont think it matters what language you use, good OOP is good OOP. I like to split up my concerns as much as possible by using an MVC architecture. Since JavaScript is very event based, I also use the observer design pattern mostly.

Heres a tutorial you can read about MVC using jQuery.