reglib JavaScript Library Now Available Under MIT License

The reglib is now published to Google Code and available under the MIT license.

Project Home: http://code.google.com/p/reglib/
Download: http://code.google.com/p/reglib/downloads/list

The backstory - Almost a year ago1 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.

// JAVASCRIPT CODE:
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...
\*/

So there you have it. Feel free to check it out (just check it out or actually check it out), read the documentation wiki, download, leave comments, etc. The lib also has a bunch of convenience functions for DOM manipulation, plus it has tools for doing LTM stuff because let's face it, sometimes there's no other way.

(Previous posts on this topic can be found here and here.)


1 It took so long because, in a nutshell: 1) Sun has an open source review process, you can't just release code willy-nilly, 2) During the process, I failed to be a squeaky wheel, and in fact the lawyers waited on my responses as much as I waited on their responses. However development over that interval has been constantly active, and reglib is being used on sun.com.

Comments:

Nice! Very nice! Hope trying it. It's elegant and efficient. COngratulations!

Posted by GabrielK on November 12, 2008 at 07:29 PM MST #

In KSS - http://kssproject.org, we have been playing with style sheets for behaviors for a while.

I was wondering if we could solve some of our problems by using bubbling...

I am happy to read that you prove that the idea does work and am looking forward to experimenting with it in KSS.

Posted by Godefroid Chapelle on November 12, 2008 at 07:49 PM MST #

How does this differ from the various libraries like behaviour.js and event-selectors.js. I actually prefer the api of event-selectors.js library although it could be made even nicer now that things like dom:loaded psudo-event is built into prototype.

Posted by Eric Andersion on November 12, 2008 at 11:57 PM MST #

We're adding something similar to MooTools core pretty soon. It's been a little-known plugin for a while, but soon it'll be MUCH more highly recommended. http://gist.github.com/16903

Posted by Thomas Aylott on November 13, 2008 at 12:35 AM MST #

Great!

Posted by Hades on November 13, 2008 at 11:04 AM MST #

@GabrielK - Thanks!

@Eric Andersion - I must confess my ignorance about behavior.js and event-selectors.js. A brief google search wasn't much help. The main site for behavior.js looks like it's been taken over by a domain farm. But I saw some code samples like this:

Behavior.register({
'.clickable' : {
onclick : function() { alert('clicked!'); }
}
});

reg.js is perhaps a bit more concise:

reg.click('.clickable', function() { alert('clicked!'); });

But I can't say more without knowing more.

Posted by greg on November 14, 2008 at 12:42 PM MST #

Hi Grey,

Great library. Have you thought about also make this a jQuery plugin? That will cut down the size of it for those of us using jQuery a lot.

Thanks.

Wei

Posted by WeiT on November 18, 2008 at 05:14 AM MST #

How would you go about removing an event?

Posted by Mike on November 18, 2008 at 05:42 AM MST #

You can't yet, but it's planned. Perhaps something like:

var foo = reg.click('ul.foo',function(){...});
reg.clear(foo);

foo would just be an int. I'm copying this idea:

var foo = window.setTimeout(function(){...},30);
window.clearTimeout(foo);

Or maybe reg.pause(foo) and reg.resume(foo) so you can toggle on and off the behavior. I haven't decided yet.

Posted by greg on November 18, 2008 at 12:08 PM MST #

What I'm trying to do is to replace a default onsubmit behavior I've setup for all forms with another one specific to a given page.

Here's what I'm using to set the default onsubmit. This code is an external file included in all pages.

reg.setup('form', function() {
reg.addEvent(this, 'submit', DefaultSubmit);
});
function DefaultSubmit(e) {
reg.cancelDefault(e);
SubmitForm(e);
}

Then, say I want the form on another page to be submitted via ajax, I'm attempting to remove DefaultSubmit and replace it with another.

Here's what I'm using to replace. This code is in an external file included after the one above only for this page.

reg.setup('form#form-contact', function() {
if (this.removeEventListener) {
this.removeEventListener('submit', DefaultSubmit, false);
} else if (this.detachEvent) {
this.detachEvent('onsubmit', DefaultSubmit);
}
reg.addEvent(this, 'submit', function(e) {
reg.cancelDefault(e);
AjaxSubmit(e);
});
});

This works great in Firefox, but IE7 will still fire the DefaultSubmit behavior after the newly added AjaxSubmit.

I must be missing something, just not sure what.

Posted by Mike on November 18, 2008 at 10:09 PM MST #

From a CSS perspective if you want text to be sans-serif on one page and serif on another page you'd either use different style sheets on the different pages, or use different selectors within the same style sheet to differentiate when to do what. So my pat answer is either use different reg.setup()s on the different pages (use different behavior sheets) or use different selectors to isolate the different forms, keying off some class or id or structural feature of the HTML. Alternatively within the submit handler function you could detect for the Ajax scenario and branch to the alternate behavior.

Posted by greg on November 19, 2008 at 03:35 AM MST #

Is it possible to register a JS function on the creation of a DOM node?

In my app, lots of DOM nodes are created during runtime (e.g. after onload). Now I want to fire specific functions when certain DOM nodes are created.

Is that possible using reglib?

Posted by Ivo on November 24, 2008 at 08:06 PM MST #

Not in a cross browser way. Check out: http://en.wikipedia.org/wiki/DOM_Events

Posted by greg on November 25, 2008 at 12:21 PM MST #

I've ported reg 1.0.6 to the Chiron module library (modules.js).

https://cixar.com/tracs/javascript/browser/trunk/src/sun.com/reg/1.0.6.js

Here's a JavaScript console to try it out on:

http://modulesjs.com/nightly/chiron-r401/run.html
>>> include('sun.com/reg/1.0.6.js');
>>> click('body', function () {print("hello")});

Posted by Kris Kowal on December 12, 2008 at 12:00 PM MST #

Post a Comment:
Comments are closed for this entry.
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today