Question

I’m a typical web dev that’s used global for everything in JS. I’ve now seen the light and want to convert to namespaces. So on my current project I have a page that has three JS functions (all global currently) that when called assign text to anchors and attach click methods to toggle the visibility of particular divs. Very standard.

So an example function is written as:

function toggleComments(){
   $("comments-section").hide();
   $("comments-button").click(function (){
      blah
      return false;
   });
}

My question is how do I create a namespace to hold these functions and then call them?

I’ve found varying examples but nothing conclusive.

Any help would be great.

Answer 1

billy moon shows a good start, but the problem with using object literals, is that you cannot cross reference other fields/functions/properties.

I much prefer the revealing module pattern (see http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/)

the revealing module pattern combines a self-executing function, an exploitation (of sorts) of closures to provide internal private functions/fields, and allows you to pass params to initialise your namespaced object.

var namespacedObject = function(param) {

    var settings = param || someDefaultSetting, //default if no param supplied
        somePrivateField = "someValue",
        somePublicField = "i'm public";

    //define some method we will later make public
    function toggleComments(){
        $("comments-section").hide();
        $("comments-button").click(function (){
             $(this).value= somePrivateField;
             return false;
        });
    }

    //this is where the magic happens, 
    //return object with all public fields/functions
    return { 
        toggleComments : toggleComments,
        somePublicField : somePublicField
    };

}(someParam);

You can see that the namespaced object contains a private field somePrivateField, which can be referenced from publicly accessible methods. Also, notice i have exposed a public field, and accepted some params which i may use/reference in functions etc (and you can default it to some default if nothing is passed in.

can be used like this:

namespacedObject.toggleComments();
alert(namespacedObject.somePublicField);
alert(namespacedObject.somePrivateField); //undefined - it's private of course!

one reason i like this is that it’s very easy to see what is public/private by just glancing at the object literal returned from the self-executing function

Hope that’s helpful