Yahoo! releases their UI Library

I’m just beginning to dive into this, but it’s got me excited. They’ve got two versions of each source file, a build one with all the comments and a src which is already compressed for you.

Having worked for a while with Prototype and Script.aculo.us I’m curious to see how they compare. Seems like Script.aculo.us provides a lot of whiz bang effects the Yahoo library doesn’t have, but you do have all of these:

  • animation
  • calendar (not sure if there’s a dropdown version)
  • connection (ajax stuff)
  • dom
  • dragdrop
  • event
  • slider
  • treeview (particularly cool)

My biggest issue about it so far is that you’d have to type the namespace of YAHOO about a zillion times. Typing

Yahoo.util.Dom.get('myelement');

is a lot more typing than prototype’s terse

$('myelement')

Where NOT to var…

Ajaxian posted an article about using var to declare a variable at the top level of your script. The variable is considered to be part of the window’s scope which both pollutes the window object and sets up situations where the variable isn’t accessible unless you refer to it as part of the window object itself.

To var or not to var my javascript

This is probably trivial to a lot of people. I’ve done a bit of javascript work recently and in looking at reference material and code snippets around the internet, I noticed that the ‘var’ keyword to declare a variable seems to be optional in all cases. Even popular libraries, like Script.aculo.us, have revisions where ‘var’ appears where it wasn’t in the previous release.

In your own coding there’s two things to keep in mind about it.

  1. For global variables, it doesn’t matter, but you may want to use it for consistency.
  2. Always try to use ‘var’ to declare variables in local functions. It makes sure you’re using a local copy of the variable instead of another variable of the same name in a different scope.

For example, the two similar functions here have very different effects:

var myvar = 0;
function affectsGlobalVar(i){
   myvar = i;
}
function doesNotAffectGlobalVar(i){
   var myvar = i;
}