Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A OOP Library for Underscore.js inspired by Ruby
Branch: master
Pull request Compare This branch is 1 commit behind ShiftSpace:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


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() { = "foo"; = "bar";

MyClass.prototype.baz = function() {

MyClass.prototype.woz = function() {

Using Underoop.js you can instead write the following:

var MyClass = _.Class({
    initialize: function() { = "foo"; = "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.


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 even if it takes no arguments.


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.


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 ;)

Provided Mixins

Underoop.js comes with two convenient modules. Events allows setting up custom events between objects. The other, Options, allows you to to parse data attributes on elements to passed onto instance constructors. This makes it easy to have your script automatically instantiate widgets from markup.

<div data-your-ns-prop-a="Asset"


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.

Something went wrong with that request. Please try again.