Your SlideShare is downloading. ×
0
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(quot;<li><a></a></li>quot;) // li
      .find(quot;aquot;) // a
        .attr(quot;hrefquot;, quot;htt...
Isolation
✦   jQuery shouldn’t affect outside code
    ✦ We’re good at this

✦   Outside code shouldn’t effect jQuery
    ✦ ...
jQuery Wrapper
✦   (function(){
      var jQuery = window.jQuery = function(){
        // ...
      };
    })();
✦   (func...
Plugin Wrapping
✦   (function($){
      // Your code...
    })(jQuery);
✦   (function(){
      var $ = jQuery;
      // Yo...
noConflict
✦   // Remove $
    var $jq = jQuery.noConflict();
✦   // Remove $ and jQuery
    jQuery.noConflict(true);
✦   Can...
noConflict
✦   (function(){
      var oldjQuery = window.jQuery;
      var jQuery = window.jQuery = function(){
        // ...
Element Data
✦   Added in jQuery 1.2
✦   Attaching data to elements can be
    hazardous
✦   Store data:
    jQuery.data(e...
Element Data (cont.)
✦   Added in jQuery 1.2.3
✦   Can handle namespacing
    $(”div”).data(”test”, “original”);
    $(”di...
Selectors
How It Works
✦   How it currently works
✦   “div > p”
✦   Find all divs
    Loop through each div
    ✦ Find all child ele...
How It Works
✦   “div p”
✦   Find all divs
    Loop through all divs
    ✦ Find all p, relative to the div

✦   Merge all ...
Sizzle
✦   http://github.com/jeresig/sizzle/tree/master
✦   New Selector Engine for jQuery
✦   1.5 - 4x faster than other ...
How Does it Work?
✦   Query Restructuring
✦   “div p”
✦   Find all p elements
    For each p element
    ✦ check if parent...
How Does it Work?
✦   Faster for some queries, slower for others
✦   Depends on the DOM structure
✦   “div > p” much faste...
Niceties
✦   Query Caching
✦   if ( document.addEventListener && !document.querySelectorAll ) {
      cache = {};
      fu...
Manipulation
✦   Four common methods:
    append, prepend, before, after
✦   $(“<li>and this too!</li>”)
✦   How does it w...
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>
✦   ele...
Converting
✦   Inject HTML string using innerHTML
✦   var div = document.createElement(“div”);
    div.innerHTML = html;
 ...
Injecting
✦   var elems = div.childNodes;
✦   Loop through elems, cloneNode(true)
    each, insert into DOM
    ✦ 5 paragr...
Document Fragments
✦   No div.childNodes looping
✦   Move the nodes into a Document
    Fragment
✦   Husk DOM container
✦ ...
Events
Non-DOM Events
✦   function User(){}
✦   var user = new User();
✦   $(user).bind(“login”, function(){
      alert(“all don...
Namespaced Events
✦   Added in jQuery 1.2
✦   Targeted adding and removal of events
✦   $(“div”).bind(“click.foo”, functio...
Special Events
✦   Added in jQuery 1.2.2
✦   Can create whole shadow event system
✦   New events: mouseenter, mouseleave,
...
Animations
✦   Full Animation plugin (in jQuery 1.2):
✦   jQuery.fx.step.corner = function(fx) {
      fx.elem.style.top =...
Sniffing
✦   All major JS libraries use browser sniffing
✦   Look at the user agent and make guesses
✦   We can get rid of thi...
Testing & Analysis
Testing
✦   Rapid testing
✦   ./gen.sh
    #!/bin/sh
    svn co https://jqueryjs.googlecode.com/svn/trunk/jquery $1
      ...
Test Suite
✦   qUnit (jQuery Test Suite)
    http://docs.jquery.com/QUnit
✦   By Joern Zaefferer
qUnit Usage
✦   test(quot;a basic test examplequot;, function() {
      ok( true, quot;this test is finequot; );
      var...
qUnit Output
Profiling
✦   Deep Profiling Plugin
✦   Watch all method calls and events
✦   http://ejohn.org/blog/deep-profiling-
    jquer...
Thank You!
✦   John Resig
✦   http://ejohn.org/
✦   http://twitter.com/jeresig/
Upcoming SlideShare
Loading in...5
×

jQuery Internals + Cool Stuff

35,201

Published on

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

Published in: Technology
2 Comments
51 Likes
Statistics
Notes
  • oooh I havnt touched jquery in years. Still waiting for the cool stuff? http://coolestguyinaustralia.blogspot.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • jquery roxx!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
35,201
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
992
Comments
2
Likes
51
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Internals + Cool Stuff"

  1. 1. jQuery Internals + Cool Stuff John Resig http://ejohn.org/ - http://twitter.com/jeresig/
  2. 2. Overview ✦ Why we do what we do ✦ Features you may not know about ✦ New features coming
  3. 3. Parts of jQuery ✦ Common ✦ Selectors ✦ DOM Modification ✦ Events ✦ Sniffing
  4. 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. 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. 6. jQuery Wrapper ✦ (function(){ var jQuery = window.jQuery = function(){ // ... }; })(); ✦ (function(){ var foo = 5; })();
  7. 7. Plugin Wrapping ✦ (function($){ // Your code... })(jQuery); ✦ (function(){ var $ = jQuery; // Your code... })();
  8. 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. 9. noConflict ✦ (function(){ var oldjQuery = window.jQuery; var jQuery = window.jQuery = function(){ // ... }; jQuery.noConflict = function(all){ if ( all ) window.jQuery = oldjQuery; return jQuery; }; })();
  10. 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. 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. 12. Selectors
  13. 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. 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. 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. 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. 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. 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. 19. Manipulation ✦ Four common methods: append, prepend, before, after ✦ $(“<li>and this too!</li>”) ✦ How does it work?
  20. 20. 3-step Process ✦ Cleaning the input ✦ Converting it into a DOM ✦ Injecting it into the DOM
  21. 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. 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. 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. 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. 25. Events
  26. 26. Non-DOM Events ✦ function User(){} ✦ var user = new User(); ✦ $(user).bind(“login”, function(){ alert(“all done”); }); $(user).trigger(“login”);
  27. 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. 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. 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. 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. 31. Testing & Analysis
  32. 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. 33. Test Suite ✦ qUnit (jQuery Test Suite) http://docs.jquery.com/QUnit ✦ By Joern Zaefferer
  34. 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. 35. qUnit Output
  36. 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. 37. Thank You! ✦ John Resig ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×