jQuery Internals + Cool Stuff
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Internals + Cool Stuff

on

  • 42,688 views

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

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

Statistics

Views

Total Views
42,688
Views on SlideShare
32,747
Embed Views
9,941

Actions

Likes
51
Downloads
988
Comments
2

24 Embeds 9,941

http://hisasann.com 9773
http://www.slideshare.net 101
http://www.techiegyan.com 18
https://confluence.uk.jpmorgan.com 12
http://lanyrd.com 6
http://neocoin.net 5
http://www.google.co.jp 4
http://moin.neocoin.net 4
http://search.yahoo.co.jp 2
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 1
http://confluence.uk.jpmorgan.com 1
http://vizzwebsolutions.com 1
http://131.253.14.98 1
http://neocoin.cafe24.com 1
http://megalodon.jp 1
http://74.6.238.254 1
http://migueldev.com 1
http://hml-monqi.monqi.com.br 1
http://72.14.235.132 1
http://s.deeeki.com 1
http://boston.garysguide.org 1
http://www.hisasann.com 1
http://trans.hiragana.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • oooh I havnt touched jquery in years. Still waiting for the cool stuff? http://coolestguyinaustralia.blogspot.com/
    Are you sure you want to
    Your message goes here
    Processing…
  • jquery roxx!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Internals + Cool Stuff Presentation Transcript

  • 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/