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.

jQuery Has Coding Standards

838 views

Published on

Presentation from the 2015 HighEdWeb Conference

Published in: Technology
  • Be the first to comment

  • Be the first to like this

jQuery Has Coding Standards

  1. 1. jQuery Has Coding Standards Now You Tell Me...
  2. 2. Who am I? RJ Bruneel University of Central Florida Web Applications Developer MARKETING DEPARTMENT ALUMNI ’97 RJ.Bruneel@ucf.edu
  3. 3. Why use best practices & standards anyway?
  4. 4. Topics Loading jQuery jQuery Variables jQuery Selectors jQuery DOM Manipulation jQuery Events jQuery AJAX Miscellaneous
  5. 5. Loading jQuery
  6. 6. <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script> Loading jQuery from a local server Loading jQuery
  7. 7. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> Loading jQuery from a content delivery network (CDN) Loading jQuery
  8. 8. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> Relying solely on a CDN Loading jQuery
  9. 9. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery- 2.1.4.min.js" type="text/javascript"></script>');</script> Implementing a fallback Loading jQuery
  10. 10. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> Using protocol dependent URLs Loading jQuery
  11. 11. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> Using protocol independent URLs Loading jQuery
  12. 12. <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> </head> Loading jQuery at the top of the page Loading jQuery
  13. 13. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> </body> </html> Loading jQuery at the bottom of the page Loading jQuery
  14. 14. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> Loading jQuery 2.x if you support IE 6, 7 or 8 Loading jQuery
  15. 15. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script> Loading jQuery 1.x if you support IE 6, 7 or 8 Loading jQuery
  16. 16. jQuery Variables
  17. 17. var bigcontainer = $("#container"); Disregarding naming standards jQuery Variables
  18. 18. var $bigContainer = $("#container"); Following naming standards jQuery Variables
  19. 19. for(var i = 0; i < 50; i++) { $("#container").text(i); } Searching the DOM for the same element more than once jQuery Variables
  20. 20. var $container = $("#container"); for(var i = 0; i < 50; i++) { $container.text(i); } Caching jQuery objects using variables jQuery Variables
  21. 21. $("#link").addClass("bold"); $("#link").fadeIn(); $("#link").removeClass("bold"); Calling multiple methods on the same jQuery object jQuery Variables
  22. 22. $("#link") .addClass("bold") .fadeIn() .removeClass("bold"); Using the chaining feature jQuery Variables
  23. 23. jQuery Selectors
  24. 24. $(".products"); Searching the DOM for a single element with a class name jQuery Selectors
  25. 25. $("#products"); Searching the DOM using an ID selector jQuery Selectors
  26. 26. $("#container table.attendees td.column"); $("#outer-container #inner"); $("div#inner"); Using multiple IDs, excessive specificity or nesting when selecting an ID jQuery Selectors
  27. 27. $("#product-container"); $("#product-container").find(".products"); $(".products", "#products-container"); Keeping selectors simple or giving them a context jQuery Selectors
  28. 28. $(".container > *"); $(":radio"); $(":checkbox"); Using universal selectors jQuery Selectors
  29. 29. $(".container").children(); $("input[type=checkbox]"); $("input[type=radio]"); Using the children method and being more specific jQuery Selectors
  30. 30. jQuery DOM Manipulation
  31. 31. var $list = $("#list"); for(var i = 0; i < 1000; i++) { $list.append("<li>"+i+"</li>"); } Appending the same element many times to the DOM jQuery DOM Manipulation
  32. 32. var array = []; for(var i = 0; i < 1000; i++){ array[i] = "<li>"+i+"</li>"; } $list.append(array.join("")); Using string concatenation or array.join() before appending jQuery DOM Manipulation
  33. 33. $("#element-not-found").slideUp(); Running jQuery methods on elements that don’t exist jQuery DOM Manipulation
  34. 34. var $noSuchElement = $("#element-not-found"); if ($noSuchElement.length) { $noSuchElement.slideUp(); } Verifying objects exist before using them jQuery DOM Manipulation
  35. 35. var $list = $("#list-container > ul"); // Complicated DOM manipulation methods Performing lots of DOM manipulation inline jQuery DOM Manipulation
  36. 36. var $list = $("#list-container > ul").detach(); // Complicated DOM manipulation $list.appendTo("#list-container"); Detaching elements before DOM manipulation and adding them back jQuery DOM Manipulation
  37. 37. jQuery Events
  38. 38. <a id="link" href="#" onclick="linkEventHandler();">link</a> Putting javascript in the HTML code jQuery Events
  39. 39. $("#link").on("click", myEventHandler); Using jQuery to bind events jQuery Events
  40. 40. $("#link").on("click", function() { alert("Link clicked!"); }); Using anonymous functions jQuery Events
  41. 41. function linkClickHandler() { alert("Link clicked!"); } $("#link").on("click", linkClickHandler); Creating a method for your click handlers jQuery Events
  42. 42. $(function() { alert("DOM is ready"); }); Using anonymous function for the document ready event handler jQuery Events
  43. 43. function initPage() { alert("DOM is ready"); } $(initPage); Using named function for the document ready event handler jQuery Events
  44. 44. $("#list a").on("click", myClickHandler); Duplicating event handlers jQuery Events
  45. 45. $("#list").on("click", "a", myClickHandler); Using event delegation jQuery Events
  46. 46. jQuery AJAX
  47. 47. var jqxhr = $.get(url, successHandler); Using .getJson() or .get() jQuery AJAX
  48. 48. var jqxhr = $.ajax({ url: url, success: successHandler }); jqxhr.done(successHandler); Using $.ajax() jQuery AJAX
  49. 49. var jqxhr = $.ajax({ url: "ajaxURL.php?param1=title&param2=name" }); Putting parameters in the URL jQuery AJAX
  50. 50. var jqxhr = $.ajax({ url: url, data: { param1: "Title", param1: "Name" } }); Putting parameters in the data object jQuery AJAX
  51. 51. var jqxhr = $.ajax({ url: url }); jqxhr.done(successHandler); Leaving off error handling jQuery AJAX
  52. 52. var jqxhr = $.ajax({ statusCode: { 404: handler404, 500: handler500 } }); jqxhr.fail(failureHandler); Implementing error handling jQuery AJAX
  53. 53. Miscellaneous
  54. 54. $("#error-message").css("color":"red", "font- weight":"bold"); Using the CSS method in jQuery Miscellaneous
  55. 55. .error { "color": "red"; "font-weight": "bold"; } $("#error-message").addClass("error"); Using addClass method Miscellaneous
  56. 56. $link .attr("href", "#") .attr("title", "My Title") .attr("rel", "external"); Repeating jQuery methods Miscellaneous
  57. 57. $link.attr({ "href": "#", "title": "My Title", "rel": "external" }); Using object literals for parameters Miscellaneous
  58. 58. Questions?
  59. 59. THANK YOU Download Slides http://www.slideshare.net/RJBruneel/jquery-has-coding-standards Additional Resources http://www.jquery.com http://lab.abhinayrathore.com/jquery-standards/ http://gregfranko.com/jquery-best-practices/ Contact RJBruneel@ucf.edu

×