Thursday, November 13th, 2008
reglib: Another CSS based, declarative library
-
-
reg.click("a.popup", function(e){
-
window.open(this.href);
-
return false;
-
});
-
-
/*
-
ENGLISH TRANSLATION:
-
I declare, forthwith, that all clicks on <a> elements with
-
class "popup" shall be handled thusly...
-
*/
-
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:
- DOM helper functions (see DomFunctions)
- Basic load-traverse-modify functionality (see LoadAndTraversal)
- A CSS (ish) selector API (see ReglibSelectors)
- A cross-browser event adder (see EventAdder)
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.
Related Content:
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
});
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?
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.
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/
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.
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.
Pretty cool. I’m tempted to try it.
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).
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.
@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.
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.