jQuery Internals + Cool Stuff

jQuery Internals + Cool Stuﬀ 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 Modiﬁcation ✦ Events ✦ Sniﬃng

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

Isolation ✦ jQuery shouldn’t aﬀect outside code ✦ We’re good at this ✦ Outside code shouldn’t eﬀect 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

noConﬂict ✦ (function(){ var oldjQuery = window.jQuery; var jQuery = window.jQuery = function(){ // ... }; jQuery.noConﬂict = 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(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]); }; }

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

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

Sniﬃng ✦ All major JS libraries use browser sniﬃng ✦ 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 Zaeﬀerer

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

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/

http://hisasann.com	5329
http://www.slideshare.net	101
http://www.techiegyan.com	17
http://neocoin.net	5
https://confluence.uk.jpmorgan.com	5
http://moin.neocoin.net	4
http://www.google.co.jp	3
http://search.yahoo.co.jp	2
http://translate.googleusercontent.com	2
http://hml-monqi.monqi.com.br	1
http://s.deeeki.com	1
http://webcache.googleusercontent.com	1
http://neocoin.cafe24.com	1
http://www.hisasann.com	1
http://boston.garysguide.org	1
http://72.14.235.132	1
http://migueldev.com	1

jQuery Internals + Cool Stuff

by jeresig on Oct 02, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

17 Embeds 5,476

Statistics

jQuery Internals + Cool Stuff — Presentation Transcript