Home

DUI is the Digg User Interface Library. We’ve written a lot of JavaScript tools to make our site more badass, and we figured that you might find them useful too. Over time we’ll be making more and more of our toolkit free as in beer, so stay tuned.

Our first addition to DUI is DUI.Class, which adds OOP patterns to jQuery, including namespacing and robust prototypal inheritance. It should help you keep your JavaScript organized.

Here’s some example code to get you started (Read the docblocks in DUI.js if you want the full story):

Make a class

Here’s your basic hello world.

var MyClass = new DUI.Class({
    init: function(arg) {
        alert(arg);
    }
});

//Alerts "Hello world!";
var mc = new MyClass('Hello world!');

//Last argument is the static flag
var MySingleton = new DUI.Class({
    alert: function(arg) {
        alert(arg);
    }
}, true);

//Alerts "Bienvenue, tout le monde!";
MySingleton.alert('Bienvenue, tout le monde!');

Namespaces

DUI.Class.prototype.ns is a basic setter/getter. We simplified the API a lot from the previous version. Note that for simplicity’s sake ns doesn’t interact with the prototype at all.

//Returns undefined -- ns doesn't read to or write from the prototype
MyClass.ns('init');

//Returns MySingleton.alert
MySingleton.ns('alert');

//Creates static class MyClass.foo, sets and returns MyClass.foo.bar = 1
MyClass.ns('foo.bar', 1);

//Also returns 1
MyClass.ns('foo.bar');

//Leaves MyClass.foo as is, appends MyClass.foo.baz and returns 'hey'
MyClass.ns('foo.baz', 'hey');

Global namespaces

We added DUI.global because there isn’t currently a way to look deep into a set of nested Objects without either risking a ReferenceError or checking each level manually.

//Equivalent to window.ns('MyClass.foo.quux', {})
DUI.global('MyClass.foo.quux', {});

//Returns undefined
DUI.global('Daves.not.here.man');

//Creates nest of singletons Daves.not.here, sets Daves.not.here.man to 1 and returns it
DUI.global('Daves.not.here.man', 1);

//In contrast: Throws a ReferenceError unless Daves.not.here exists. Pretty handy, right?
Daves.not.here.man = 1;

//Accepts a namespace + context array as well
var someReference = {
    foo: {
        bar: 1
    }
};
DUI.global(['foo.bar', someReference]) === 1;

Ask an Object if it’s a class

MyClass.constructor == Function isn’t all that helpful, as it turns out.

//False
DUI.isClass('I am a String');

//True
DUI.isClass(MyClass) && DUI.isClass(MySingleton);

//False, MyClass is not static
DUI.isClass(MyClass, true);

//True, MyClass is dynamic
DUI.isClass(MyClass, false);

//True, MySingleton is static
DUI.isClass(MySingleton, true);

//C-C-C-Combo!
DUI.isClass(DUI.global('MyClass.foo'));

Iterate over a class

When the DontEnum bit is writable, we’ll use that instead. Until then, we’ve rolled our own.

//Same as jQuery.each(MyClass.foo, ...);
MyClass.foo.each(function() {
    alert(this);
});

//MyShyClass.baz will not be enumerated
var MyShyClass = new DUI.Class({
    foo: 1,
    bar: 2,
    baz: 3,
    dontEnum: ['baz']
}, true);
MyShyClass.each(function(key) {
    //You won't see "baz, 3"
    alert(key + ', ' + this);
});

Create a class from another class’ prototype

DUI.Class.prototype.create is how every class is made. Here you’re just calling it manually. MyClass is copied to MyNewClass, then any additional args are added, overwriting as needed.

Remember: Once a class is created, we don’t operate on its prototype again. The create method operates exclusively on MyClass or MySingleton, not MyClass.prototype or MySingleton.prototype.

MyClass.prototype.blarf = 1;

MyClass.create('MyNewClass', {
    blarf: 11
});

MyClass.MyNewClass.prototype.blarf === 11 && MyClass.prototype.MyNewClass === undefined;