![Page 1: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/1.jpg)
Mistakes I made usingjQuery, and how toavoid them
Andy Peatlingapeatling.com
@apeatling
Saturday, 13 October, 12
![Page 2: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/2.jpg)
Tips for writing betterJavascript using jQuery
Mistakes I made usingjQuery, and how toavoid them
Saturday, 13 October, 12
![Page 3: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/3.jpg)
Hi, I’m Andy
I work for Automattic
I work on WordPress.com
Saturday, 13 October, 12
![Page 4: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/4.jpg)
I used to live in Vancouver...
Saturday, 13 October, 12
![Page 5: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/5.jpg)
...now I live in Winnipeg.
Saturday, 13 October, 12
![Page 6: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/6.jpg)
Saturday, 13 October, 12
![Page 7: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/7.jpg)
jQuery + WordPress
Selectors Events
AJAX + State
Saturday, 13 October, 12
![Page 8: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/8.jpg)
Javascript !== jQueryjavascriptenlightenment.com
Saturday, 13 October, 12
![Page 9: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/9.jpg)
jQuery + WordPress
Saturday, 13 October, 12
![Page 10: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/10.jpg)
Use the version of jQuery bundled with WordPress core.
jQuery + WordPress: 1/3
Saturday, 13 October, 12
![Page 11: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/11.jpg)
Don’t assume you can use $() without conflict.
jQuery + WordPress: 2/3
Saturday, 13 October, 12
![Page 12: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/12.jpg)
Don’t assume you can use $() without conflict.
jQuery + WordPress: 2/3
Saturday, 13 October, 12
![Page 13: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/13.jpg)
Don’t assume you can use $() without conflict.
jQuery + WordPress: 2/3
Saturday, 13 October, 12
![Page 14: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/14.jpg)
Namespace your events!
jQuery + WordPress: 3/3
Don’t be heavy handed in your plugins (or theme).
Saturday, 13 October, 12
![Page 15: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/15.jpg)
Namespace your events!
jQuery + WordPress: 3/3
Don’t be heavy handed in your plugins (or theme).
Saturday, 13 October, 12
![Page 16: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/16.jpg)
Selectors
Saturday, 13 October, 12
![Page 17: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/17.jpg)
Cache your selectors for extra speed!
Selectors: 1/4
Saturday, 13 October, 12
![Page 18: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/18.jpg)
Cache your selectors for extra speed!
60-70% faster!
Selectors: 1/4
Saturday, 13 October, 12
![Page 19: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/19.jpg)
Use chaining where it makes sense.
Selectors: 2/4
Saturday, 13 October, 12
![Page 20: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/20.jpg)
Use chaining where it makes sense.
Selectors: 2/4
Saturday, 13 October, 12
![Page 21: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/21.jpg)
Be aware of the jQuery stack
Selectors: 3/4
Saturday, 13 October, 12
![Page 22: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/22.jpg)
Be aware of the jQuery stack
Selectors: 3/4
Ref: http://bit.ly/PW2hpu
Saturday, 13 October, 12
![Page 23: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/23.jpg)
Use context in your selectors.
Selectors: 4/4
Saturday, 13 October, 12
![Page 24: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/24.jpg)
15-20% faster!
Use context in your selectors.
Selectors: 4/4
Saturday, 13 October, 12
![Page 25: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/25.jpg)
Even faster!
Use context in your selectors.
Selectors: 4/4
Saturday, 13 October, 12
![Page 26: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/26.jpg)
Events
Saturday, 13 October, 12
![Page 27: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/27.jpg)
Use .on()
Events: 1/3
Saturday, 13 October, 12
![Page 28: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/28.jpg)
Use .on()
Events: 1/3
Saturday, 13 October, 12
![Page 29: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/29.jpg)
Use .on()
Events: 1/3
Saturday, 13 October, 12
![Page 30: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/30.jpg)
Use .on()
Events: 1/3
Saturday, 13 October, 12
![Page 31: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/31.jpg)
Oh, and make sure you’re delegating.
Events: 2/3
Saturday, 13 October, 12
![Page 32: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/32.jpg)
Oh, and make sure you’re delegating.
Events: 2/3
Event bound to one element, not potentially hundreds of
elements... faster!
Saturday, 13 October, 12
![Page 33: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/33.jpg)
Custom Events are awesome!
Ref: http://bit.ly/PW2hpu
Events: 3/3
Saturday, 13 October, 12
![Page 34: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/34.jpg)
Custom Events are awesome!
Events: 3/3
Saturday, 13 October, 12
![Page 35: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/35.jpg)
Custom Events are awesome!
Ref: http://bit.ly/PW2hpu
Events: 3/3
Saturday, 13 October, 12
![Page 36: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/36.jpg)
Custom Events are awesome!
Ref: http://bit.ly/PW2hpu
Saturday, 13 October, 12
![Page 37: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/37.jpg)
AJAX + State
Saturday, 13 October, 12
![Page 38: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/38.jpg)
Make use of HTML 5 data attributes
Saturday, 13 October, 12
![Page 39: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/39.jpg)
Make use of HTML 5 data attributes
AJAX + State: 1/3
Saturday, 13 October, 12
![Page 40: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/40.jpg)
Don’t get caught out by the Ain AJAX.
Saturday, 13 October, 12
![Page 41: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/41.jpg)
Don’t get caught out by the Ain AJAX.
AJAX + State: 2/3
Saturday, 13 October, 12
![Page 42: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/42.jpg)
Use $.Deferred() when state getsmore complex.
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 43: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/43.jpg)
What if we want the spinner to show for at least one second?
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 44: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/44.jpg)
We could manage our own state...
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 45: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/45.jpg)
We could manage our own state...
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 46: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/46.jpg)
We could manage our own state...
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 47: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/47.jpg)
Avoid the duplication, use $.Deferred()
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 48: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/48.jpg)
Avoid the duplication, use $.Deferred()
AJAX + State: 3/3
Saturday, 13 October, 12
![Page 49: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/49.jpg)
http://api.jquery.com/category/deferred-object/
Saturday, 13 October, 12
![Page 50: Tips for writing better Javascript using jQuery](https://reader038.vdocument.in/reader038/viewer/2022103114/5558c617d8b42a995d8b473b/html5/thumbnails/50.jpg)
Thanks!
Andy Peatlingapeatling.com
@apeatling
Saturday, 13 October, 12