Introducing SLAB

SLAB is a Standards Layer for APIs in Browsers. It's a Javascript library that provides a standards-based scripting environment for most recent browsers.

Features

Some of the features that SLAB provides (if not already supported by the browser):

New Array methods and generics: every, filter, forEach, map, some
Function.prototype.bind() - binds a function to an object
Experimental support for Object.defineProperty() - specifies getter and/or setter functions for an object property
XMLHttpRequest and DOMParser
DOM prototypes - HTMLElement, etc
element.classList - provides methods to manipulate tokens in the class attribute
document|element.querySelector() and querySelectorAll() - get elements by CSS selector
W3C DOM Event model, including addEventListener(), dispatchEvent(), etc.
DOMContentLoaded and progress events during document load
Experimental support for DOMNodeInserted and DOMNodeRemoved events

SLAB is similar in scope to Dean Edwards' base2 project.

Usage

Incorporating SLAB in your web-page would usually look something like this:

<html>
 <head>
  <!-- SLAB should be included before other scripts -->
  <script src="http://dist.meekostuff.net/SLAB/default/SLAB.js"></script>
  <script>
/*
 * ECMAScript Array, Object and Function 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) + "&amp;";
 });
 return txt;
}

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

/*
 * Standard DOM interfaces now available on window and document,
 * and are 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>

This sample code adds an encode() method to all form elements using the HTMLFormElement.prototype interface, and monitors all submit events using document.addEventListener(). This is unremarkable on Firefox, Safari, Chrome and Opera, but with SLAB it also works on Internet Explorer, even IE6 which has none of DOM prototypes, addEventListener() or bubbling submit events.

Here is a demo of that page in your browser. If you submit the form it should popup a confirmation dialog.

demo1.html

As indicated in the comments for the sample code, there is an order for initializing SLAB:

include the SLAB script
implement additions to DOM prototypes - HTMLElement, etc
initialize the DOM system - Meeko.stuff.domSystem.initialize()
the standard scripting environment is now ready

Warnings

Just-in-time element fixes

SLAB doesn't fix element methods and properties when the document is loaded, rather it ensures that any element is fixed before any code references it. This is achieved by intercepting methods and properties that return element references. SLAB supports all element accessors except:

document.getElementsByTagName()
element.childNodes
element.firstChild
element.lastChild
element.previousSibling
element.nextSibling
element.parentNode

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 undefined). This is by design, the intention being to make code fail nosily when the unsupported notation is used.

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() { ... }.

Other stuff

Project page

SLAB has its own project page with more documentation. I'm using Assembla for bug-reporting and feature-requests - registration is fairly straight-forward if you want to give feedback there.

Distribution

SLAB is currently hosted on the Amazon CloudFront CDN.

You can follow default release with http://dist.meekostuff.net/SLAB/default/SLAB.js or a branch (only 0.7 for now) with http://dist.meekostuff.net/SLAB/0.7-default/SLAB.js. You can also link to individual snapshots. More details on the project page.

Licensing

At this stage SLAB is available under the Creative-Commons Attribution, No-Derivatives license. You can include it with a script element sourcing the original file (see the sample code above), or you can copy it to your server and source it from there.