This is my second article about namespaces, first article became too long, so I decided to write this one as new article.
Idea was to write my method which will load the data from my real estate responsive design hobby application, but for this small example I will just populate one div field.
So, first this is how my HTML look like:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/rs.namespaces.js"></script> <script type="text/javascript" src="/rs.mytest.js"></script> <script type="text/javascript" src="/rs.bootstrapper.js"></script> </head> <body> <div id="hereWillBeSomething"></div> </body> </html>
Then namespaces:
window.rs = window.rs || {};
window.rs.myNameSpace = window.rs.myNameSpace || {};
window.rs.myNameSpace.MyTest = window.rs.myNameSpace.MyTest || {};
These two are easiest part, and I think there is no need to explain.
Next part is rs.mytest.js:
(function(ns){
function MyTest() {
var self = this;
self.myMethod = function (myMessage) {
document.getElementById("hereWillBeSomething").innerHTML = myMessage;
}
}
ns.MyTest = MyTest;
}(window.rs.myNameSpace))
With that code we prepared our method "myMethod" but still we can not use it. Here just notice two lines:
var self = this;
and
ns.MyTest = MyTest;
Now let's check rs.bootstrapper.js, here we will prepare our method "myMethod" to be usable:
(function rsBootstrap(ns){
var init = function () {
var myTest = new window.rs.myNameSpace.MyTest();
window.rs.myNameSpace.MyAnotherTest = myTest;
}
ns.Bootstrapper = { init: init }
}(window.rs));
Here notice that if instead of:
ns.Bootstrapper = { init: init}
we write:
ns = { init: init}
we will not be able to call ns.init...
Now on load event we can do something like:
window.onload = function () {
window.rs.Bootstrapper.init();
window.rs.myNameSpace.MyAnotherTest.myMethod("test")
}
With line:
window.rs.Bootstrapper.init();
we actually prepared our method "myMethod" to be accessible / usable, and we executed our method:
window.rs.myNameSpace.MyAnotherTest.myMethod("test")
Example you can download from here.
Also, this is good article to read, focus on "Using an Object Constructor".