Please enable JavaScript to view the comments powered by Disqus.

Organizing code with namespace in JavaScript

A. Preface:

Sometime, we want to use functions or properties globally. But when there are too much global variables, they may be bring a lot of trouble - naming collisions. We can use namespace to minimize number of variables. There are many solution to implement namespace, we’ll cover some simple approaches which are easy to use and understand :D

B. Namespace:

B.1. Use an object as a namespace:

// Create global namespace MYAPP
var MYAPP = MYAPP || {};

// Put function into namespace
MYAPP.sayHello = function () {
    alert("Hello!");
}

 

Why var MYAPP = MYAPP || {} ?

Let take a look at line 2 : why we use var MYAPP = MYAPP || {} instead of var MYAPP = {} ?

We may write many javascript files, and then combine them or not. There is a good chance that a namespace is defined in many files. So we must ensure that the namespace object in the other javascript files is not damaged.

Example:

In english.js:

// Create global namespace MYAPP
var MYAPP = {};

// Put function into namespace
MYAPP.english = {};
MYAPP.english.sayHello = function () {
    alert("[english namespace] Hello!");
}

 

In vietnamese.js:

// Create global namespace MYAPP
var MYAPP = {};

// Put function into namespace
MYAPP.vietnamese = {};
MYAPP.vietnamese.sayHello = function () {
alert("[vietnamese namespace] Xin chao!");
}

 

And then combine them in NameSpaceExample.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Namespace Example</title>
<script src="english.js" type="text/javascript"></script>
<script src="vietnamese.js" type="text/javascript"></script>
<script>
MYAPP.english.sayHello();
MYAPP.vietnamese.sayHello();
</script>
</head>
<body>
</body>
</html>

 

We’ll get error at line 7 MYAPP.english.sayHello(); Now we just need to change small code

var MYAPP = {}; >>> var MYAPP = MYAPP || {};
MYAPP.english = {}; >>> MYAPP.english = MYAPP.english || {};
MYAPP.vietnamese = {}; >>> MYAPP.vietnamese = MYAPP.vietnamese || {};

 

B.2. Private/ Public method property and self-executing method

In C#, Java,… we alway have property modifier such as: public, private, protected. Now let’s implement it in javascript.

var MYAPP = MYAPP || {}

MYAPP.publicMethodExample = function () {

//private property
var userName = "Dang";

//private method
function toUpperName() {
return userName.toUpperCase();
};

//public method
return { sayHello: function () {
alert("Hello, " + toUpperName());
}
}
} (); // insert () to make self-executing function

MYAPP.publicMethodExample.sayHello();

 

The properties, methods in return will be public variable. One important thing to remember is putting () right after we define a function. It’ll make our function become a self-executing function (function execute immediately).

How our code works?

var MYAPP = function(){...} ();

 

First, the function is executed and return sayHello. Then sayHello will be assigned to MYAPP.