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

Possible duplicate of Splitting a javascript namespace into multiple files — Ciro Santilli OurBigBook.com
– Ciro Santilli OurBigBook.com, Commented Oct 18, 2016 at 12:35

ajm · Accepted Answer · 2010-06-02 18:11:29Z

8

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.

answered Jun 2, 2010 at 18:11

ajm

20.2k3 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian M. Hunt · Accepted Answer · 2012-08-18 13:45:27Z

2

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

answered Aug 18, 2012 at 13:45

Brian M. Hunt

84.4k76 gold badges235 silver badges349 bronze badges

Collectives™ on Stack Overflow

Add multiple entities to JavaScript namespace from different files

abc.js

def.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

abc.js

def.js

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related