Javascript Architecture/Application Structure Best Practices?

Question

Do these exist?

I've been a slave to big strongly typed OO languages (Java & C#) for many years and am a devotee of Martin Fowler and his ilk. Javascript, due to it's loosely typed and functional nature seems to not lend itself to the idioms I am used to.

What are the best practices for organizing a javascript rich client? I am interested in everything from where to keep your code, (one file or multiple files) to MVC patterns to gang of four patterns to layering.

Not putting stuff in the Global namespace seems to be the only consensus.

I am using JQuery as the "Extended API."

Answer 1

I like to use a sort of MVC client side architecture.

• I have a page CONTROLLER
• The DOM is my VIEW
• The server is my MODEL

Typically I create a singleton page controller class (with supporting classes off that is needed) that controls the ajax calls and view binding.

var pageXController = {
  init: function(param) {
    pageXController.wireEvents();
    // something else can go here
  },

  wireEvents : function() {
    // Wire up page events
  }

  // Reactive methods from page events
  // Callbacks, etc
  methodX : function() {}
}

$(document).ready( function() {
  // gather params from querystring, server injection, etc
  pageXController.init(someparams);
});

I should also add here that your MODEL in this case is your DTO's (Data Transfer Objects) which are optimised to the problem they solve. This is NOT your domain model.