Under jQuery’s bonnet

31 Jan 2010

If there’s one thing all library users should be doing more, it’s peeling back the layer of abstraction and seeing what’s really happening underneath. This is the only way to gain a true understanding of what the library provides, and who knows, maybe you’ll find some gems that you didn’t know existed.

Libraries like jQuery aren’t very small when uncompressed. Traversing a long source file trying to look for a specific method’s implementation is far from ideal. I have frequently found myself in this situation with jQuery, so today I decided to do something about it, and the result is viewable at https://j11y.io/jquery.

It allows you to study specific parts of jQuery’s source. You can type in a method name and you’ll see its implementation straight away, in all its syntax-highlighted glory! It will also link’ify all function names within the presented source:

You can link directly to a method using the following URL pattern:

https://j11y.io/jquery/[version/]methodName
 
E.g.
https://j11y.io/jquery/css
https://j11y.io/jquery/1.3.2/attr
https://j11y.io/jquery/jQuery.proxy
 
-OR-
https://j11y.io/jquery/#v=version&fn=methodName

If you don’t specify a version then 1.4 is assumed.

The source that’s shown won’t be identical to the actual source, since this source viewer only works by toString()‘ing the functions. I might eventually implement something a little more robust, but it’s going to take time — finding a specific function’s declaration in a source file is tricky, especially when they’re not all defined with the straightforward method: function(){...} or function foo(){...}.

I didn’t really intend it to be an accurate depiction of the real source anyway — just something I (and others) could use to see how certain things are implemented within jQuery.

I hope you find it useful… I know I will!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

So far there's been 24 Responses to
“Under jQuery’s bonnet”

Carl Sziebert February 1st, 2010 at 4:30 am

Very cool. Any plans to start indexing the more popular plugins with this tool? Showing suggestions for the search box would also be a welcomed addition.

caii February 1st, 2010 at 8:47 am

A very clever way.
I can use it in any other Libraries.

PCheese February 1st, 2010 at 9:00 am

Thanks! Pretty cool + useful. However, I imagine it would be much better if you could include the comments before the function, as in:

// Mutifunctional method to get and set values to a collection
// The value/s can be optionally by executed if its a function
function access( elems, key, value, exec, fn, pass ) {
	var length = elems.length;
	...

Maarten Docter February 1st, 2010 at 9:21 am

Hi James,

Great work!
It’s always nice to see how a small annoyance can result in a great tool! The linkifying of the function names really adds great value.
Thank you for sharing this tool with us!

All the best,

Maarten Docter

Martin Kirk February 1st, 2010 at 9:22 am

hmm strange

https://j11y.io/jquery/#v=1.4&fn=get

the function name is gone…

+ i would expect more overloads (not knowing jQuery)

Searle February 1st, 2010 at 11:29 am

I wrote a program last year that might help. It’s a source code browser that cross references everything it can find. I wrote it to under stand Parrot+Rakudo, which are quite huge. You’ll find it here:

http://github.com/Searle/raxref

Cheers,
Searle

Thibaut Barrère February 1st, 2010 at 1:33 pm

Hi James,

that’s very useful – thanks for your work and sharing (upvoted on DZone).

James February 1st, 2010 at 1:55 pm

Thanks for the comments! 🙂

@PCheese, @Martin, As mentioned “The source that’s shown won’t be identical to the actual source” — this viewer relies on each function’s toString representation, which can differ between browsers (e.g. Chrome shows comments, FF doesn’t). And Martin, most of jQuery’s methods are not named functions — they’re mostly anonymous function expressions that don’t have names, so it would be presumptuous to stick the names in there.

Mark Bell February 1st, 2010 at 2:36 pm

Very nice tool, great work! You’re right in saying that we should all be more aware of what’s going on behind the scenes when using libraries; I’ve certainly learned a lot just from a quick browse.

Mark February 1st, 2010 at 4:00 pm

Really cool and useful. Thanks James!

MindstormsKid February 1st, 2010 at 5:23 pm

You just made my day. O_O

Lea Verou February 2nd, 2010 at 12:34 pm

Clever idea, excellent execution.
Bookmarked. 😉

Brian Egan February 3rd, 2010 at 12:12 am

Another interesting tool! You’re on a roll with the jQuery stuff lately. The only thing I would recommend to others who haven’t downloaded the jQuery source from the repo before is to do so first before using this tool! I did about a year ago and that’s actually how I discovered how they use ANT to build jQuery (and have now become an ANT fan), learned about how they were doing unit testing, and just got a lot of very valuable information from examining the files within the repo. Once you glean that info, definitely use this tool for specific function browsing!

Mark W. February 4th, 2010 at 3:51 am

Entering “this” is interesting…

Eric Hynds February 5th, 2010 at 9:14 pm

This is fantastic, I’ve been using it a ton lately. well done!

Gaurav Chandra February 9th, 2010 at 6:23 am

How the heck did you make this?!!! I am zapped with what all you do. Seriously, it would be a great learning tool for all of us.

Andrée Hansson February 9th, 2010 at 3:20 pm

Hey James, pretty sweet tool. A cool idea would be to have an option to compare functions in different versions, e.g. .remove() in 1.3.2 and 1.4.1 etc. and have them side-by-side.