Javascript converting to namespace and calling functions

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.

WickyNilliams · Accepted Answer · 2011-08-12 11:11:10Z

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

Billy Moon · Accepted Answer · 2011-08-12 10:33:25Z

// choos a namespace name that will not conflict with existing global variables
var myNS = {
        toggleComments: function(){
            $("comments-section").hide();
            $("comments-button").click(function (){
                // blah
                return false;
            });
        },
        anotherFunc: function(){
            return "something";
        }
}

// called like this
myNS.toggleComments();
alert( myNS.anotherFunc() );

Additionally, you should try to contain your code in an anonymous self invoking function. This means you can have nothing in the global namespace, therefore no risk of pollution.

// other peoples/modules code
var myVariable = "whatever";

// anonymous function for your self contained code
(function(){
var myVariable = "inside anonymous function";
alert(myVariable);
})() // the empty brackets envoke the anonymous function

// still retains value from before your self envoking anonymous function
alert(myVariable);

Collectives™ on Stack Overflow

Javascript converting to namespace and calling functions

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