Balloons.js

Balloons.js is an event-based JavaScript library to build front-end components or widgets.

Benefits:

• Dependency-free.
• Just 983 bytes (min & gzip).
• Uses vanilla JavaScript.
• Made it with love.

API

Table of contents

• Q.define()
• Q.emitter()
• Q.mediator()
• Q.clone
• Q.extend
• Q.inherit

### Q.define([parents], members) Defines new components constructors.

• parents (optional): [Array] - An optional collection of constructors to inherit.
• members: [Object] - A given members to be attached to component's prototype.

// Defines a Foobar component that inhertis from Foo and Bar constructors.
var Foobar = Q.define([Foo, Bar], {
    'name': 'Foobar',
    'init': function () {
        console.log(this.name);
    },
    'sayFoobar': function () {
        console.log('foobar');
    }
});

// Creates a new instance of Foobar component.
var foobar = new Foobar();

Q.emitter([component])

Creates a new instance of an Event Emitter or adds observer methods to a given component.

• component (optional): [Function] - A given constructor function.

// Creates a new instance of Emitter.
var emitter = Q.emitter();

// Add observer methods to component Foo.
Q.emitter(Foo);

Q.emitter#on(event, listener, [once])

Adds a listener to the collection for a specified event.

• event: [String] - The name of the event you want to add.
• listener: [Function] - Listener you want to add from given event.
• once (optional): [Boolean] - Indicates if the given listener should be executed only once.

emitter.on('live', listener);

Q.emitter#once(event, listener)

Adds a one time listener to the collection for a specified event. It will execute only once.

• event: [String] - The name of the event.
• listener: [Function] - Listener you want to add from the given event.

emitter.once('live', listener);

Q.emitter#off(event, listener)

Removes a listener from the collection for a specified event.

• event: [String] - The name of the event.
• listener: [Function] - Listener you want to remove from the given event.

emitter.off('live', listener);

Q.emitter#getListeners(event)

Returns all listeners from the collection for a specified event.

• event: [String] - The name of the event.

emitter.getListeners('live');

Q.emitter#emit(event, [arg1], [arg2], [...])

Execute each of the listeners collection in order with the given parameters. All emitters emit the event newListener when new listeners are added.

• event: [String] - The name of the event you want to emit.

emitter.emit('live', 'data1', 'data2');

Q.mediator

An object that encapsulates how a set of objects interact. Q.mediator implements the Mediator Pattern in JavaScript. (Read more).

Q.mediator has the same methods as an instance of Q.emitter().

### Q.clone(obj) Returns a shallow-copied clone of a given object.

• obj: [Object] - A given object to clone.

var foo = {
    'baz': 'qux'
};

var bar = Q.clone(foo);

### Q.extend(destination, from) Extends a given object with properties from another object.

• destination: [Object] - A given object to extend its properties.
• from: [Object] - A given object to share its properties.

var foo = {
    'baz': 'qux'
};

var bar = {
    'quux': 'corge'
};

Q.extend(foo, bar);

Q.inherit(child, uber)

Inherits prototype properties from uber into child constructor.

• child: [Function] - A given constructor function who inherits.
• uber: [Function] - A given constructor function to inherit.

function Bar() {
    // Some code here
}

function Foo() {
    // Some code here
}

Q.inherit(Foo, Bar);

Development setup

1. Install Git and NodeJS.

2. Open your terminal and clone balloonsjs/balloons by running:

    $ git clone git@github.com:balloonsjs/balloons.git
   

3. Now go to the project's folder:

    $ cd balloons
   

4. Install its dependencies:

    $ npm install
   

5. Install grunt-cli:

    $ npm install grunt-cli -g
   

6. Develop! :)

## Grunt tasks

• grunt dev: Builds a development version.
• grunt test: Runs Jasmine tests.
• grunt dist: Creates a distrubution version of Balloons. You should find two files: .dist/Q.js and .dist/Q.min.js.

## Maintained by

• Guille Paz (@pazguille)
• Her Mammana (@hmammana)
• Lean Linares (@lean8086)

## License Licensed under the MIT license.

Copyright (c) 2014 BalloonsJS.