Question

How is your javaScript code organized? Does it follow patterns like MVC, or something else?

I’ve been working on a side project for some time now, and the further I get, the more my webpage has turned into a full-featured application. Right now, I’m sticking with jQuery, however, the logic on the page is growing to a point where some organization, or dare I say it, ‘architecture’ is needed. My first approach is ‘MVC-ish’:

• The ‘model’ is a JSON tree that gets extended with helpers
• The view is the DOM plus classes that tweak it
• The controller is the object where I connect events handling and kick off view or model manipulation

I’m very interested, however, in how other people have built more substantial javaScript apps. I’m not interested in GWT, or other server-oriented approaches… just in the approach of ‘javaScript + <generic web service-y thingy here>’

Note: earlier I said javaScript ‘is not really OO, not really functional’. This, I think, distracted everyone. Let’s put it this way, because javaScript is unique in many ways, and I’m coming from a strongly-typed background, I don’t want to force paradigms I know but were developed in very different languages.

Answer 1

..but Javascript has many facets that are OO.

Consider this:

var Vehicle = jQuery.Class.create({     init: function(name) { this.name = name; }  });  var Car = Vehicle.extend({     fillGas: function(){        this.gas = 100;     }  }); 

I’ve used this technique to create page-level javascript classes that have their own state, this helps keep it contained (and I often identify areas that I can reuse and put into other classes).

This is also especially useful when you have components/server controls that have their own script to execute, but when you might have multiple instances on the same page. This keeps the state separate.