Skip to main content
Code Review

Return to Question

improved formatting
Source Link
edit approved Jan 31, 2012 at 1:06
seand
edit approved Jan 31, 2012 at 1:06
seand
  • 2.4k
  • 1
  • 20
  • 29

${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

  • ${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

So for example, common.js containscommon.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.jsUrl.js:

billing.jsbilling.js:

billing.htmlbilling.html:

${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

So for example, common.js contains:

  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:

billing.js

billing.html

  • ${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:

billing.js:

billing.html:

edited title
Link
SBel
SBel
  • 306
  • 1
  • 8

Approach to organizing JavaScript forarchitecture example on an HTML page

Source Link
SBel
SBel
  • 306
  • 1
  • 8

Approach to organizing JavaScript for 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

So for example, common.js contains:

  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

<!DOCTYPE html>

<html>
    <head>
        <title>Billing</title>
    </head>
    <body>
        Enter name on credit card: <input type="text" id="ccName" /><br><br>
        <button id="submitButton">Submit Payment</button>
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/com/mycompany/common/common.js"></script>
        <script type="text/javascript" src="js/com/mycompany/common/Url.js"></script>
        <script type="text/javascript" src="js/com/mycompany/aproject/billing.js"></script>
    </body>
</html>