digesting jquery
Post on 15-Jul-2015
100 Views
Preview:
TRANSCRIPT
Digesting jQuery...
Presenter: Subhranil Dalal
Be Strong Enough
Go for Latest
All Modern Browser
Older IE
CDN vs Local
CDN?? Why??
Choose your food smartly
Bad selection
Be Smart Use an ID if possible, $('#element');
Use tag selector next. Its the second fastest selector. $('div')
Avoid selecting by class only. Class selectors are the slowest selector. $('.myClass').
Only use class selector with context name. $('div.myClass')
Increase specificity from Left to Right.
$('p#intro em') vs. $('em', $('p#intro'))
Find Me
$.find()
Use find() instead of specifying an explicit context.
The key is to stray away from forcing jQuery to use Sizzle engine.
$('#someDiv p.someClass').hide()
$('#someDiv').find('p.someClass').hide()
http://jsfiddle.net/subhranild/y54Ljv14/
http://jsperf.com/subh-li-last
Cage Me
Cache the Selector
http://jsfiddle.net/subhranild/rbmu4ah1/http://jsperf.com/subh-cache-query
Chain Me
Group Me
DOM isn't Database
DOM insertion is costly
No iterative DOM manipulation
http://jsperf.com/subh-select-dynamic-options/2
detach() is the game changer
Beware of .css() Iteration
Incorrect approach
Correct approach
Best approach
http://jsperf.com/subh-css-vs-style-few
http://jsperf.com/subh-css-vs-style
Event Delegation
http://jsfiddle.net/subhranild/sawn1rv4/http://jsfiddle.net/subhranild/sawn1rv4/1/
Event Propagation
Understanding how events propagate is an important factor in being able to leverage Event Delegation. Any time one of our anchor tags is clicked, a click event is fired for that anchor, and then bubbles up the DOM tree, triggering each of its parent click event handlers:
● <a>● <li>● <ul #list>● <div #container>● <body>● <html>● document root
This means that anytime you click one of our bound anchor tags, you are effectively clicking the entire document body! This is called event bubbling or event propagation.
http://jsfiddle.net/subhranild/1zcv45kf/http://jsfiddle.net/subhranild/1zcv45kf/1/
bind() vs delegate() vs on()
bind()
The .bind() method attaches the event handler directly to the DOMelement in question ( "#members li a" ). The .click() method isjust a shorthand way to write the .bind() method. $( "#members li a" ).bind( "click", function( e ) {} );$( "#members li a" ).click( function( e ) {} );
● For a simple ID selector, using .bind() not only wires-up quickly, but also when the event fires the event handler is invoked almost immediately.
● The method attaches the same event handler to every matched element in the selection.● It doesn't work for elements added dynamically that matches the same selector.● There are performance concerns when dealing with a large selection.● The attachment is done upfront which can have performance issues on page load.
delegate()
The .delegate method attaches the event handler to the root level document along with the associated selector and event information. By registering this information on the document it allows one event handler to be used for all events that have bubbled (a.k.a. delegated, propagated) up to it. Once an event has bubbled up to the document jQuery looks at the selector/event metadata to determine which handler it should invoke, if any. This extra work has some impact on performance at the point of user interaction, but the initial register process is fairly speedy. $( "#members" ).delegate( "li a", "click", function( e ) {} );
● You have the option of choosing where to attach the selector/event information.● The selection isn't actually performed up front, but is only used to register onto the root element.● Chaining is supported correctly.● Since this technique uses event delegation, it can work with dynamically added elements to the DOM where the selectors match.
on()
That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.
$( "#members li a" ).on( "click", function( e ) {} );$( document ).on( "click", "#members li a", function( e ) {} ); $( "#members" ).on( "click", "li a", function( e ) {} );
● Using the .bind() method is very costly as it attaches the same event handler to every item matched in your selector.● You should stop using the .live() method as it is deprecated and has a lot of problems with it.● The .delegate() method gives a lot of "bang for your buck" when dealing with performance and reacting to dynamically added elements.● That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.
http://jsperf.com/subh-bind-delegate-on
Passing data to the handler
Multiple Event Handlers
Cut the Wire
Abort AJAX
https://jboyblogger.wordpress.com/2014/10/05/why-and-how-to-abort-an-ajax-call-in-jquery/
Go Parallel
Deferred AJAX
https://jboyblogger.wordpress.com/2014/11/25/call-ajax-in-parallel-instead-of-in-a-chain/
Beauty of Loading
.load()
http://plnkr.co/edit/a6dPRHJKdYmiNuRThlOc?p=preview
Understanding Attribute and Property
attr() vs. prop()The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
Concerning boolean attributes, consider a DOM element defined by the HTML markup <input type="checkbox" checked="checked" />, and assume it is in a JavaScript variable named elem:
Hiding Face?? Not Good!!!
Go for data()
A bit of Closure
Be careful while attaching event in loop
http://jsfiddle.net/subhranild/783dsfz2/
http://jsfiddle.net/subhranild/ywr5ka8u/
migrate vs noConflict
migrate
They say there are no second acts in software … well, there are always second acts in software. Especially when the first act bombs. With that in mind, version 1.2.1 of the jQuery Migrate plugin has arrived. It can be used with either jQuery 1.9 or jQuery 2.0.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
https://github.com/jquery/jquery-migrate#readme
noConflict
Load two versions of jQuery . Then, restore jQuery's globally scoped variables to the first loaded jQuery.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
http://plnkr.co/edit/9FTT11dy7NSSMywbOzTy?p=preview
top related