Namespaces in CoffeeScript

It’s probably my .net background but I love structured namespaces.As such I get a sick feeling in my stomach when adding a Javacript method to global or window. It feels dirty like going to the Austin .Net User Group and grabbing 5 slices of pizza instead of 3. (hey there was a ton left over on Monday!)

Ever since I discovered the elegance that is Coffeescript, with it’s multitude of cool stuff like classes, splats, and ruby syntax, I’ve often wondered why no consideration was taken in implementing nice, easy and clean namespaces.

By default CoffeeScript makes every function, class and member inside a file locally scoped to that file. If you need to expose something to you can either attach it to the window object or exports object in CommonJS.

window.foo = 'bar'
window.pair = class
  constructor: (@key, @value) ->

This is all well and great but sometimes (especially when you’re writing your own Core library for an enterprise level web app) you run into collisions with other not so well written libraries – you pull your hair out and eat more pizza.

Debugging and refactoring these types of issues can be a monumental pain, so in an effort to get out ahead of the the problem I set out to find namespacing in Javascript so I could then write it in CoffeeScript.

The first place I looked like any good little developer was Stack Overflow. After two or three hours of derailed fun (so that’s how to use nServiceBus!) I finally came across a link to a blog post by Angus Croll – which also happens to be the first result when you google ‘namespacing in javascript’! Efficiency 4tw!

The idea is you create global variable (in jQuery it’s ‘$’ for example) and run it through an anonymous method which binds your methods to it, much like a ‘class’ prototype.

var myApp = {};
	(function(context) {
	    var id = 0;

	    context.next = function() {
	        return id++;
	    };

	    context.reset = function() {
	        id = 0;
	    }
	})(myApp);

In case you’re new to Javascript, the (myApp) at the bottom of the method just means to run it automagically when it’s loaded, with ‘myApp’ as the parameter.
Taking this idea and running with it I came up with a pseudo namespace of my own in CoffeeScript.

CoffeeScript–

namespace = (name) ->
  window[name] = window[name] or {}

namespace 'myNameSpace'

myNameSpace.pair = class
  constructor: (@key, @value) ->

Interpreted Javascript–

(function() {
  var namespace;
  namespace = function(name) {
    return window[name] = window[name] || {};
  };
  namespace('myNameSpace');
  myNameSpace.pair = (function() {
    function _Class(key, value) {
      this.key = key;
      this.value = value;
    }
    return _Class;
  })();
}).call(this);

For each new namespace just add “namespace ‘{your_namespace}'” and start using it like where I used it on the ‘pair’ class. Now you can namespace to your hearts content!

So to bring this back into the .net MVC sphere…

How I have {our project} set up is there is an {our project}.Core.coffee with a lot of boiler plate client code like toast, browser caching and tooltips. Then each Area also has an {our project}.{our area}.coffee file which is namespaced to that area. Later when I integrate Spinejs and Knockoutjs, this will make refactoring server code which is heavily dependent on client code ‘much easier‘.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s