Namespaces are one honking great idea — let’s do more of those!

After a few years of mostly server-side development I’m getting back into JavaScript, and for the first time I feel like I’m approaching it as an actual engineering challenge rather than a bunch of quick hacks. As our JS code base is growing I’m breaking things up into namespaces to keep things manageable.

Though JavaScript has no built-in notion of “modules” like many other languages you can use objects to create namespaces, which in their simplest form would look something like:

1
2
3
4
5
6

util = {
  my_func: function() {
    alert('my_func');
  }
};
util.my_func();

However, creating nested namespaces like “myapp.util.text” gets a bit ugly with that approach. I liked the basic API of Namespace.js, though I didn’t want any of the additional features like remote loading, so I figured I could make something much simpler and smaller.

You can first “declare” a namespace and then assign attributes like:

1
2
3
4

Namespace('myapp.ui');
myapp.ui.ToggleButton = function() {
  // ...
};

Or pass in the attributes to include in that namespace:

1
2
3
4

Namespace('myapp.util.text', {
  some_func: function() {
  }
});

Here’s the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Namespace(name, attributes) {
  var parts = name.split('.'),
      ns = window,
      i = 0;
  // find the deepest part of the namespace
  // that is already defined
  for(; i < parts.length && parts[i] in ns; i++)
    ns = ns[parts[i]];
  // initialize any remaining parts of the namespace
  for(; i < parts.length; i++)
    ns = ns[parts[i]] = {};
  // copy the attributes into the namespace
  for (var attr in attributes)
    ns[attr] = attributes[attr];
}

This is of course much smaller than the 16kb of Namespace.js, so as an additional challenge I decided see if I could compact it to fit the 140 character limit of a Twitter status message :) (Note: the Twitter version used jQuery’s $.extend function to copy the attributes into the namespace which I later replaced with the framework-independent version above.)

I’ll follow up later with some tricks I’ve been thinking about to “import” stuff from other namespaces.