Talk I gave at jQuery Conference '08 and Ajax Experience '08.

1. jQuery Internals
+ Cool Stuff
John Resig
http://ejohn.org/ - http://twitter.com/jeresig/

2. Overview
✦ Why we do what we do
✦ Features you may not know about
✦ New features coming

3. Parts of jQuery
✦ Common
✦ Selectors
✦ DOM Modification
✦ Events
✦ Sniffing

4. Chaining
✦ jQuery(quot;<li><a></a></li>quot;) // li
.find(quot;aquot;) // a
.attr(quot;hrefquot;, quot;http://ejohn.org/quot;) // a
.html(quot;John Resigquot;) // a
.end() // li
.appendTo(quot;ulquot;);
✦ jQuery(quot;<li><a></a></li>quot;) // li
.find(quot;aquot;) // a
.attr(quot;hrefquot;, quot;http://ejohn.org/quot;) // a
.html(quot;John Resigquot;) // a
.andSelf() // li, a
.addClass(“person”) // li, a
.end() // a
.end() // li
.appendTo(quot;ulquot;);

5. Isolation
✦ jQuery shouldn’t affect outside code
✦ We’re good at this
✦ Outside code shouldn’t effect jQuery
✦ Getting better at this
✦ (Still hurt by Object.prototype)

6. jQuery Wrapper
✦ (function(){
var jQuery = window.jQuery = function(){
// ...
};
})();
✦ (function(){
var foo = 5;
})();

7. Plugin Wrapping
✦ (function($){
// Your code...
})(jQuery);
✦ (function(){
var $ = jQuery;
// Your code...
})();

8. noConflict
✦ // Remove $
var $jq = jQuery.noConflict();
✦ // Remove $ and jQuery
jQuery.noConflict(true);
✦ Can even have multiple copies of jQuery
on the page, simultaneously

9. noConflict
✦ (function(){
var oldjQuery = window.jQuery;
var jQuery = window.jQuery = function(){
// ...
};
jQuery.noConflict = function(all){
if ( all )
window.jQuery = oldjQuery;
return jQuery;
};
})();

10. Element Data
✦ Added in jQuery 1.2
✦ Attaching data to elements can be
hazardous
✦ Store data:
jQuery.data(elem, “name”, “value”);
✦ Read data:
jQuery.data(elem, “name”);
✦ All data is stored in a central cache and
completely garbage collected, as necessary

11. Element Data (cont.)
✦ Added in jQuery 1.2.3
✦ Can handle namespacing
$(”div”).data(”test”, “original”);
$(”div”).data(”test.plugin”, “new data”);
$(”div”).data(”test”) == “original”; // true
$(”div”).data(”test.plugin”) == “new data”; // true
✦ Advanced data handling can be overridden
by plugins
$(element).bind(”setData.draggable”, function(event, key, value){
self.options[key] = value;
}).bind(”getData.draggable”, function(event, key){
return self.options[key];
});

12. Selectors

13. How It Works
✦ How it currently works
✦ “div > p”
✦ Find all divs
Loop through each div
✦ Find all child elements
✦ Verify if element is paragraph

14. How It Works
✦ “div p”
✦ Find all divs
Loop through all divs
✦ Find all p, relative to the div
✦ Merge all results
✦ Figure out unique results

15. Sizzle
✦ http://github.com/jeresig/sizzle/tree/master
✦ New Selector Engine for jQuery
✦ 1.5 - 4x faster than other libraries
✦ 4KB Compressed
✦ No dependencies, can be used by other
libraries (MochiKit, Prototype)

16. How Does it Work?
✦ Query Restructuring
✦ “div p”
✦ Find all p elements
For each p element
✦ check if parent is div
✦ if not, traverse up farther
✦ if at top, remove element
✦ if so, save element
✦ No merging! No unique!

17. How Does it Work?
✦ Faster for some queries, slower for others
✦ Depends on the DOM structure
✦ “div > p” much faster, for example
✦ Built like how browsers query the DOM

18. Niceties
✦ Query Caching
✦ if ( document.addEventListener && !document.querySelectorAll ) {
cache = {};
function invalidate(){ cache = {}; }
document.addEventListener(quot;DOMAttrModifiedquot;, invalidate, false);
document.addEventListener(quot;DOMNodeInsertedquot;, invalidate, false);
document.addEventListener(quot;DOMNodeRemovedquot;, invalidate, false);
}
✦ Smart Fallbacks
✦ if ( document.getElementsByClassName ) {
Expr.order.splice(1, 0, quot;CLASSquot;);
Expr.find.CLASS = function(match, context) {
return context.getElementsByClassName(match[1]);
};
}

19. Manipulation
✦ Four common methods:
append, prepend, before, after
✦ $(“<li>and this too!</li>”)
✦ How does it work?

20. 3-step Process
✦ Cleaning the input
✦ Converting it into a DOM
✦ Injecting it into the DOM

21. Cleaning
✦ Make sure we’re working with HTML
input
✦ (Convert XML to HTML)
✦ <table/> -> <table></table>
✦ elem = elem.replace(/(<(w+)[^>]*?)/>/g, function(all, front,
tag){
return tag.match(/^(abbr|br|col|img|input|link|meta|param|
hr|area|embed)$/i) ?
all :
front + quot;></quot; + tag + quot;>quot;;
});

22. Converting
✦ Inject HTML string using innerHTML
✦ var div = document.createElement(“div”);
div.innerHTML = html;
div.childNodes; // Your meat!
✦ But doesn’t work for all HTML
✦ <tr>, <td>, <option>, <legend> (+ others)
must be in correct container elements
✦ “<table><tbody>” + html + “</tbody></
table>”

23. Injecting
✦ var elems = div.childNodes;
✦ Loop through elems, cloneNode(true)
each, insert into DOM
✦ 5 paragraphs
✦ 100 divs
✦ 2 method calls (insert, clone)
✦ 1000 method
✦ *Very* slow
✦ Simple plugin provides 10-15x speed-up:
http://dev.jquery.com/~john/ticket/append/

24. Document Fragments
✦ No div.childNodes looping
✦ Move the nodes into a Document
Fragment
✦ Husk DOM container
✦ Whole container can be cloned
✦ and whole container can be injected
✦ Saves a ton of repetition

25. Events

26. Non-DOM Events
✦ function User(){}
✦ var user = new User();
✦ $(user).bind(“login”, function(){
alert(“all done”);
});
$(user).trigger(“login”);

27. Namespaced Events
✦ Added in jQuery 1.2
✦ Targeted adding and removal of events
✦ $(“div”).bind(“click.foo”, function(){
alert(“foo!”);
});
✦ Time to clean up!
$(“div”).unbind(“click.foo”);
✦ Added in jQuery 1.2.3:
$(“div”).unbind(“.foo”);

28. Special Events
✦ Added in jQuery 1.2.2
✦ Can create whole shadow event system
✦ New events: mouseenter, mouseleave,
mousewheel (w/ plugin), ready
✦ $(”li”).bind(”mouseenter”, function(){
$(this).addClass(”hover”);
}).bind(”mouseleave”, function(){
$(this).removeClass(”hover”);
});

29. Animations
✦ Full Animation plugin (in jQuery 1.2):
✦ jQuery.fx.step.corner = function(fx) {
fx.elem.style.top = fx.now + fx.unit;
fx.elem.style.left = fx.now + fx.unit;
};
✦ $(”#go”).click(function(){
$(”#block”).animate({corner: ‘40px’}, 500);
});

30. Sniffing
✦ All major JS libraries use browser sniffing
✦ Look at the user agent and make guesses
✦ We can get rid of this!
✦ Makes our code more resilient to change

31. Testing & Analysis

32. Testing
✦ Rapid testing
✦ ./gen.sh
#!/bin/sh
svn co https://jqueryjs.googlecode.com/svn/trunk/jquery $1
&> /dev/null
cp $2.html $1/index.html
cd $1
make &> /dev/null
✦ ./gen.sh 1234 dom

33. Test Suite
✦ qUnit (jQuery Test Suite)
http://docs.jquery.com/QUnit
✦ By Joern Zaefferer

34. qUnit Usage
✦ test(quot;a basic test examplequot;, function() {
ok( true, quot;this test is finequot; );
var value = quot;helloquot;;
equals( quot;helloquot;, value, quot;We expect value to be helloquot; );
});
module(quot;Module Aquot;);
test(quot;first test within modulequot;, function() {
ok( true, quot;all passquot; );
});
test(quot;second test within modulequot;, function() {
ok( true, quot;all passquot; );
});
module(quot;Module Bquot;);
test(quot;some other testquot;, function() {
expect(1);
ok( true, quot;wellquot; );
});

35. qUnit Output

36. Profiling
✦ Deep Profiling Plugin
✦ Watch all method calls and events
✦ http://ejohn.org/blog/deep-profiling-
jquery-apps/
✦ http://dev.jquery.com/~john/plugins/profile/
github.com.html
✦ javascript:jQuery.displayProfile();

37. Thank You!
✦ John Resig
✦ http://ejohn.org/
✦ http://twitter.com/jeresig/