Some javascript framework functions I wish I had 5 years ago

Categories Development

Writing JavaScript has changed a lot since it first appeared twelve years ago. Initially coined Live Script, the language developed by Netscape took a decade to become the de facto client-side web scripting language.

Writing complex client-side scripts using JavaScript has long been a hassle, as the common web-developer feared the versatility and the seamless complexity that it offers. With the appearance and development of JavaScript frameworks in the last years, this is all starting to change.

This is a list of some JavaScript problems that today’s JavaScript frameworks flawlessly solve in a both cross-browser and simple to implement manner. Stop re-inventing the square wheel, use a JavaScript framework!

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!

There’s a whole new world out there, a world where you just don’t care about the little things, like how your events are managed. Welcome to the brave new world of JavaScript event management.

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 )

Chaining is a nice-to-have feature javascript-wise, allowing function execution on return values.

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.

These are just a few of the functions available in JavaScript frameworks today. Why not start using one?

Leave a Reply

Your email address will not be published. Required fields are marked *