Namespacing your Application JavaScript

While developing a web application which  require JavaScript a standard practice is ti namespace your scripts  objects.

In JavaScript, "Global variables are evil." This is true we are relying more on javascript and to avoid unnecessary headaches namespace your object.

Benefits of namespacing javascripts are :

• Global variables and functions are rarely required.
• Using globals may cause naming conflicts between javascript source files and cause code to break.
• it is a good practice to encapsulate functionality within a single global namespace.
• Debugging would be easier
• Readability 

There are several ways to accomplish this task, some of which are much more complicated than others. T

Approach I :Using properties
The simplest approach is to create a single global object and assign properties and methods to this object.
Creating A Namespace
var MyGloablNameLogin = {}; // global Object cointainer
MyGloablNameLogin.value = 1;
MyGloablNameLogin.increment = function() { MyGloablNameLogin .value++; }
MyGloablNameLogin.show = function() { alert(MyGloablNameLogin .value); }

Approach II: The Module Pattern

var NameSpaceLoginObject = function() {

    var private_var_token_id;

    function private_method() {
        // do stuff here
    }

    return {
        method_1 : function1() {
            // do stuff here
        },

        method_2 : login() {
            // do stuff here
        }
    };
}();

Now call this object:
    new NameSpaceLoginObject().login();


Approach III:bind your namespace method method with Jquery

$.ns = function(namespace, objectToBeReferred) {
    var namespace_parts = namespace.split(".");
    var root_window = window || {};   
    for(var i=0;i< namespace_parts.length;i++) {     
      if(typeof root[namespace_parts [i]] != "object") {
        root[namespace_parts [i]] = (i == namespace_parts.length - 1 && objectToBeReferred) ? objectToBeReferred: {};
      }     
       root_window = root_windlow [namespace_parts [i]];
    } 
    return root_window;
  };

$.ns("com.techyhouse.blogspot.loginObject", myLoginPageObject;
Window object will have following objects:
 Windows-->
Com-->
     techyhouse-->
          blogspot-->
                    loginObject
Now myLoginPageObject can be created using   

 new com.techyhouse.blogspot.loginObject();

Approach IV:Use this as a Namespace Proxy
var myApp = {};
(function() {
    var id = 0;

    this.next = function() {
        return id++;    
    };

    this.reset = function() {
        id = 0;    
    }
}).apply(myApp);   

);

Based on javascript uses and application framework we can decide which approach we should go with for namespacing the window objects.