Module Encapsulating MVC

By | November 16, 2013

As I had mentioned in a previous post I inherited a large scale, internal JavaScript application at work. The code base for this application had been refactored on a few occasions and maintained by several developers over a few years with varying degrees of skill level. The application as a whole is composed of a suite of applications. One of the first observations of this code base was that many similar components in the various applications were simply copied and pasted from one application to another. So any bug fixes applied in one application would need to be applied in several other applications. Obviously not an ideal situation for maintainability.

Also another coworker was working on an unrelated JavaScript application and we had discussed how we should have a common JavaScript architecture for our development group. With the references I mentioned in my previous post and many code reviews, suggestions, and corrections from my coworker we came up with the following architecture based on the module pattern encapsulating our MVC objects. It’s still a work in progress. I’d prefer to abstract our use of the jQuery framework. I also would like to work on base objects that contain most of the common functionality, and from which, new module, model, view, and controller objects could simply inherit from. But what we have is I think a good base to start with so I’d like to present our solution here.

Update:  First off I should say that I don’t recommend this for anything but the smallest of projects.  Since I’ve been using AngularJS I’ve never gone back to doing anything like this with one exception.  I did a prototype mobile app in Corodova and since this MVC framework is much more lightweight than AngularJS the prototype did perform quiet well as a mobile app in Cordova.  However any project of a reasonable size will quickly show that this approach can become cumbersome and tedious.  So if you’re looking for a MVC approach for a small app and you just want to stick with jQuery and JavaScript, this does work, it just does not scale well for a larger application.

The Module Object
The module object provides several layers of closures to provide private static variables and private instance variables as well as to encapsulate the the model, view, and controller objects.  The module also provides a public API for working with the module and will trigger any external events that external users of the module may listen for.


The Controller Object
The controller object will initialize the model and view objects and provide any cleanup functionality as well as call clean up methods on the view and model objects. The controller will handle events from the view object and request data from the model object. The controller uses the jQuery event handling framework for handling view events and the jQuery Promise/Deferred callback framework for handling calls to the model. The controller object will also provide the error handling logic for the module.


The View Object
The view object initializes the user interface controls and provides methods for getting and setting data on the user interface. The view object will communicate user interface actions to the controller via the jQuery event triggering mechanism.


The Model Object
The model object handles all of the AJAX calls using jQuery’s AJAX framework. Data is returned to the controller via the jQuery Promise/Deferred callback framework.

Leave a Reply