Namespace schema for JavaScript
<p>I come from the world of Java.  In Java there are packages, for example, "com.mycompany.billing" and classes that are inside the package, for example, "BillProcessor".  The company in which I work is starting a new project and I need to decide on a good namespace schema.  I'm thinking of projecting how it's done in Java to JavaScript, for example, having a namespace "com.mycompany.billing" and a class that's in a file like "BillProcessor.js".  In addition, unit testing is vital so I need such a structure that is easy to unit test.</p>

<p>Can somebody suggest a good approach?</p>

<hr>

<p>I think that I came up with a good solution, please advise.  As an example I'll make a billing page.  There are 4 files:</p>

<p>${root}/billing.html - contains an input box for the name on credit card</p>

<p>${root}/js/com/mycompany/common/common.js - initializes logging and error handling</p>

<p>${root}/js/com/mycompany/common/Url.js - class that is used to perform an AJAX call</p>

<p>${root}/js/com/mycompany/aproject/billing.js - initializes things on the billing page</p>

<p>So for example, common.js contains:</p>

<pre><code>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);
      }
});
</code></pre>

<p>Url.js:</p>

<pre><code>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);
}
</code></pre>

<p>billing.js</p>

<pre><code>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) {
           console.log('Error during initialization: ' + e);
      }
});
</code></pre>

<p>billing.html</p>

<pre><code>&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;
</code></pre>
