jQuery Deconstructed
An interactive visual breakdown of the jQuery internal code
Posted on Monday, July 19th, 2010 at 3:08 pm
UPDATE: jQuery Deconstructed is now JS Libs Deconstructed, also supporting Prototype, and soon, MooTools.
I’ve been interested in the internal structure of jQuery for as long as I can remember, but it can be overwhelming at the best of times, so I’ve recently made-good on my plan to build an interactive breakdown of the physical code.
Essentially, it provides a rather handy birds-eye view of the jQuery library, making it easy to dig into and understand the coding behind the seemingly-simple syntax.
Points of note:
- 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
It now also has a few nice features such as:
- Live links to the online documentation
- Color themes
- Optional icons
Check it out here: https://keyframesandcode.com/resources/javascript/deconstructed/
Really nice work Dave!
I had similar motives when creating this … although it doesn’t show the physical code, like yours.
This is the coolest freakin documentation I’ve ever seen. I’m sooo blogging about this. Great work!!
Thanks for the kind words, chaps!
Yeah – it’s got loads of tweets and blog post in the couple of days it’s been up so far. I’m dissecting Prototype next… and maybe even MooTools. I’m pretty keen to see how both handle class extension.
Hello, Dave. Nice work!
Is decomposition code reusable?
Are you going to open it in any way?
Hey Sergey,
Thanks, not sure what your first question means though.
Second question, could do, but not likely. Too much hard work. This is how I did it:
1 – Designed a bunch of Dreamweaver snippets to wrap the various elements
2 – Processed the resulting HTML with a series of well-written RegExps to create anchors, links, and so forth
3 – The next step is a good few hours’ worth of manual copy / pasting descriptions and links from the relevant API docs
4 – Finally, some nicely-written jQuery to create all the interactivity
I am in the process of releasing Prototype and MooTools breakdowns though:
https://keyframesandcode.com/resources/javascript/deconstructed/
Feel free to throw ideas my way
Hey Dave,
I thought you have some magic script that does all the hard work for you.
How do you plan to adapt this doc for new versions of jQuery, when they will be released?
I don’t, actually!
It’s more an exploratory journey to get a handle on how frameworks are written – where stuff goes, in what order, what constructs are used (object, extend, class), how functions are initialized (self-executing, class initializers, object.function), the general flow within a framework, etc. As well as being a useful way to see the actual source without being overwhelmed.
If a new and quite evolved version of any of the frameworks came out, I would consider putting in the effort to update / amend the existing code.