jQuery Bad Practices

Let's learn some bad jQuery practices to avoid them.

Transcript

1. jQuery Bad Practices Filipe Costa
2. Filipe Costa 4UBDL
   #VJMEFST @filipebarcos BCPVUNF pMJQFCBSDPT
3. DISCLAIMER
4. Really?? jQuery?!
5. https://github.com/search?l=Ruby&q=jquery&ref=advsearch&type=Repositories https://github.com/search?l=Python&q=jquery&ref=advsearch&type=Repositories https://github.com/search?l=JavaScript&q=jquery&ref=advsearch&type=Repositories
6. People say sh** about jQuery
7. Obtrusive Hard to follow Hard to maintain Disorganized Bloated Slow Difficult to talk about
8. ;(function(window, document, $) {! var isInputSupported = 'placeholder' in document.createElement('input');! var isTextareaSupported = 'placeholder' in document.createElement('textarea');! var prototype = $.fn;! var valHooks = $.valHooks;! var propHooks = $.propHooks;! var hooks;! var placeholder;! ! if (isInputSupported && isTextareaSupported) {! placeholder = prototype.placeholder = function() {! return this;! };! placeholder.input = placeholder.textarea = true;! } else {! ! placeholder = prototype.placeholder = function() {! var $this = this;! $this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')! .not('.placeholder')! .bind({! 'focus.placeholder': clearPlaceholder,! 'blur.placeholder': setPlaceholder! }).data('placeholder-enabled', true).trigger('blur.placeholder');! return $this;! };! placeholder.input = isInputSupported;! placeholder.textarea = isTextareaSupported;! hooks = {! 'get': function(element) {! var $element = $(element);! var $passwordInput = $element.data('placeholder-password');! if ($passwordInput) {! return $passwordInput[0].value;! }! return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;! },! 'set': function(element, value) {! var $element = $(element);! var $passwordInput = $element.data('placeholder-password');! if ($passwordInput) {! return $passwordInput[0].value = value;! }! if (!$element.data('placeholder-enabled')) {! return element.value = value;! }!
11. Caching
12. function whatever() {! $(".container input#elem").attr("title", $(".container input#elem").text());! $(".container input#elem").css("color", "red");! $(".container input#elem").fadeOut();! }
13. This is BAD!
14. function whateverBetter() {! var elem = $("#elem");! elem.attr("title", elem.text());! elem.css("color", "red");! elem.fadeOut();! }
15. We can do better than that
16. function whateverEvenBetter() {! var elem = $("#elem");! elem.attr("title", elem.text())! .css("color", "red")! .fadeOut();! }
17. Querying DOM
18. Yo
19. $("div.data .user"); $(".data section.user");
20. Excessive Specificity
21. $(".data table.users td.user"); $(".data td.user");
22. Avoid Sizzle http://learn.jquery.com/performance/optimize-selectors/
23. $('#content p.title').fadeIn(); $('#content').find('p.title').fadeIn();
24. Avoid Universal Selectors
25. $(".countries :selected"); $(".countries input:selected");
26. Context
27. $('.selectbox-user').toggle(); $('.selectbox-user', '#user-table').toggle();
28. $(this) “jQuery way"
29. $('.input-field').on('focus', function()) {! console.log($(this).val());! } $('.input-field').on('focus', function()) {! console.log(this.value);! }
30. DRY
31. function whateverEvenBetter() {! var elem = $("#elem");! elem.attr("title", elem.text())! .css("color", "red")! .fadeOut();! }
32. AJAX
33. function getCities(state) {! $.ajax({! url: '/cities',! type: 'get',! data: state,! success: function(data) {! $('.user-form-states-select').html(data);! }! });! }
34. That’s just the beginning
35. //functions.js! function getCities(state) {! return $.ajax({! url: '/cities',! type: 'get',! data: state! });! }! ! //user.js! var FillSelectBox = function(data) {! $('.user-form-state-select').html(data);! }! ! getCities('CE').then(FillSelectBox);
36. Optimisation
37. jQuery won’t take care of UR dumbness
38. var names = ["Greg", "Peter", "Kyle", "Danny", "Mark"];! $.each(names, function(index, value) {! $("ul.people").append("<li id=" + index + ">" + value + "</li>");! });
39. Caching again?
40. var names = ["Greg", "Peter", "Kyle", "Danny", "Mark"],! list = $("ul.people");! $.each(names, function(index, value) {! list.append("<li id=" + index + ">" + value + "</li>");! });
41. We can do better than that
42. var names = ["Greg", "Peter", "Kyle", "Danny", "Mark"],! ! list = $("ul.people"),! ! listItems = "";! ! $.each(names, function(index, value) {! listItems += "<li id=" + index + ">" + value + "</li>";! });! ! list.append(dynamicItems);
43. Safety
44. NOPE
45. var j = jQuery.noConflict();
46. jQuery(document).ready(function($) { ! //your code here! });
47. But U R cool
48. So U ain’t use jQuery
49. jk
50. (function($) {! //your code here! })(jQuery);
51. </code>
52. I use jQuery and I’m still cool
53. jQuery is your FRIEND
54. Learn how to use it
55. jQuery is just a tool
56. USUALLY, it’s not tool's fault
57. Thank you! Filipe Costa @filipebarcos