Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mistakes I made using jQuery, and how to avoid them.

5,167 views

Published on

Published in: Technology
  • Be the first to comment

Mistakes I made using jQuery, and how to avoid them.

  1. Mistakes I made using jQuery, and how to avoid them Andy Peatling apeatling.wordpress.com @apeatling
  2. 10 tips to help youavoid common mistakesWrite faster, simpler to read, and easier to reuse scripts.
  3. 1. Javascript !== jQueryjavascriptenlightenment.com/
  4. 2. Use the version of jQuerybundled with WordPress core. function mytheme_add_js() { wp_enqueue_script( ‘jquery’ ); } add_action( ‘wp_enqueue_scripts’, ‘mytheme_add_js’ );
  5. 3. Don’t assume you can use $ without conflict.jQuery(document).ready(function($) { // You can use $ here.});(function($) { // You can use $ here.}(jQuery));
  6. 4. Cache your selectors!Nooooo! $(‘#mywidget’).appendTo(‘#sidebar’); $(‘#mywidget’).addClass(‘widget’); $(‘#mywidget’).hide(); $(‘#mywidget’).fadeIn(‘fast’);Yes yes yes - 60-70% faster var myWidget = $(‘#mywidget’); myWidget.appendTo(‘#sidebar’); myWidget.addClass(‘widget’); myWidget.hide(); myWidget.fadeIn(‘fast’);
  7. 5. Make use of chaining.Nooooo! var myWidget = $(‘#mywidget’); myWidget.appendTo(‘#sidebar’); myWidget.addClass(‘widget’); myWidget.hide(); myWidget.fadeIn(‘fast’);Yes yes yes - same performance, less code. var myWidget = $(‘#mywidget’); myWidget .appendTo(‘#sidebar’) .addClass(‘widget’) .hide() .fadeIn(‘fast’);
  8. 6. Use .on() not .bind(), .live() or .delegate().Nooooo! $(‘#widget’).delegate(‘a.mylink’, ‘click’, function(e) { // Link clicked } );Yes yes yes. $(‘#widget’).on(‘click’, ‘a.mylink’, function(e) { // Link clicked } );
  9. 7. Use context in your selectors.Nooooo! $(‘.widget’) .on(‘click’, showMenu);Yes yes yes. 15-20% faster $(‘.widget’, ‘#sidebar’) .on(‘click’, showMenu); $(‘#sidebar’).find(‘.widget’) .on(‘click’, showMenu);
  10. 8. Namespace your events.Nooooo! $(‘#sidebar’).find(‘.widget’) .off(‘click’);Yes yes yes. $(‘#sidebar’).find(‘.widget’) .on(‘click.myplugin’, highlight); $(‘#sidebar’).find(‘.widget’) .off(‘click.myplugin’);
  11. 9. Don’t get caught out by the A in AJAX.Nooooo!function buildPostsWidget() {    var widget   = $(#widget).hide(),        spinner  = $(#spinner).show(),        getPosts = $.get( ajaxurl, { action: get_posts });     getPosts.done( function( response ) {        widget.html( response );    });     spinner.hide();    widget.show(); // Oh dear.}
  12. 9. Don’t get caught out by the A in AJAX.Yes yes yes. function buildPostsWidget() {     var widget   = $(#widget).hide(),         spinner  = $(#spinner).show(),         getPosts = $.get( ajaxurl, { action: get_posts });       getPosts.done( function( response ) {         spinner.hide();         widget.html( response ).show();     }); }
  13. 10. Use $.Deferred() when state gets more complex.
  14. What if we want the spinner to show for at least one second?function buildPostsWidget() {    var widget   = $(#widget).hide(),        spinner  = $(#spinner).show(),        getPosts = $.get( ajaxurl, { action: get_posts });     getPosts.done( function( response ) {        spinner.hide();        widget.html( response ).show();    });}
  15. We could manage the state ourselves - Noooo! function buildPostsWidget() {     var widget   = $(#widget).hide(),         spinner  = $(#spinner).show(),         getPosts = $.get( ajaxurl, { action: get_posts }),         timerComplete = false,         ajaxComplete  = false;       setTimeout( function() {         if ( ajaxComplete ) {             spinner.hide();             widget.show();         } timerComplete = true;     }, 1000 );       getPosts.done( function( response ) {         widget.html( response );           if ( timerComplete ) {             spinner.hide();             widget.show();         } ajaxComplete = true;     }); }
  16. Use $.Deferred()function buildPostsWidget() {    var widget   = $(#widget).hide(),        spinner  = $(#spinner).show(),        getPosts = $.get( ajaxurl, { action: get_posts }), timer;    timer = $.Deferred(function( deferred ) {        setTimeout( deferred.resolve, 1000 );    }).promise();    $.when( getPosts, timer ).then( function( response ) {        spinner.hide();        widget.html( response ).show();    });}
  17. Use $.Deferred()function buildPostsWidget() {    var widget   = $(#widget).hide(),        spinner  = $(#spinner).show(),        getPosts = $.get( ajaxurl, { action: get_posts }), timer;    timer = $.Deferred(function( deferred ) {        setTimeout( deferred.resolve, 1000 );    }).promise();    $.when( getPosts, timer ).then( function( response ) {        spinner.hide();        widget.html( response ).show();    });}
  18. 10. Use $.Deferred() when state gets more complex.http://api.jquery.com/category/deferred-object/
  19. Thanks! Andy Peatlingapeatling.wordpress.com @apeatling

×