Load class portions on demand with Traits. Keeps stuff clean

application.js

//...
register('tip', '/javascripts/common/elements/tip.js')

//... form + traits
register('form', '/javascripts/common/elements/form/form.js')
register('form-asynchronous', '/javascripts/common/elements/form/traits/asynchronous.js')
register('form-clonables', '/javascripts/common/elements/form/traits/clonables.js')
register('form-validated', '/javascripts/common/elements/form/traits/validated.js', 'tip')

asynchronous.js

//Blah blah, doesnt matter. It's example

Form.Traits.Asynchronous = new Class({
	
	options: {
		request: {}
	},
	
	initialize: function() {
		this.parent.apply(this, arguments)
		
		this.button = this.element.getElement('.button[type=submit]')
		if (this.button) this.button = this.button.retrieve('button')
	},
	
	assignEvents: function() {
		this.parent.apply(this, arguments)
		
		this.element.addEvent('submit', this.submit.bind(this))
		if (this.button) this.button.condition = $lambda(false)
		this.element.set('send', $merge(this.element.retrieve('send:options'), {
			format: 'json'
		}))
		this.element.get('send').addEvents({
			request: function() {
				if (this.button) this.button.spin()
			}.bind(this),
			complete: function() {
				if (this.button) this.button.release()
			}.bind(this)
		})
	},	

	submit: function() {
		this.element.get('send').options.url = this.element.get('action')
		this.element.get('send').options.method = this.element.get('method')
		this.element.send()
		return false
	}
})

form.js

Form = new Class({ //this class doesnt matter
	Implements: [Events, Options],
	
	options: {
		request: {}
	},
	
	initialize: function(el) {		
		this.element = $(el).store('form', this)
		this.assignEvents()
	},
	
	assignEvents: function(){}
})
Form.extend(Traits)
Form.Behaviour = new Hash({ //matches element & tries to getElement against selector to load more traits for the class
	'form-asynchronous': 'form.traited',
	'form-clonables': 'div.clonable',
	'form-multivariant': 'div.variants',
	'form-validated': 'form.validated',
	'form-sensitive': 'form[empty]'
})

gistfile5.txt

<!-- will load dependencies: form, form-asynchronous, tip, form-validated -->
<form action='/sessions' class='traited validated' direction='right' id='signin' method='post'>

integration.js

Orwik.addEvent('domready', function(element) {
	element.getElements('form.traited').each(function(element) {
		using('form', function() {
			Form.for(element) //generates a class for element with required traits
		})
	})
});

Traits.js

//like multiple Extend
Class.Mutators.Inherits = function(self, klasses){
	$splat(klasses).each(function(klass){
		Class.prototyping = klass.prototype;
		var subclass = new klass;
		delete subclass.parent;
		self = Class.inherit(self.prototype || self, subclass)
		delete Class.prototyping;
	});
	return self;
};

Traits = {

        //build class for given element with traits loaded asynchronously
	for: function(element, a,b,c,d) {
		var traits = new Hash
		this.Behaviour.each(function(selector, dependency) {
			var name = dependency.replace(/^.+?-/, '')
			if (element.hasClass(name) || element.match(selector) || element.getElement(selector)) traits.set(dependency, name)
		}, this)
		using(traits.getKeys(), function() {
			var kls = new Class({
				Extends: this,
				Inherits: traits.getValues().map(function(name) { return this.Traits[name.camelCase().capitalize()]}.bind(this))
			})
			element.store('form-class', kls)
			element.store('form', new kls(element, a,b,c,d))
		}.bind(this))
	},
	
	Behaviour: new Hash,
	Traits: new Hash
}