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

Mistakes I made using jQuery, and how to avoid them Andy Peatling apeatling.wordpress.com @apeatling

10 tips to help youavoid common mistakesWrite faster, simpler to read, and easier to reuse scripts.

1. Javascript !== jQueryjavascriptenlightenment.com/

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

3. Don’t assume you can use $ without conﬂict.jQuery(document).ready(function($) { // You can use $ here.});(function($) { // You can use $ here.}(jQuery));

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

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

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

7. Use context in your selectors.Nooooo! $(‘.widget’) .on(‘click’, showMenu);Yes yes yes. 15-20% faster $(‘.widget’, ‘#sidebar’) .on(‘click’, showMenu); $(‘#sidebar’).ﬁnd(‘.widget’) .on(‘click’, showMenu);

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

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.}

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

10. Use $.Deferred() when state gets more complex.

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

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

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

10. Use $.Deferred() when state gets more complex.http://api.jquery.com/category/deferred-object/

Thanks! Andy Peatlingapeatling.wordpress.com @apeatling

http://eventifier.co	68
http://eastbaywp.com	40
http://lanyrd.com	21
https://si0.twimg.com	15
https://twimg0-a.akamaihd.net	4
https://abs.twimg.com	2
https://twitter.com	1
http://www.eventifier.co	1

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

by apeatling on Aug 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 152

Statistics

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