Dou NPM | npm.io

dou

Light-weight javascript module framework (Inspired by flight - A component-based, event-driven JavaScript framework from Twitter http://flightjs.github.io/)

'dou' means ..

都 (all) - Chinese pinyin
Do you .. - English

Features

Advice
Mixin
Event
Property
Life Cycle

Getting Started

It supports packages for nodejs, bower & rails.

As a gem for rails provides:

dou-rails

As a package for nodejs provides:

As a package for bower provides:

Install the nodejs module with:

npm install dou --save

Install the bower module with:

bower install dou --save

Configure for requirejs as follow:

requirejs.config({
	...
	paths: {
		'dou'           : 'bower_components/dou/dou'
	},
	shim: {
		dou: {
			exports: 'dou'
		}
	},
	...
});

Install the rails module with Gemfile

gem "dou-rails"

And run bundle install. The rest of the installation depends on whether the asset pipeline is being used.

Rails 3.1 or greater (with asset pipeline enabled)

The dou-rails files will be added to the asset pipeline and available for you to use. If they're not already in app/assets/javascripts/application.js by default, add these lines:

//= require dou-min

Usage

Define Class

var dou = require('dou');

var Super = dou.define({
	/* members are class members (methods or variable), not instance members */
	members: {
		methodA: function() {...},
		methodB: function() {...}
	}
});

var inst = new Super();

inst.methodA();

Extend

var Clazz = dou.define({
	extend : Super,
	members : {
		methodC: function() {...}
	}
});

var inst = new Clazz();

inst.methodA();
inst.methodB();
inst.methodC();

Constructor

var Clazz = dou.define({
		extend : Super
	}, 
	/* constructor */
	function(arg) {
		// construction goes here
	}
);

var inst = new Clazz(arg);

Mixin

function mixin1() {
	/* 'this' is prototype of Target Class. in this case Clazz.prototype */
	this.methodD = function() { return 'foo'; };
}

function mixin2() {
	/* 'this' is prototype of Target Class. in this case Clazz.prototype */
	this.methodE = function() { return 'bar'; };
}

var Clazz = dou.define({
	extend : Super,
	mixins : [mixin1, mixin2]
});

var inst = new Clazz();

inst.methodD();
inst.methodE();

Advice

function mixin() {
	this.before('methodA', function(arg) {
		/* before logic */
		...
	});
	this.after('methodB', function(arg) {
		/* after logic */
		...
	});
	this.around('methodC', function(origin, arg) {
		/* before logic */
		...
		
		/* origin logic */
		origin(arg);

		/* after logic */
		...
	});
}

var Clazz = dou.define({
	extend : Super,
	/* dou.with.advice should be mixed in. */
	mixins : [dou.with.advice, mixin]
});

var inst = new Clazz();

inst.methodA('abc');

Event

var Clazz = dou.define({
	mixins : [dou.with.event],
	members : {
		test: function(x) {
			this.trigger('test', x);
		}
	}
});

var inst = new Clazz();

inst.on('test', function(e) {
	console.log(e);
});

inst.test(1);

inst.off('test');

Property

var Clazz = dou.define({
	/* dou.with.property includes dou.with.event mixin */
	mixins : [dou.with.property]
});

var inst = new Clazz();

inst.on('change', function(e) {
	console.log(e.before);
	console.log(e.after);
});

inst.set('attr1', 'value1');

inst.set({
	attr1 : 'value1',
	attr2 : 'value2'
});

var val = inst.get('attr1'); // val should be 'value1'

Life Cycle

var Clazz = dou.define({
	/* dou.with.lifecycle includes 2 mixins (dou.with.property and dou.with.event) */
	mixins : [dou.with.lifecycle],
	members : {
		defaults : {
			attr1: 'A',
			attr2: 'B'
		}
	}
});

var inst = new Clazz();
inst.initialize({
	attr2: 'b'
});

var val1 = inst.get('attr1'); // val1 should be 'A'
var val2 = inst.get('attr2'); // val2 should be 'b'