DOMAssistant 2.8 beta 1 released

June 12th, 2009 by chenghong

After being in development for the past few months, DOMAssistant 2.8 is finally ripe for public testing. Version 2.8 brings a modest set of new features and enhancements, most notably event delegation and element storage, as well as fixes many ugly bugs from the 2.7 branch. A formal unit test suite is also introduced for more systematic testing on supported browsers.

Event delegation

For those new to event delegation, it is the idea of attaching event handlers onto parent elements rather than on individual elements, base on the fact that events bubble up the DOM tree. Event delegation offers some compelling benefits: less memory consumption, faster events setup and automatic binding of future elements. Such events are sometimes referred to as ‘live’ events.

Event delegation in DOMAssistant 2.8 is provided by the new relayEvent() and unrelayEvent() methods. If you have an unordered list of 100 items and you want to attach an onclick handler onto each of them, you can now use delegation instead:

$('ul#myLinks').relayEvent('click', 'li', jumpToPage);

In addition to all events that bubble, focus and blur are also supported:

$('form').relayEvent('focus', 'input[type=text]', function() {
    this.addClass('yellow');
});

And they can be removed with unrelayEvent():

$('ul').unrelayEvent('click');

Element storage

In web application development it is a common requirement to associate arbitrary data with DOM elements. While it can be done by direct property assignment, doing so poses a high risk of memory leak, particularly in Internet Explorer. DOMAssistant strives to provide a system for storing and retrieving data from DOM elements in a safe and reliable manner via element storage. It can be extremely useful for plugin developers, and is now also used internally by DOMAssistant Events module.

To store data, simple write:

$$('elem').store('foo', 'bar');
$$('child').store( { 'name': 'Tom', 'age': 6, 'sex': 'M' } );

And to retrieve them:

var foo = $$('elem').retrieve('foo');   //bar
var age = $$('child').retrieve('age');  //6

Removing data is as easy:

$$('elem').unstore('foo');
$$('child').unstore();   //Removes all data

As a bonus, calling retrieve on an element without a parameter returns its unique ID.

Javascript 1.6 array extras

The DOM element collection returned by the dollar function $ is essentially an array, so naturally we should be able to use the snazzy Javascript 1.6 array extras on them. Well, except one thing: not all browsers are created equal. DOMAssistant attempts to fill this gap by enabling indexOf(), map(), filter(), every() and some() on all supported browsers. The existing each() method also receives a boost and is ‘breakable’ by returning false from the callback function.

$('#navigation a').each( function(elem, idx) {
    alert('This is item ' + idx);
    if (idx === 5) return false;    // Stop counting after 5
});
var elm = $$('content');
var idx = $("div").indexOf(elm);
// Creates an array of element ID
var arrayID = $('div').map( function() {
    return this.id;
});
var oddItems = $('div').filter( function(elem, idx) {
    return (idx % 2 === 1);
});
var allHaveChildren = $('div').every( function() {
    return (this.childNodes.length > 0);
});
var someHaveChildren = $('div').some( function() {
    return (this.childNodes.length > 0);
});

Unit test suite

DOMAssistant 2.8 is systematically tested using a comprehensive test suite built around the SugarTest framework. This new testing process ensures minimal regressions during code change. As of this writing, the unit test case count stands at 869, and they are passed by all supported browsers.

So what are the supported browsers anyway?

Tests are run against:

Internet Explorer: 5.5, 6.0, 7.0, 8.0
Mozilla Firefox: 1.0, 1.5, 2.0, 3.0, 3.5*
Google Chrome: 1.0, 2.0, 3.0*
Opera: 9.0, 9.2, 9.5, 9.6, 10.0*
Apple Safari: 3.1, 3.2, 4.0

With that, a total of 20 past, present and upcoming mainstream browsers pass the DOMAssistant 2.8 test suite with a 869/869 score. Or 100%.

Unfortunately, support for IE5.0 has now been dropped.

Breaking change

While DOMAssistant 2.8 intends to be fully backward-compatible with previous versions, there is one potential breaking change that you might want to take note of. The Events module now passes a ‘synthetic’ event object to the callback functions, instead of the native object. This has the benefit of neutralizing differences between W3C-compliant event objects and IE’s, and allow overwriting of read-only attributes. The second point is in fact necessary in the implementation of event delegation.

However, not all native properties have been ported over to the synthetic event object. Current supported properties are type, bubbles, cancelable, target, currentTarget, button, keyCode, charCode, altKey, ctrlKey, shiftKey, clientX, clientY and timeStamp, and methods preventDefault() and stopPropagation(). If your code only uses the above properties and methods, it should be safe. Otherwise, the native object is still present and can be retrieved:

$('a').addEvent('click', function(e) {
    e.preventDefault();
    var native = e.event;
    alert(native.returnValue);
});

Download Beta 1 now!

Help make DOMAssistant 2.8 a solid release by taking the public beta for a test drive. Feedback welcomed!

26 Responses to “DOMAssistant 2.8 beta 1 released”

  1. Robert Nyman says:

    Very, very impressive release! I especially love that proper event delegation and data storage has made it into DOMAssistant.

  2. Thomas Gilray says:

    I want to say a hearty thanks for DOMAssistant and ask a question or two. I just recently found DOMAssistant and it seems like exactly what I’ve been looking for. I was toying around with prototype, but it seems a bit bloated. It has more than I need and requires I learn too much of its way of doing things. A lightweight library that smooths out cross-browser inconsistencies provides a few useful functions like DOM element creation and css-selector functions is perfect! Thanks for all the hard work!

    I am curious though, in 2.8, will this synthetic event object also be used to smooth out cross-browser inconsistencies? It doesn’t seem like 2.7 does this so much. For example, my understanding is that the clientX/Y properties are a point of inconsistency between browsers. Will these properties be dealt with the same way in all browsers? Will clientX/Y be relative to the entire page as the w3c says?

    Also, a bit off-topic, but I’m curious. What Javascript compressor does the DOMAssistant team use?

    Thanks!

  3. chenghong says:

    Hi Thomas, I’m glad you like DOMAssistant! Version 2.7 does not smooth out cross-browser issues much with the event object, as the properties of the browser native object in used are mostly read-only. The use of a synthetic object in 2.8 will allow DOMAssistant to do what 2.7 can’t.

    As of this beta though, ClientX/Y still holds the browser native ClientX/Y values, but it is the objective to normalize them by the time 2.8 turns gold.

    And DOMAssistant uses the excellent YUI Compressor!

  4. Thomas Gilray says:

    Cheng Hong,

    Thanks for the info! It’s great to hear that DOMAssistant will be smoothing out some cross-browser differences in the way events are handled. When I was first looking through the documentation, that was my only negative thought regarding features: if only events were augmented the same way the DOM is.

  5. Thomas Gilray says:

    Hi,

    I’m also curious if version 2.8 will support event.relatedTarget when complete (right now I’m using either e.event.relatedTarget or e.event.toElement manually). Will events eventually work like the w3c says they should through this synthetic event?

    Thanks,

  6. chenghong says:

    Yes, most, if not all of the W3C event properties will be supported in time for final.

  7. CROS says:

    I thought DOMAssistant may have been dead. This is great news! The event delegation is awesome as well as element storage. The event handler stuff looks like it will be great once smoothed out as well. I love how DOMAssistant doesn’t get in your way like other libraries, yet at the same time works on getting browser inconsistencies away. In the end, nothing’s in your way. =]

    I really have to finish that dimensions plugin.

  8. Ivo says:

    Do you consider adding JSONP support with the dynamic script/src=json-file approach? I like to use DOMAssistant in combination with Pure and YQL, whereas the YQL requests are not on the same domain.

  9. chenghong says:

    @CROS: Thanks for your kind words. I can’t wait to see the finish product!

    @Ivo: There are no plans to add JSONP support in DOMAssistant 2.8, but I don’t discount the possibility in a future version! Feel free to create a JSONP plugin for immediate usage.

  10. Christiaan Westerbeek says:

    May I try 2.8 Beta? I’m happy to supply feedback on it.

    But I can’t find a download link on the site…

  11. chenghong says:

    @Christiaan: Please refer to the last part of this blog post for beta 1 download links.

    Or you can try the latest development snapshots at
    http://code.google.com/p/domassistant/source/browse/#svn/trunk

  12. Christiaan Westerbeek says:

    Thanks. I’m trying it now.

    I’ve posted an issue on http://code.google.com/p/domassistant/issues/detail?id=21

  13. chenghong says:

    Thanks Chris! The ‘onbeforeunload’ bug has been fixed and will be released in the next beta. Meanwhile please get the fixed version from http://code.google.com/p/domassistant/source/browse/#svn/trunk

  14. Greg says:

    Does anyone there know how Frost did this thumbnail
    gallery? I think it may be build on your code.

    http://fd3615-kynhug.beta.frostdesign.com.au/

    Love the way it moves and works but can’t seem to figure out what
    they used.

    Any help finding out is greatly appreciated.

    Thanks, Greg

  15. Greg says:

    If anyone has seen something like what Frost Design did…

    [ http://fd3615-kynhug.beta.frostdesign.com.au/ ]

    Can anyone point me to some other examples or downloads of this type of gallery module?

    Thanks, Greg

  16. chenghong says:

    Hey Greg, it looks like they built the gallery part using Flash.

  17. [...] since beta 1:[Chg] Updated implementation of event.clientX/Y and event.relatedTarget[Chg] focus/blur on IE now [...]

  18. [...] 2.8 introduces event delegation since beta 1, via the methods relayEvent() and unrelayEvent(). Event delegation [...]

  19. fake louis says:

    As I website owner I think the subject material here is real great, appreciate it for your efforts.

  20. Sweet internet website , super style , really clean and utilize genial .

  21. Dustin Soto says:

    These types of have grown to be wonderful once again exercises ?n which means that we can remove this back bone plus sleep suitably without the practical experience pertaining to pressure with your once again.

  22. Leonie Heyde says:

    I like this blog very much, Its a very good nice situation to read and get information about.

  23. Some genuinely good content on this site, regards for contribution. “A religious awakening which does not awaken the sleeper to love has roused him in vain.” by Jessamyn West.

  24. ?????? says:

    Thanks on your marvelous posting! I truly enjoyed reading it, you happen to be a great author.I will be sure to bookmark your blog and will come back at some point. I want to encourage you continue your great job, have a nice holiday weekend!
    ?????? http://boots.fenyastravels.com/???-japan-7.html

  25. 2i77zei9tu says:

    tgntr45 zLIbz54 ntdfr44 szdVL18 ywcft65 msKwi69 WLvtp15 wfWNa21

  26. a says:

    I’m not sure exactly why but this website is loading extremely slow
    for me. Is anyone else having this problem or is it a issue on my
    end? I’ll check back later on and see if the problem still exists.

Leave a Reply