Javascript MVC implementation using DOJO

For the demo, I have created a landing page with a button having some value ‘jCombat Rocks!’, and on the click of this button, I need to make an AJAX call and replace the mainDiv of the landing page with an AJAX response. The logic might seem simple, but I am going to do this with the Javascript MVC structure.

As you proceed with the explanation, if at any point things get confusing/irrelevant, please download the demo files and try it yourself.

I would like to provide a little context before you actually check out the demo files:


1. With the MVC structure, it is recommended that each page must have it’s own separate javascript file. In this demo, I have pageSpecific.js file for the index.html page.

2. MVC structure would primarily segregate every JS file in the application into model, view and controller.

3. Whenever a JS file is to be loaded, there must be a call something like:

This means that, when pageSpecific.js gets loaded, it returns it’s own instance for the callback method. Note the return statement towards the end of every JS file. Once the pageSpecific instance is available in the callback method, the init method of pageSpecific.js will be called. “dojo/domReady!” makes sure that the DOM has finished loading, before any of the JS statement inside require/define executes.

define is used to primarily to define a module and is used in a JS file. All Dojo files use define.

require is used when you are not defining a module, but you require modules that have already been defined. Generally, require is used in HTML pages. The HTML page is not a module, but requires modules to present the page to the user.

4. For something like below:

As already discussed in point 3, same applies to define as well, i.e. after ‘dojo/query’,‘dojo/on’ get loaded, their respective instances gets set to the corresponding callback parameters in the same order. In other words, query will be holding an instance of dojo/query module, while on will be holding an instance of dojo/on module, during it’s execution of the callback.

5. If suppose, after setting the AJAX response on the click of ‘jCombat Rocks!’ button, the same/different JS file (say, pageSpecific.js) needs to be loaded as well, we just need to add a custom attribute to the button as data-jcom-initjs=”pageSpecific” and create a new util method something like:

If there is more than one JS file that needs to be loaded, make it data-jcom-initjs=”pageSpecific;test;abcd” and it will load/re-load the respective JS files. The same logic applies here as already discussed in points 3 and 4. This method internally uses the same require as we already discussed.

Below is the block diagram of the complete architecture:

Javascript MVC structure
As you can see, that I have numbered the order in which different components get initialized.

So, whenever the pageSpecific.js file loads, all the dependent modules under define gets loaded,  domReady! makes sure that all the modules have finished loading before proceeding. All the modules get mapped to their respective callback parameters in the same order. Refer below diagram if that helps:

DOJO module mapping in callback parameters

Finally the instance of this JS is returned, which arrives as the callback parameter to the location from where the JS is being initialized (inside index.html). Refer below diagram if that helps:

DOJO MVC mappingOnce this JS specific init() gets invoked, it in-turn invokes the controller init(), which in-turn invokes the view init() and model init() sequentially, which has been clearly depicted in the first block diagram.

I hope you are now little clear on what I am into. Probably, my explanation will make it much easier for you when you go through the source files. I have added browser console-info at various locations in the JS files, thought might make things easier to track. Don’t forget to check the console while executing the demo files.

Moving ahead, let’s check out the AJAX flow execution in MVC via block diagram:

AJAX Flow Execution in javascript MVC

The above flow is self-explanatory, you just need to refer the source files and dig a little for much better understanding. ajaxDataConfig object is much like a POJO class. Before making an AJAX call, all the mandatory properties needs to be set, such as the submissionType, URL and so on. You will see in the ajaxDataConfig.js that some properties have been set as default, such as for the submissionType. If you don’t set the submissionType inside a controller method while making an AJAX call, it will by default consider it as an ajaxCall.

BaseController applies a switch case, and depending on the submissionType, calls the respective submit method accordingly. Depending on the success/error response, the respective success/failure baseController methods get called, which after completing their needed tasks, calls the respective success/failure method of the pageSpecific.js.

So, the main idea is that, apart from the pageSpecific.js, note that every other JS file can be made a part of the core implementation, that can be re-used efficiently in our application as well as across wide range of applications. In short, at the developer end, he/she just needs to play with only one pageSpecific.js per page, with comparatively less and easier lines of code to achieve his/her part of the functionality. This is the wonder of JS MVC pattern, where a developer just needs to be aware of the JS core methods, and he/she can write new methods, easily configure to their needs, call the core methods, without actually worrying about the internal implementation. Believe that JS MVC structure reduce the error count and the time taken to resolve the errors exponentially.

Prime benefits of using JS MVC:

  1. Error count Reduction
  2. Easier debugging
  3. Faster development

I recommend you to try it, and you will never repent it.

I hope the explanation was worth it. Kindly mail me/comment for any clarifications on this. I am sure you will not find anything of this sort anywhere on the web.

Download the source files

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.