JavaScript architecture example on an HTML page I'd want an advise about the following idea that I have for organizing JavaScript when it comes to creating an HTML page. My group will be starting a new project and the approach that I'm trying to come up with will be large scale because every HTML page will be using it. Below I'll show a sample code and I'd like it to be reviewed and advised if you think that's a good approach. I did not find anywhere anything better it seems.

There are 4 files:


${root}/billing.html: contains an input box for the name on credit card
${root}/js/com/mycompany/common/common.js: initializes logging and error handling
${root}/js/com/mycompany/common/Url.js: class that is used to perform an AJAX call
${root}/js/com/mycompany/aproject/billing.js: initializes things on the billing page


common.js:

var com_mycompany_common_common = function() {

    function log(message) {
        console.log((new Date()) + ': ' + message);
    }

    function init() {
        window.onerror = function(message) {
            log('Unhandled error: ' + message);
        }
    }

    return {
        log: log,
        init: init
    }
} ();

$(document).ready(function() {
    try {
        com_mycompany_common_common.init();
    } catch (e) {
        console.log('Error during initialization: ' + e);
    }
});


Url.js:

function com_mycompany_common_Url(url) {    
    this.url = url;
}

com_mycompany_common_Url.prototype.addParameter(name, value) {
    this.url += '?' + name + '=' + value;
}

com_mycompany_common_Url.prototype.ajax() {
    com_mycompany_common_common.log('Send ajax to: ' + this.url);
}


billing.js:

var com_mycompany_aproject_billing = function() {

    function init() {
        $('#submitButton').click(function() {
            Url url = new com_mycompany_common_Url('http://bla.com/process/billing');
            var creditCardName = $('#ccName').val();
            url.addParameter('name', creditCardName);
            url.ajax();
        }
    }

    return {init: init};
} ();

$(document).ready(function() {
      try {
           com_mycompany_aproject_billing.init();
      } catch (e) {
           com_mycompany_common_common.log('Error during initialization: ' + e);
      }
});


billing.html:

&lt;!DOCTYPE html&gt;

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Billing&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Enter name on credit card: &lt;input type="text" id="ccName" /&gt;&lt;br&gt;&lt;br&gt;
        &lt;button id="submitButton"&gt;Submit Payment&lt;/button&gt;

        &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/com/mycompany/common/common.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/com/mycompany/common/Url.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/com/mycompany/aproject/billing.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
You have globals everywhere. Your cross module communication strategy is "uniquely named globals everywhere". I assume you know globals are bad but modul8 has a good article about it

Use a module bundling strategy using tools like browserify or modul8

// common.js
function log(message) {
    console.log((new Date()) + ': ' + message);
}

window.onerror = function(message) {
    log('Unhandled error: ' + message);
}

module.exports = { log: log };


You just got rid of those ugly company names as your namespacing strategy. And you also removed that ugly boilerplate code. Here your common.js file exports an object with the log method

// Url.js
var log = require("common.js").log;

function Url(url) {    
    this.url = url;
}

Url.prototype.addParameter = function(name, value) {
    this.url += '?' + name + '=' + value;
};

Url.prototype.ajax = function() {
    log('Send ajax to: ' + this.url);
};

module.exports = { Url: Url };


You Url module explicitly requires your common file. It now has the log method.

//billing.js
var Url = require("Url.js").Url,
    $ = require("jQuery");

$('#submitButton').click(function() {
    var url = new Url('http://bla.com/process/billing');
    var creditCardName = $('#ccName').val();
    url.addParameter('name', creditCardName);
    url.ajax();
}


And billing explicitly requires Url and jQuery.

// billing.html
&lt;!DOCTYPE html&gt;

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Billing&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Enter name on credit card: &lt;input type="text" id="ccName" /&gt;&lt;br&gt;&lt;br&gt;
        &lt;button id="submitButton"&gt;Submit Payment&lt;/button&gt;

        &lt;script type="text/javascript" src="js/billing-bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;


And your billing html file loads a single precompiled billing bundle.