My favorites | Sign in
Project Home Downloads Issues Source
Project Information
Members
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.

Powered by Google Project Hosting