A simple modular design for jQuery-based single page application (SPA)

Due to the complexity of a single page application, there are separate JavaScript files for different functions of a page. We developed a simple JavaScript modular system to organize these files. A typical module is an assignment of an IIFE (Immediately-Invoked Function Expression) to a global variable. It has the following structure:

var globalName = (function($) {

    // declarations of variables and functions

var declaredName1 = …;

…

var initModule = function(dep1, dep2) {

    // Initialization code using dependent module or dependent module variables

    …

};

var onDocumentReady =  function () {

   // code to be executed in JQuery on document ready call

   …

};

return {

    name1: declaredName1,

    …,

    initModule: initModule,

    onDocumentReady: onDocumentReady

};

} (jQuery));

The above code executes when the JavaScript file is loaded into an HTML page. The result of its execution is an assignment of an object with some exported names to a global variable. Each module only has one global name.

Each HTML page also has a pageRun.js that initialize each module and call a module’s onDocumentReady() function. It has the following structure:

jQuery(function() {

globalName.initModule(dependent1, dependent2);

globalName. onDocumentReady();

…

});

In the above code, shared modules and independent module run first. A module should be initialized and run after its dependent modules. The initModule() call makes the dependent relationship explicit.