Enhanced event systems ( prototype.js and The Dojo Toolkit)
Do you remember window.onload, IE conditional compilation and script defer? I’m starting to forget all about it, and all the nights I lost trying to get it my way? It’s all over now!
Leading the head of the frameworks pack, prototype.js is rolling out an observer system ( which frankly is my favorite choice, even when mixing prototype.js with Dojo )
The observer function receives the event as an argument, so there’s no need for window.event on IE. Plus, prototype.js automatically cleans the observer on page unloading so no memory leaks appear on Gecko browsers or IE.
You can attach observer functions to any element, using the known palette of events.
You can read more about prototype.js’s Event.observe and other Event extensions here.
The Dojo Toolkit contains its own event management system, in the dojo.event package.
This system is more complex than the prototype.js offer, enabling the developer to hook functions to any event, even providing an AOP-like advice firing mechanism supporting before, after and around advice.
The Dojo Toolkit dojo.event.connect is fully documented here
Simple Object extension and inspection ( prototype.js )
prototype.js offers the function Object.extend(), providing easy object extension and copying.
This function requires two parameters:
- the object to be extended (the destination).
- the object with which to extend it (the source).
prototype.js implements extension in a simple way, by copying every object property and function to the destination.
The inspect function attached to Object gives us a nice String representation of the Object, especially useful in debugging.
prototype.js also offers class-like closures, including .this referencing, with the Class.create() function.
Selecting nodes by CSS modifiers( prototype.js and The Dojo Toolkit)
Everybody uses $(), dojo.byId or document.getElementById, but what do you do when you want to get a whole set of nodes that are significant to your web applications? You mark them with CSS modifiers!
The best example is for line selection inside a list. You mark all your items as list items by using a CSS class, let’s call it “list-item”. On selection, you mark the specific list item with a marker class “list-item-selected”, and when you want to retrieve the selected items. The frameworks chip in:
prototype.js offers two ways of achieving this. You can use $$(), providing CSS selectors, or the simpler document.getElementsByClassName, that requires a CSS class name and returns an array of elements. Read more about it here
The Dojo Toolkit provides the dojo.html.getElementsByClass function that behaves exactly as prototype.js’s document.getElementsByClassName.
Chaining ( prototype.js )
Today’s trend is that full-blown web applications don’t really need a scrollbar. Everything must happen within the visible browser area.
This is the place where the frameworks really help, doing the ugly cross-browser stuff for us.
This function returns the dimensions of the visible browser area.
The visible size of nodes ( The Dojo Toolkit )
How’s about getting the width of elements. Well, The Dojo Toolkit comes to the rescue providing utility functions like dojo.html.getBorderBox, dojo.html.getContentBox, and so on.
These utility functions can help us build nice resizable layouts for the AJAX generation.