Add multiple entities to JavaScript namespace from different files

Question

Given a namespaces ns used in two different files:

abc.js

ns = ns || (function () {
   foo = function() { ... };

   return {
      abc : foo
   };
}());

def.js

// is this correct?
ns = ns || {}

ns.def = ns.def || (function () {
   defoo = function () { ... };
   return {
      deFoo: defoo
   };
}());

Is this the proper way to add def to the ns to a namespace? In other words, how does one merge two contributions to a namespace in javascript?

If abc.js comes before def.js I'd expect this to work. If def.js comes before abc.js I'd expect ns.abc to not exist because ns is defined at the time.

It seems there ought to be a design pattern to eliminate any uncertainty of doing inclusions with the javascript namespace pattern.

I'd appreciate thoughts and input on how best to go about this sort of 'inclusion'.

Thanks for reading.

Brian

Answer 1

That would certainly work. Keep in mind, though, that source order will affect your implementation: if def.js ever winds up included before abc.js, your definition of foo and ns.abc will never be executed.

Take a look at YUI's old namespace function for an example: they make sure either use the existing object or a new object initialization, probably for that reason above.

It might very well help you to keep your modules separate with something like this:

ns = ns || {};
ns.abc = function(){ ... }();

and 

ns = ns || {};
ns.def = function() ... }();

That way, each is a separate module, source order doesn't matter, and each has access to its own closure as you have in your example.

Answer 2

As a matter of interest, I discovered AMD and RequireJS and started using that.