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:
- 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
As much as I would love to say parsing of the library source code was automatic, the entire project had to be built manually, by painstakingly going through the source code and breaking it down into component parts.
Each chunk of source code was identified and manually wrapped in HTML template blocks such as "function", "properties", "code", which in turn were wrapped in sections like "object" or "section". These blocks were then customised using Regular Expressions to extract the particulars of the source code (type, function name, etc) which was then added to the template's attributes or text.
Once the final HTML structure was complete, usually after many hours or days of painstaking manual work, it was ready for interactivity, including:
- manually assignment of tooltips and links to original source documentation
- automatic assignment of collapsable sections
- automatic assignment of syntax highlighting and internal hyperlinks
When I was first planning xJSFL , I thought the way to do it would be to emulate jQuery, so I set about de-constructing the vast library to see how it was done.
As it turned out, the jQuery model was not a good candidate for a Flash framework, and I learned that the jQuery plugin architecture and requirement to extend is not always the best option.
One of the most interesting discoveries and something that I came to study and draw on extensively in xJSFL was the code behind the CSS selector engine Sizzle, which is embedded deep within the jQuery source code. Discovering how Sizzle worked was instrumental to writing my own selector engine for xJSFL, and gave me lots of ideas that are used in almost all my programming today.