Let's say I have a namespace like that:
var myNamespace = {
foo: function() {
},
bar: function() {
}
};
What is the best way to split this code into files defining foo and bar separately?
I'm not worried about loading time - I'll concatenate it back into one file before deployment.
At the start of each file:
if(myNameSpace === undefined) {
var myNameSpace = {};
}
File 1:
myNamespace.foo = function()...
File 2:
myNamespace.bar = function()...
// File1:
// top level namespace here:
var myNamespace = myNamespace || {};
// File2:
myNamespace.foo = function() {
// some code here...
}
In each file follow this pattern:
(function(nameSpace) {
nameSpace.foo = function() { ... };
})(window.nameSpace = window.nameSpace || {});
This way load ordering is unimportant.
Simple define in seperate files like this:
File 1:
var myNamspace = {};
File 2:
myNamespace.foo = function()...
File 3:
myNamespace.boo = function()...
Just make sure you load the files in the right order.
(function (NS) {
NS.Uber = function Uber() {
this.super = new NS.Super(); // yes, it works!
}; //
}(NS = NS || {}));
// ------------- other file -----------------
(function (NS) {
NS.Super = function Super() {
this.uber = new NS.Uber(); // yes, it will also work!
}; //
}(NS = NS || {}));
// -------------- application code ------------
var uber = new NS.Uber();
console.log(uber.super);
var super = new NS.Super();
console.log(super.uber);
}(NS = NS || {})); see this jsfiddle for example