An open API service indexing awesome lists of open source software.

https://github.com/mostlygeek/extendable.js

A library for creating a JavaScript namespace.
https://github.com/mostlygeek/extendable.js

Last synced: 4 months ago
JSON representation

A library for creating a JavaScript namespace.

Awesome Lists containing this project

README

          

merge.js
========
Benson Wong

About
-----
Extendable.js is a simple JavaScript library for organizing a JavaScript
project. Its design is inspired by the provides() functionality of the
Facebook connect-js project: https://github.com/facebook/connect-js.

The design philosophy is to simplify managing, developing and debugging a
browser based JS application. Extendable.js makes it easy to construct and
organize functionality.

Features
--------

- Simple pattern for creating JavaScript namespaces
- Simple pattern for traversing the tree
-- this.ROOT points to the top of the namespace
-- this.parent points to one level up
- Event emitting functionality based off of node.js EventEmitter interface

Production Deployment
---------------------

- Merge all of your JavaScript source together
- Run them through a compressor like UglifyJS, jsmin, Google's closure
compiler, Yahoo's JS compressor, etc.

Usage
-----

Documentation is a little sparse right now. However, check out qunit/tests/.
Much of the framework has a unit test for it and should decent usage
examples.

Basic Example
~~~~~~~~~~~~~

----
var App = new Extendable();
App.extend("My.Fantastic.Namespace", {
foo : function() {
return "bar";
}
});

App.My.Fantastic.Namespace.foo(); // returns "bar"
----

Modularizing Functionality into Separate Files
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

----
// file: src/js/main.js
App = new Extendable({ // <1>
me : 'App'
});

// file: src/js/UI.js // <2>
App.extend('UI', {
// UI related functionality
});

App.extend('UI.misc', {
// app.UI.misc.x functionality
});

----

<1> Create the core of the namespace in a main.js file. This file should
be loaded first.

<2> Add more functionality to the namespace in separate JS files.
This will simplify debugging and modularize code.

Every node is an instance of Extendable()
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

----
var a = new Extendable({
name : 'a'
});

a.extend('b', { name : 'b' } );
a.b.extend('c.d.e.f.g', { name : 'g' });

alert(a.b.c.d.e.f.g.name); // pops up "g"
----

Extendable() instances behave like an EventEmitter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

----
a = new Extendable();
a.on('newNumbers', function(x, y) { // <1>
alert("I always run: " + (x + y));
});

a.once('newNumbers', function(i, j) { // <2>
alert("I only run once: " + (i + j));
});

a.emit('newNumbers', 1, 3); // <3>
a.emit('newNumbers', 4, 5);

a.extend('b.c.d', {});

a.b.c.d.on('boom', function() { // <4>
alert('KABOOM');
});
a.b.c.d.emit('boom');
----

<1> add new listeners to events with on(eventName, callback)

<2> listeners registered with once() are only triggered one time

<3> emit events with emit(eventName, [arg1], [arg2], [...]),
arguments can be passed arbitrarily.

<4> all nodes are instances of Extendable which means they can all
have their own event emitters.

Listener Context
~~~~~~~~~~~~~~~~

Listers are triggered in the context of their calling object. This gives
them convenience access to the calling object through 'this'.

----
var a = new Extendable({
me : 'a'
});

a.extend('b.c', {
me : 'c'
});

a.b.c.on('test', function() {
alert(this.me); // pops up "c"
});

a.b.c.emit('test');
----