|
Project Information
Featured
Downloads
|
This is a simple, lightweight modular architecture for dynamic, scalable JavaScript applications, built on jQuery. Applications are created by creating modules, which are tied to an element and may only access their element and child elements. Modules can only communicate by passing signals (with related data), which other modules may or may not listen for. Here's a simple example of a module that's attached to elements with the class 'button' which is destroyed when clicked: Core.createModule('.button', {
name : 'BaseButton',
// Called when the Architecture Core is initialized
init : function (options) {
this.log('button created!');
},
events : {
// Event handler for the 'click' event
click : function () {
this.log('clicked!');
// Send an event to all modules named 'panic'
this.send('panic');
// Delete this module
this.del();
},
// Event handler for the 'destroy' event, which is called when
// the module is destroyed (with this.del() is called).
destroy : function () {
this.log('destroying!');
// Detach the module's context element from the DOM
this.context.detach();
},
// Event handler for the 'panic' event
panic : function () {
// If another button was clicked and destroyed...panic!
this.context.html("Woah! Don't Click Me!");
}
}
});Modules can also inherit from existing modules: Core.createModuleFrom('.button', '.emo-button', {
name : 'EmoButton',
init : function (options) {
// Call the super-module's init method
this._super.init.call(this, options);
},
events : {
// Override the parents 'panic' handler
panic : function () {
this.context.html("Go Ahead! Kill me! I Don't care");
}
}
});There is also a plugin system to work with modules: Core.createPlugin({
init : function (options, modules) {
var results, i;
console.log('Plugin Initialized');
// Find modules that match the selector and remove 'some-class' from them
results = this.find('.some-class');
for (i = 0; i < results.length; i++) {
results[i].context.removeClass('some-class');
}
},
newModule : function (selector, module) {
module.context.addClass('fancy-class');
}
});Once all modules and plugins are loaded you can initialize the framework with: $(function () {
Core.init(options);
});It's important to understand that this framework is not intended to be general purpose: it serves a particularly specific purpose. It's intended to create a lightweight system for dynamic, jQuery powered JavaScript applications. If you don't want to use jQuery or are unfamiliar with it, I'd suggest a more robust solution like Dojo. |