Introduction

jsb is a JavaScript library built on top of base2.

It provides four objects:

jsb

The global jsb object.

jsb.behavior

The default behavior object. All behaviors inherit from this object.

jsb.Rule

A Rule connects a behavior to a CSS selector.

jsb.RuleList

A collection of Rule objects.

What is a behavior?

A behavior is an object that defines event handlers.

A behavior may also define additional helper methods and properties.

Here is what a typical behavior might look like:

var mybehavior = jsb.behavior.extend({
  // properties
  highlightColor: "yellow",

  // event handlers
  onmouseover: function(element, event) {
    this.highlight(element);
  },

  onmouseout: function(element, event) {
    this.reset(element);
  },

  // methods
  highlight: function(element) {
    element.style.backgroundColor = this.highlightColor;
  },

  reset: function(element) {
    element.style.backgroundColor = "";
  }
});

You can now attach the behavior to any element:

var hoverThingy = document.getElementById("hoverThingy");
mybehavior.attach(hoverThingy);

Once the behavior is attached to an element it will begin to receive events.

What is a Rule?

A Rule connects a CSS selector to a behavior:

new jsb.Rule("#hoverThingy", mybehavior);

jsb will now automatically attach elements with an ID of "hoverThingy" to the mybehavior object. It will do this almost immediately. The jsb rule engine will constantly scan the document looking for matching elements. It will even do this while the document is loading. It does not wait for the DOMContentLoaded event.

The Rule constructor will also take an object literal to define a behavior:

new jsb.Rule("#clickable", {
  onclick: function() {
    alert("You clicked me.");
  }
});

All rules are "live" — new matching elements will be automatically attached.

You may also create Rules that reference external behaviors.

What is a RuleList?

A RuleList is a collection of Rules:

new jsb.RuleList({
  "input.slider": ui.slider,

  "input.spinner": ui.spinner,

  "input.progressbar": ui.progressbar,

  "textarea.editor": "/assets/js/editor.js#editor",

  "#my-button": {
    onclick: function(element, event) {
      // do something
    }
  }
});