OOP vs JavaScript

You can apply OOP principles to Javascript development too. Javascript uses prototypal inheritance, but that is an implementation detail. The concepts are still the same. Most of the concepts with which you are familiar have direct analogues in javascript.

Other tried and true methods apply as well:

1) Stay DRY -- Do not Repeat Yourself. Duplicate code is always evil.
2) Separate concerns -- Use the MVC or MVVM patterns to keep code clean and doing only 1 thing.
3) Test -- When I hear "Difficult to maintain" my brain translates that into lack of tests. You can certainly write unit tests for javascript projects.
4) Code Review -- Code reviews can be a good way of rejecting duplicated code, code that is not crafted properly, not formatted, etc....

This is how you define objects and methods in javascript.

function SomeObj() {

    this.someMethod = function() {
        alert('boo');
    }
}

var o_obj = new SomeObj();
o_obj.someMethod(); //alerts "boo"

Hope it helps.

You can also use prototype to create static functions.

this.prototype.someMethod = function() {
    alert('boo');
}

When I was in the same situation I started to look at "how other did". Its ended up with http://dojotoolkit.org/ and http://jquery.com and I was looking how they implement widgets/plugins so other could extend the framework.

Another way of defining simple objects and methods in javascript (without the need for new).

function creaeSomeObj() {
    var that = {};
    that.someMethod = function() {
        alert('boo');
    }
    return that;
}

var o_obj = createSomeObj();
o_obj.someMethod(); //alerts "boo"

This pattern doesn't support inheritance, but many times it is sufficient.

Why "vs"? JavaScript supports object-oriented programming, but not in the traditional class-based way that you see in e.g. Java.

The way JavaScript's OOP works is usually known as "prototypal inheritance", or more specifically "delegative prototypal inheritance". This can be boiled down to "if you're looking for the property 'foo' in an object, and you can't find it there, then try looking for 'foo' inside the object's prototype instead". That is, the lookup of the property is delegated to the object's prototype (we say that the object inherits the properties from the prototype).

The way prototypal inheritance works has a couple of implications. For instance:

• Objects in JavaScript are "dynamic" in the sense that they're just a bunch of name-value pairs. New properties can be added and removed during runtime, so they're much less "static" than objects in the typical class sense.
• The way delegative prototypal inheritance works ("if you can't find the prototype here, then look here instead") means it's much simpler than classical OOP. From a purely prototypal point of view, you don't need constructors, for example. "Methods" are just regular functions that happen to be attached to the prototype (which means they are available as properties on all inheriting objects).

There are pro's and con's with both prototypal and classical inheritance, but it's important to remember that they're different.

Now, JavaScript is in some senses inspired by Java and other classical languages, so therefore they decided to make the syntax "class-like" to make it easier for people used to classes to get started. I won't elaborate a lot on this; it's documented to a great extent in other places already.

Some interesting posts:

• hughfdjackson's introduction to JavaScript OOP -- short and more to-the-point,
• Sorella's longer "Understanding Javascript OOP" -- rather in-depth and very complete resource.

Pluralsight has a course on just this topic: Structuring JavaScript Code that may provide some insight. Two caveats: 1. I haven't sat through the course yet - but content looks great and I've been impressed with other Pluralsight courses I've taken, and 2. it is not free (but may be worth the small $ if it saves you time down the road b/c you have better code structure). No, I don't work for Pluralsight.

In addition to the js frameworks mentioned in this thread, can also look at Knockoutjs - great tutorials here learnknockoutjs.com. Knockout is MVVM focused. Note, there is a good discussion in stackoverflow comparing Backbone to Knockout, and Pluralsight also has a course on using Knockout which I have watched and do recommend.

In JavaScript, Functions are Objects; Mozilla Developer Network, McKoss, SitePoint, and JavaScript Kit explain further.

Example JavaScript Object

function myObj() {
  this.myMethod = function() {
    alert('hello');
  } 
}
var demo_obj = new myObj(); 
demo_obj.myMethod();

Patterns to keep things under control

• The patterns listed here are particular to JavaScript.
  1. Use a Script Loader.
  2. Use a JS Framework.
  3. Lint your JavaScript. - Tools are availble to run this on your desktop in Rhino or node.
  4. Minify your JS.
• The patterns listed here are typical of OOP Languages, and are not particular to JavaScript.
  1. DRY - Don't Repeat Yourself.
  2. Observer (Pub/Sub) pattern.

Anti-Patterns to let things out of control

1. Polluting the namespace
2. use of eval()
3. Prototyping against the Object object
4. Inline Script Tags.
5. use of document.write