jj

A flexible javascript framework

jj is a small javascript frameworks, which uses some unique features of javascript (the class-free, prototypal nature, object references etc.), to give you a fast boilerplate for writing elegant code. It helps, to avoid any pollution of the global namespace by giving you a powerful registry. Furthermore, jj provides you with a flexible way to deal with objects through useful utilities for dealing, creating and copying object in a way, that's fun and the "real" javascript way. You can use almost every of your favourite module as jj plugin. The core itself has no dependencies.

Quick Example

jj.setPlugin('foo', {
  test : function(){
    console.log(this.get('test');
  },
  setGreeting: function(greeting){
    this.get('global').set('greeting', greeting);
  }
);

jj.setPlugin('bar', {
  init: function(){
    this.trigger('greet');
  }
)

var foo = jj.foo().
  set('test', 'Local registry entry').
  test();
//output "Local registry entry"

foo.setGreeting('Hello world!');  

jj.bar().on('greet', function(){
  console.log('Bar says: ' + this.get('global').get('greeting');
});
//output "Bar says: Hello world!"

Why another framework?

For many years, the usual way to create "class like" objects has been, to create a constructor function, add methods to the function's prototype property, and then use the new operator for creating a new "instance". The advantage of this strategy is clearly, that most developers are familiar with class based languages and the learning curve is steep. The drawback has been exactly described by Keith Peters:

JavaScript is not a class-based language, but a prototype-based one. Code reuse is done not by making class templates that are used to instantiate objects, but by creating new objects directly, and then making other new objects based on existing ones.

Not only does the constructor approach hide the prototypal nature of javascript, but also the power and simplicity of prototypes. To use objects, not classes, for inheritance is - from my point of view - a strategey which fits perfectly to javascript and the code, we are writing with it. The ECMAScript 5th Edition Object.create made it very simple, to create new objects based on prototypes.

Of course there are same pitfalls. For instance, if your object has other object as properties and you use it as prototype, editing the properties in the newly created one will also change the properties in the original object, because they are just references. jj will help you. It makes heavy use of Object.create for superfast, memory-saving "copying" and editing of objects, but eliminates the known problems. You don't have to write obj.prototype ever again!

API

Registry

jj gives you a simple registry, to hold your objects and plugins.

set(name, value, global)

Sets a value to the registry

Arguments

• name - String as registry key
• value - An object
• global - A boolean, which indicates, if you want to add the entry to the global registry. Default to false.

Example

jj.setPlugin('foo', {});

//Set to global registry
jj.set('movie', 'E.T.');
jj.foo().set('movie', 'Jurassic Parc', true);
jj.get('movie'); //Output "Jurassic Parc"

//Set to local registry
jj.set('movie', 'E.T.');
jj.foo().set('movie', 'Jurassic Parc');
jj.get('movie'); //Output "E.T."

Plugins

setPlugin(name, object)

Set an object as jj plugin..

Example

jj.setPlugin('myPlugin', {
  getBar : function(){
    return this.get('bar');
  },
  foo : function(){
    console.log('foo method executed');
  }
);

jj.myPlugin().foo();
//console.log = 'foo method executed';

If you set a constructor function, jj will create a new instance.

jj.setPlugin('request', XMLHttpRequest);

var request = jj.request();
request.open('https://github.com/mellors/jj');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

jj is every plugins prototype. So, you can mix native methods with methods of your plugin.

var bar = jj.
  myPlugin().
  set('moview', 'E.T.').
  getBar();
//bar = 'A new value';

If you set a plugin globally (via jj.setPlugin), you can use it in other plugins as well.

jj.setPlugin('secondPlugin', {
  getMovie : function(){
    return this.get('movie');
  }
);

var moview = jj.
  myPlugin().
  set('moview', 'Jurassic Park').
  secondPlugin().
  myPlugin().
  getMoview();

//moview = 'Jurassic Parm';

Registry

set(name, object, local)

Via jj.set you can add an entry to the registry of jj.