Thursday, November 13th, 2008

reglib: Another CSS based, declarative library

javascript

  1. reg.click("a.popup", function(e){
  2.     window.open(this.href);
  3.     return false;
  4. });
  5.  
  6. /*
  7. ENGLISH TRANSLATION:
  8. I declare, forthwith, that all clicks on <a> elements with
  9. class "popup" shall be handled thusly...
  10. */

This comes from a new library that Greg Reimer of Sun has open sourced called reglib.

He gives us the back story:

Almost a year ago I made all kinds of big talk about releasing a JavaScript lib I was developing for sun.com. This library obviates (some of) the need for what I call the load-traverse-modify methodology of unobtrusive JavaScript:

  • Load: make it your business to know when the DOM has loaded.
  • Traverse: use a query to scan said DOM, returning a list of elements.
  • Modify: attach event handlers to, and otherwise manipulate, those elements.

Although LTM is quite common in JavaScript development, I believe it’s an antipattern. The reglib tries to get closer to the CSS way of doing things: declare what kinds of elements get what behavior, and have that declaration take immediate effect at a global level, regardless of subsequent mutations to the DOM.

If you look at the library information it looks a lot like jQuery and other access points in other languages.

reglib is so named because it lets you “register” an event handler against a CSS selector. Like CSS, once the above code is “declared”, the event handling behavior takes effect globally. This is true regardless of whether the onload event has fired, or whether the DOM has finished loading off the network, or whether arbitrary sections of DOM have been overwritten.

Besides event declaration, this lib contains a few other convenience and helper utilities. Specifically:

Whenever possible this lib takes advantage of native APIs, such as Node.getElementsByClassName() and Node.querySelector(), falling back on more laborious manual methods for doing the same things in older clients.

Posted by Dion Almaer at 4:50 am
11 Comments

+++--
3.5 rating from 25 votes

11 Comments »

Comments feed TrackBack URI

Isn’t it the same as jQuery + liveQuery, except that you do have to wait for the DOM to finish loading, which is not a big deal…
jQuery(function(){
// my code goes here
});

Comment by frenchStudent — November 13, 2008

So does this sit at the top of the event bubbling hierarchy (body?) and interrogate the event source to see which functions to call based on the rules it’s been given?

Comment by jeromew — November 13, 2008

Yes it does. Very nicely written, may well use it. Cant help thinking it could be slow / cpu intensive for certain applications, but for 99% of apps out there it is a nice way of doing things.

Comment by sc44 — November 13, 2008

That actually makes a lot more sense than the traditional seek and attach methods doesn’t it? I like. I bookmarked this article some time ago but haven’t really though about it again until now: http://icant.co.uk/sandbox/eventdelegation/

Comment by jeromew — November 13, 2008

The Javascript MVC (www.javascriptmvc.com) API uses this method also through it’s Controller class. Very nice idea and prevents the problem of memory leaks in IE6 when manipulating parts of the DOM with attached event handlers.

Comment by RoryH — November 13, 2008

Like it for the same reasons that I liked Behaviour.js’s way of doing things. Makes for much more maintainable code, as it encourages the creation of a clearly defined, readable, event model.

Comment by nataxia — November 13, 2008

Pretty cool. I’m tempted to try it.

Comment by Nosredna — November 13, 2008

I’ve been using event delegation for nearly all of my event code for a long time, and it’s been very helpful. It reduces memory footprint overall, reduces code significantly, requires much less reprocessing with Ajax content replacement, and is generally a lot easier to code.

There are exceptions though (like how focus/blur events don’t bubble, and how IE doesn’t support event capturing).

Comment by eyelidlessness — November 13, 2008

Ajaxian has written about the Motionbox EventHandler before (http://github.com/tobowers/motionbox-eventhandler/tree/master)

Reglib is nicely done. It’s good to see more happening in this space. Traversing the DOM to assign event listeners is pretty crazy nowadays.

We do a similar thing, sit at the document level, let you subscribe to ids, classes and arbitrary selectors (though that’s not recommended).

We also bubble blur and focus events (transparently) and allow you to subscribe/fire custom events on arbitrary javascript objects.

Comment by tobowers — November 13, 2008

@eyelidlessness: This does support focus/blur events. Uses activate/deactivate(which does bubble) for IE, and capturing for everyone else.

I really like what he did with the depth parameter so the events will fire correctly from child elements too. Now only if this could support proper mouseenter/mouseleave events.

Comment by MattCoz — November 13, 2008

http://docs.javascriptmvc.com/demos/controller.html

You will see mouseenter, mouseleave, hover, drag/drop, lasso, all done with event delegation. JMVC also handles submit in IE.

Comment by JustinMeyer — November 21, 2008

Leave a comment

You must be logged in to post a comment.