I really enjoy exploring jQuery’s source code. Recently, I’ve been using James Padolsey’s jQuery Source Viewer. It’s a really neat tool that lets you type in the name of a function (even if it’s an internal function!) and view its source.

Just today, I’ve discovered a different tool/series called JS Libs Deconstructed. Not only will it let you explore jQuery’s source code, but it also works with Prototype and MooTools. But, since I’m more interested in jQuery, I’ll just link the jQuery version: http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/.

 

This blurb from their website sums up the purpose of the tool nicely:

The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.

What is interesting about the tool is that you do not necessarily need to know the name of the function you are looking for.  What’s more, you can explore more than just functions! If, for example, you are interested in how jQuery can recognize attributes in selectors (e.g. $("div[name=mydiv]")), you can go to the Attributes section (1/3 of the way down), and view the Regular expressions that jQuery uses. In this particular example, the regular expressions are stored in a “private” variable, so it’s something that the other tool can’t access.

My only complaint is that individual sections and code blocks are not permalinked, but I’m sure that will happen in another update. Anyway, I can see it being very useful. Check it out: http://www.keyframesandcode.com/resources/javascript/deconstructed/.