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

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

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

Chaining
✦ jQuery(\"<li><a></a></li>\") // li
.find(\"a\") // a
.attr(\"href\", \"http://ejohn.org/\") // a
.html(\"John Resig\") // a
.end() // li
.appendTo(\"ul\");
✦ jQuery(\"<li><a></a></li>\") // li
.find(\"a\") // a
.attr(\"href\", \"http://ejohn.org/\") // a
.html(\"John Resig\") // a
.andSelf() // li, a
.addClass(“person”) // li, a
.end() // a
.end() // li
.appendTo(\"ul\");

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)

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

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

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

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

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

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];
});

Selectors

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

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

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)

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!

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

Niceties
✦ Query Caching
✦ if ( document.addEventListener && !document.querySelectorAll ) {
cache = {};
function invalidate(){ cache = {}; }
document.addEventListener(\"DOMAttrModified\", invalidate, false);
document.addEventListener(\"DOMNodeInserted\", invalidate, false);
document.addEventListener(\"DOMNodeRemoved\", invalidate, false);
}
✦ Smart Fallbacks
✦ if ( document.getElementsByClassName ) {
Expr.order.splice(1, 0, \"CLASS\");
Expr.find.CLASS = function(match, context) {
return context.getElementsByClassName(match[1]);
};
}

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

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

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 + \"></\" + tag + \">\";
});

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>”

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/

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

Events

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

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”);

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”);
});

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);
});

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

Testing & Analysis

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

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

qUnit Usage
✦ test(\"a basic test example\", function() {
ok( true, \"this test is fine\" );
var value = \"hello\";
equals( \"hello\", value, \"We expect value to be hello\" );
});
module(\"Module A\");
test(\"first test within module\", function() {
ok( true, \"all pass\" );
});
test(\"second test within module\", function() {
ok( true, \"all pass\" );
});
module(\"Module B\");
test(\"some other test\", function() {
expect(1);
ok( true, \"well\" );
});

qUnit Output

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();

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