Overview

SLAB is a cross-browser Javascript library that implements ECMAScript and DOM fixes and enhancements to promote standards-based, browser-agnostic web-development.

SLAB upgrades the browser scripting environment to support the following features:

Notes:
  1. Array generics are non-standard
  2. bind() only accepts one argument - the target of the bind
  3. There are limitations for getter/setter functions on browsers that don't have object.__defineGetter__, etc (mainly IE 6 & 7).
  4. The progress event is non-standard on document objects

Example

A simple SLAB enabled web-page could look like this

<html>
 <head>
  <!-- SLAB should be included before other scripts -->
  <script src="http://dist.meekostuff.net/SLAB/0.7-default/SLAB.js"></script>1,2
  <script>
/*
 * ECMAScript enhancements are available
 * DOM Prototypes are available
 * Custom DOM methods should be implemented before initializing DOM system
 */
HTMLFormElement.prototype.encode = function() {
 var txt = "";
 Array.forEach(this.elements, function(el) {
  if (el.name) txt += el.name + ":" + encodeURIComponent(el.value) + "\n";
 });
 return txt;
}

/*
 * Initialize the DOM system
 */
Meeko.stuff.domSystem.initialize(); 3

/*
 * Standard DOM interfaces now available on window and document,
 * and are (almost always) automatically available on elements
 */
var onSubmit = function(event) {
 var form = event.target;
 var rc = confirm("Submit this data now?\n" + form.encode());
 if (!rc) event.preventDefault();
}

document.addEventListener("submit", onSubmit, false);
  </script>
 </head>
 <body>
  <form action="" method="GET">
   <label>First name <input type="text" name="firstName" /></label><br />
   <label>Last name <input type="text" name="lastName" /></label><br />
   <input type="submit" />
  </form>  
 </body>
</html>
Notes:
  1. You can also link to a specific release or snapshot of the library.
  2. You could also download the library to your server and include it from there.
  3. DOM System initialization is triggered when the body element enters the document (if manual initialization hasn't occurred before).

This example adds an encode() method to all form elements and adds an event-listener for submit-events that requests user-confirmation of form-submission.

Warnings

Just-in-time Element binding

SLAB doesn't apply fixes and enhancements to elements at document load, which would potentially involve every element in the document. Instead it attempts to guarantee that elements are fixed before your code references them. This is done by over-riding DOM methods and properties for the accessing of elements, such as document.getElementById(), document|element.querySelectorAll() and element.children. The following accessors are NOT supported:

Some accessors, such as document|element.querySelectorAll() and element.children, return NodeList or HTMLCollection objects. Elements in these collections must be accessed with the item() method. e.g. element.children.item(index). SLAB does NOT support the commonly used array-notation, and, where possible, prevents access using array notation so that, element.children[index], for example would return null.

Generic Array methods filter, forEach, every, some are provided that can accept modified element collections.

No inline event handlers

SLAB does NOT support inline event handlers, e.g. element.onclick = function() { ... }.

Features

SLAB upgrades the browser scripting environment with support for a subset of the APIs defined in the following standards:

Licensing

SLAB is available under the Creative-Commons Attribution, No-Derivatives license. If you aren't sure whether that applies to your intended usage then contact me for specific approval. The following list are guides for some specific scenarios:

Long-term licensing is yet to be decided - please check the license conditions of new releases before use.