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.
