jquery-class.js

Class-like object by jQuery

Features

• Create class-like object by jQuery method
• Implement features using use prop (module name string, object, function)
• Add module by extending $.Class.modules
• Manage modules by $.exports, $.require

Get Started

Pass the object, which contains any properties you want, to $.Class, then it returns class-like object. initialize function will run when the object is initialized by 'new'.

var App = $.Class({

	// Implement features
	_extends: ["events", "attributes"],

	// Constructor
	_initialize: function(name, age){
		this.attr({
			name: name,
			age: age
		});
	},

	// its own method
	hello: function(){
		return "Hello, my name is "
			+ this.attr("name")
			+ ", "
			+ this.attr("age")
			+ " years old.";
	}
});

var app = new App("John", 23);
app.hello(); // "Hello, my name is John, 23 years old."

Extends

_extends array accept string (as in $.Class.modules), object or function as its value.

var Foo = $.Class({ ... });
var Bar = function(){ ... };
var Baz = { ... };

var App = $.Class({
	_extends: ["events", "attributes", Foo, Bar, Baz],
	_initialize: function(){ ... }
});

Modules

Some modules having basic features are defined at $.Class.modules. You can implement them quickly by adding module name as string to use array.

Common

Common module is always imported to class. This initialize jQuery object named $el using el as selector or HTML element, implement features specified in use array.

• delegate() - Bind function to the instance

var App = $.Class({
	el: "#my-widget",
	_initialize: function(){ ... }
});

Use delegate to bind function to the instance. delegate accept string name, array or regular expression as its first argument.

var App = $.Class({
	_initialize: function(){
		this.delegate("onClick");
		something.on("click", this.onClick);
	},
	onClick: function(e){
		// `this` is this instance
	}
});

Methods which started with _ are automatically delegated.

Events

Implement jQuery event features (on, off, trigger) as its own.

• on() - Alias to jQuery.on
• off() - Alias to jQuery.on
• trigger() - Alias to jQuery.trigger

var App = $.Class({
	_extends: ["events"]
});
var app = new App();
app.on("state", function(){ ... });
app.trigger("state");

Config

Config module implements features to configure values in options.

• _options - Object to specify default values
• options - Object to store values
• config() - Setter or getter method

var App = $.Class({
	_extends: ["config"],
	_options: {
		name: null,
		age: null
	}
});

var app = new App();

app.config("name", "John");
app.config({ age: 23 });
app.config("name"); // "John"
app.config(); // {"name": "John", "age": 23}

Attributes

Attributes module implements feature to set or get values in attributes. If events module is enabled, "change" event is to be fired when a value changed by setter.

• _attributes - Object to specify default values
• attributes - Object to store values
• attr() - Setter or getter method

var App = $.Class({
	_extends: ["events", "attributes"],
	_attributes: {
		name: null,
		age: null
	}
});

var app = new App();

app.on(app.EVENT_CHANGE, function(){
	// this will run when value changed
});

app.attr("name", "John");
app.attr({ age: 23 });
app.attr("name"); // "John"
app.attr(); // {"name": "John", "age": 23}

Adding Modules

To add more modules to class, extend $.Class.modules. You can initialize the feature with initialize method, it will be called in constructor before initialize of instance runs.

$.extend($.Class.modules, {
	foo: {
		// initialize this feature
		_initialize: function(){ ... }
	}
});

var App = $.Class({
	use: ["foo"],
	_initialize: function(){ ... }
});

Manage modules

Use $.exports to define custom module, $.require to get the instance by module name.

// exports
$.exports("foo", {
	_initialize: function(){ ... }
});

// require
var foo = $.require("foo");

Pass true to 2nd argument of $.require to get new instance forcely.

var bar = $.require("foo", true);

foo ==== bar; // false

Author

mach3 http://github.com/mach3