Introduction to Underoop.js

Underoop.js is a Underscore.js mixin that adds some handy functions for OOP style development. This style of development is particulary useful when bulding extensible, loosely coupled components that are consistently and logically structured around some data. I also wanted to create a set of extensions that integrate well with Underscore’s handy functional operations on JavaScript Objects and Arrays.

Defining new Classes

Often you want OOP class-like things but writing your objects in the following manner is tedious:

var MyClass = function() {
    this.foo = "foo";
    this.bar = "bar";
};

MyClass.prototype.baz = function() {
    ...
}

MyClass.prototype.woz = function() {
    ...
}

Using Underoop.js you can instead write the following:

var MyClass = _.Class({
    initialize: function() {
       this.foo = "foo";
       this.bar = "bar";
    },

    baz: function () {
    },

    woz: function() {
    }
});

Defining Modules

Often you’ll have a chunk of functionality that does not belong to a particular class. You can define a set of methods like so:

var Events = _.Module({
    addEvent: function(type, fn) { ... },
    removeEvent: function(type, fn) { ... },
    removeEvents: function(type) { ... },
    fireEvent: function(type, data) { ... }
});

And “mixin” in this functionality easily:

var Foo = _.Class({
    includes: [Events],
    initialize: function () {
        ...      
    } 
});

Rubyists will find this familiar.

Messaging

Selectors are pretty useful, especially at cutting down the amount of typing. All methods of a Class are added as helper functins to an object _sel so you can use them with Underscore’s excellent interfaces to the JavaScript collections.

var Foo = _.Class({
  initialize: function(z) {
    this.z = z;
  },
  add: function(x, y) {
    return [x, y, this.z].join("");
  }
});
var Bar = _.Class({
  initialize: function(z) {
    this.z = z;
  },
  add: function(x, y) {
    return x + y + this.z;
  }
});

var a = new Foo("cool!");
var b = new Bar(6);

_([a, b]).map(_sel.add(4, 5));

Take note that for any method foo you will need to write _sel.foo() even if it takes no arguments.

Inheritance

Underoop does not support inheritance. Inheritance breaks miserably under AJAX requests without a lot of ugly hacks. After many years of OOP I’ve come to the conclusion that inheritance is a bug. Clojurians and Haskellers agree. Use Modules.

Caveats

Name clashes are always a concern between Class method names, Class instance vars, Module method names, and Module instance vars. Underoop can’t solve these problems without adding a lot of incidental complexity for you and myself. However JavaScript private scope, lookup tables, and Underscore’s excellent _.unqiueId can work wonders for your particular usecase ;)

Props

The design of this library is drawn heavily from MooTools. If you work in an environment where you can control all of the JS I heartily recommend it. Otherwise jQuery + Underscore + Underoop will have to do.