Namespace schema for JavaScript

Question

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.

Can somebody suggest a good approach?

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:

${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) {
           console.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>

eloquentjavascript.net/chapter9.html seems to go over the topic in depth. — millimoose
– millimoose, Commented Jan 27, 2012 at 19:21
I'd like to suggest you browse through FullCalendar's source code — T I
– T I, Commented Jan 27, 2012 at 19:30
@TomIngram I like what I'm seeing. Do I understand correctly, taking an Object Oriented approach to JavaScript? Hmm, I see that he's not using an automated unit testing approach which is not good for him I think. — SBel
– SBel, Commented Jan 27, 2012 at 19:40
@SBel object orientation is ummm 'interesting' in js especially comparatively to say java, for example afaik var foo = function() { } foo is a object and at the same time can serve as a namespace, I believe it's this whole idea of nesting and scope so perhaps bears a small similarity to inner classes in java. you may find this somewhat interesting. as for a schema I think you could use a similar convention for namespace i.e. var mycomp = {}; mycomp.billing = { /*further nesting of classes*/ } — T I
– T I, Commented Jan 27, 2012 at 21:00
@TomIngram I did not follow everything that you said, take a look at my solution that I edited on top, I think it's good. It uses a class and not a class. — SBel
– SBel, Commented Jan 27, 2012 at 22:36

rusty · Accepted Answer · 2012-01-27 19:20:34Z

2

Most of the time people use the Object Literal pattern to achieve name spacing in JavaScript.

More info: http://msdn.microsoft.com/en-us/scriptjunkie/gg578608

You can "nest" namespaces like so:

var MyCompany = MyCompany || {};
MyCompany.Billing = MyCompany.Billing || {};
// etc...

Another ScriptJunkie article that covers some namespacing stuff: http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

answered Jan 27, 2012 at 19:20

rusty

2,7991 gold badge24 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-04-13 12:40:33Z

0

I'M POSTING THIS QUESTION ON https://codereview.stackexchange.com/questions/8393/approach-to-organizing-javascript-for-an-html-page MAYBE I'LL GET ANSWERS THERE.

edited Apr 13, 2017 at 12:40

CommunityBot

11 silver badge

answered Jan 28, 2012 at 13:02

SBel

3,3597 gold badges34 silver badges49 bronze badges

Collectives™ on Stack Overflow

Namespace schema for JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related