<rant>As a foolishly ardent DIY-er AND a programmer I often try to avoid using third-party libraries, as if my “real programmer” credibility depended on complete self-reliance.

This is especially a nuisance when crafting modern interactive websites, as it’s becoming increasingly difficult to avoid libraries such as jQuery.

For me, though, it’s not about some idealist notion of authorship but rather it boils down to my need to understand the code I’m deploying. If I am not getting an expected result, and am including some third-party library, it can be hard to tell where the train went off the rails (sorry, sometimes I don’t have time for breakpoints & stack traces when I’m trying to push attractive & valid code to the browser from what is often the meat & potatoes of a site project: the back-end code in a template system or CMS.

Well this year I finally got around to de-obfuscating the jQuery library and began picking apart how it works.
This is a really important step in deciding to seriously use a tool that I recommend to every practitioner of every craft. Don’t get me wrong, jQuery has some fabulous docs, but mentally understanding the “Why” behind the way things is just as liberating as a complete list of functions & methods.

One way to look at a powerful Javascript library such as jQuery is to canonize it mentally into js, and erase the difference in your mind. That probably works for some people; I don’t think I can do that. There are times where I can imagine not needing the extra baggage of the whole of it for one or two functions.</rant>

Point in case:

On a site which wasn’t already using jQuery, I had need of some considerable DOM manipulations; creating & removing elements, applying additional style, and modifying hrefs. All of which are provided simply by javascript, except that the names of the methods are so freaking long! Come on, you know what I mean. Even IF you’re development environment has an auto-completion feature (I use Notepad++, and the shortcut is CTRL+ENTER, but it’s slower to look through the list and down-arrow to the desired item than it is to just keep typing) document.getElementById(‘…’) is just too damn long.

You gotta admit, there’s something sexy about $(‘#…’). C`est la vie, right?

So here’s what I did, it worked for me, your mileage may vary. Essentially, as a preamble to all the rest of the code, we abbreviate those long names by assigning an anonymous function to a given variable name, like so:

$ID = function(f){return document.getElementById(f);};
$NAME = function(f){return document.getElementsByTagName(f);};

Then, merely use them like this:
var e = $ID('some-element');
alert(e.innerHTML);

Of course, when you really need to boogie, you’ll need access to elements’ class attributes, so:

$CLASS = function(clsName){
 var classy = new Array();
 var pool = document.getElementsByTagName("*");
 for(var i = 0;i < pool.length;i++){
  if(pool[i].className.indexOf(" ") >= 0){
   var classes = pool[i].className.split(" ");
    for(var j = 0;j < classes.length;j++){
    if(classes[j] == clsName){
     classy.push(pool[i]);
    }
   }
  } else if(pool[i].className == clsName){
   classy.push(pool[i]);
  }
 }
 return classy;
}

Tags: DOM, hacks, javascript, jQuery

This entry was posted on Wednesday, May 18th, 2011 at 11:03 pm and is filed under Web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.