jQuery Best Practices

A guide for writing better code with jQuery

Transcript

1. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 1/31 JQUERY BEST PRACTICES Greg Franko
2. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 2/31 ABOUT THE SPEAKER JavaScript Engineer at AddThis (We are hiring) Open Source Enthusiast Soon-to-be Author Hates the word HTML5 CONTACT DETAILS Github: https://github.com/gfranko Twitter: https://twitter.com/GregFranko LinkedIn: http://linkedin.com/in/gregfranko Stackoverflow: http://stackoverflow.com/users/1172750/greg-franko
3. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 3/31 WHY DO PEOPLE USE JQUERY? The  DOM  sucks  without  it Ajax  and  JSONP  suck  without  it jQuery  Utility  functions  are  rad jQuery  Deferreds/Promises  are  really rad
4. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 4/31 WHAT OTHER PROJECTS USE JQUERY? Backbone.js Twitter  Bootstrap jQueryUI jQuery  Mobile Millions  of  jQuery  and  jQueryUI Plugins
5. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 5/31 ARE YOU USING JQUERY? IT'S OKAY IF YOU AREN'T
6. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 6/31 JQUERY READY EVENT
7. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 7/31 MOST PROJECTS START LIKE THIS: or use a shorter version... $("document").ready(function() { // The DOM is ready! // The rest of the code goes here }); $(function() { // The DOM is ready! // The rest of the code goes here });
8. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 8/31 THIS IS FINE... If you know the environments where your code will run If you do not care about page load performance If you don't care about best practices
9. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 9/31 THIS IS BETTER: // IIFE - Immediately Invoked Function Expression (function($, window, document) { // The $ is now locally scoped // Listen for the jQuery ready event on the document $(function() { // The DOM is ready! }); // The rest of the code goes here! }(window.jQuery, window, document)); // The global jQuery object is passed as a parameter jsbin  example
10. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 10/31 THIS IS BEST: // IIFE - Immediately Invoked Function Expression (function(yourcode) { // The global jQuery object is passed as a parameter yourcode(window.jQuery, window, document); }(function($, window, document) { // The $ is now locally scoped // Listen for the jQuery ready event on the document $(function() { // The DOM is ready! }); // The rest of the code goes here! } })); jsbin  example
11. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 11/31 DOM MANIPULATION
12. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 12/31 MOST PROJECTS DO THIS: // Set's an element's title attribute using it's current text $(".container input#elem").attr("title", $(".container input#elem").text( )); // Set's an element's text color to red $(".container input#elem").css("color", "red"); // Makes the element fade out $(".container input#elem").fadeOut();
13. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 13/31 THIS IS FINE... If you like repeating yourself If you do not care about performance If you don't care about best practices
14. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 14/31 THIS IS BETTER: SIMPLIFY YOUR SELECTORS // Set's an element's title attribute using it's current text $("#elem").attr("title", $("#elem").text()); // Set's an element's text color to red $("#elem").css("color", "red"); // Makes the element fade out $("#elem").fadeOut();
15. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 15/31 THIS IS BEST: CACHE YOUR SELECTORS IN VARIABLES // Stores the live DOM element inside of a variable var elem = $("#elem"); // Set's an element's title attribute using it's current text elem.attr("title", elem.text()); // Set's an element's text color to red elem.css("color", "red"); // Makes the element fade out elem.fadeOut();
16. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 16/31 or use a shorter version... CHAINING // Stores the live DOM element inside of a variable var elem = $("#elem"); // Chaining elem.attr("title", elem.text()).css("color", "red").fadeOut();
17. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 17/31 ANOTHER DOM EXAMPLE
18. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 18/31 MOST PROJECTS DO THIS: // Dynamically building an unordered list from an array var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"], list = $("ul.people"); $.each(localArr, function(index, value) { list.append("<li id=" + index + ">" + value + "</li>"); });
19. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 19/31 THIS IS FINE... If you like repeatedly appending elements to the DOM If you like slow web apps If you don't care about best practices
20. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 20/31 THIS IS BEST: APPEND ONCE // Dynamically building an unordered list from an array var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"], list = $("ul.people"), dynamicItems = ""; $.each(localArr, function(index, value) { dynamicItems += "<li id=" + index + ">" + value + "</li>"; }); list.append(dynamicItems);
21. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 21/31 EVENT HANDLING
22. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 22/31 MOST PROJECTS DO THIS: $("#longlist li").on("mouseenter", function() { $(this).text("Click me!"); }); $("#longlist li").on("click", function() { $(this).text("Why did you click me?!"); });
23. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 23/31 THIS IS FINE... If you like using a lot of memory for event handlers If you don't have many DOM elements If you don't care about best practices
24. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 24/31 THIS IS BETTER: DRY (DON'T REPEAT YOURSELF) var listItems = $("#longlist li"); listItems.on({ "mouseenter": function() { $(this).text("Click me!"); }, "click": function() { $(this).text("Why did you click me?!"); } });
25. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 25/31 THIS IS BEST: EVENT DELEGATION var list = $("#longlist"); list.on("mouseenter", "li", function(){ $(this).text("Click me!"); }); list.on("click", "li", function() { $(this).text("Why did you click me?!"); });
26. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 26/31 AJAX
27. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 27/31 MOST PROJECTS DO THIS: function getName(personid) { var dynamicData = {}; dynamicData["id"] = personID; $.ajax({ url: "getName.php", type: "get", data: dynamicData, success: function(data) { // Updates the UI based the ajax result $(".person-name").text(data.name); } }); } getName("2342342");
28. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 28/31 THIS IS FINE... If you like inflexible code If you don't have to worry about multiple ajax requests If you don't care about best practices
29. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 29/31 THIS IS BEST: USES PROMISES, VERY FLEXIBLE function getName(personid) { var dynamicData = {}; dynamicData["id"] = personID; return $.ajax({ url: "getName.php", type: "get", data: dynamicData }); } getName("2342342").done(function(data) { // Updates the UI based the ajax result $(".person-name").text(data.name); });
30. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 30/31 WHAT ARE YOU INTERESTED IN?
31. 2/14/2014 jQuery Best Practices http://gregfranko.com/jquery-best-practices/#/ 31/31 POSSIBLE TOPICS jQuery and CSS jQuery Custom Events - Pub/Sub jQuery and Object Literals jQuery Utility Functions jQuery Event Namespaces The future of jQuery jQuery Event Namespaces Authoring jQuery Plugins Return False vs Event.preventDefault() Animation with Promises