DOM… avec pas de jQuery!?

Sensibilisez-vous aux dessous peu glorieux des navigateurs dont jQuery vous épargne la complexité. Succombez au charme de ces API de bas niveau et apprenez à en tirer profit dans votre code de tous les jours!

Pour les plus téméraires, tentez votre chance à la création de votre propre librairie DOM à l’aide du modèle de départ disponible à l’adresse https://github.com/rafBM/diy-dom-library

Présentation donnée à l’occasion de la version 2.0 de l’OpenCode Québec, le 1er décembre 2011. http://opencode.ca/

PS : Si certaines slides manquent clairement d’explications verbales supplémentaires, vous n’aviez qu’à être sur place au moment opportun! :)

Transcript

1. DOM … avec pas de jQuery!?
3. ☺
5. favorite-toolkit.js — — —
6. // favorite-toolkit.js © 2011 Rafaël Blais Masson // heavily inspired by RightJS <http://rightjs.org> var $A = function(i) { return Array.prototype.slice.call(i, 0) } , $$ = function(s) { return $A(document.querySelectorAll(s)) } , $E = function(e) { return document.createElement(e) } , $ = function(s) { return document.querySelector(s) }
7. $A = function(i) { return Array.prototype.slice.call(i, 0) }
8. $A = function(it) { var array = [] for (var i = 0; i < it.length; i++) array.push(it[i]) return array }
9. $A = function(i) { return Array.prototype.slice.call(i, 0) }
10. $$ = function(s) { return $A(document.querySelectorAll(s)) }
11. $E = function(e) { return document.createElement(e) }
12. $ = function(s) { return document.querySelector(s) }
13. Exemples
14. var rows = document.querySelectorAll('tr') rows.forEach(function(row, index) { })
15. TypeError: Object #<NodeList> has no method 'forEach'
16. var rows = document.querySelectorAll('tr') rows.forEach(function(row, index) { })
17. var rows = $A(document.querySelectorAll('tr')) rows.forEach(function(row, index) { })
18. var rows = $$('tr') rows.forEach(function(row, index) { })
19. var rows = $$('tr') rows.forEach(function(row, index) { row.className = (index % 2) ? 'odd' : 'even' })
20. $$('tr').forEach(function(row, index) { row.className = (index % 2) ? 'odd' : 'even' })
21. var ol = document.createElement('ol') for (var li, num = 1; num <= 3; num++) { li = document.createElement('li') li.innerHTML = 'List item #' + num ol.appendChild(li) } document.querySelector('body').appendChild(ol)
22. var ol = $E('ol') for (var li, num = 1; num <= 3; num++) { li = $E('li') li.innerHTML = 'List item #' + num ol.appendChild(li) } document.querySelector('body').appendChild(ol)
23. var ol = $E('ol') for (var li, num = 1; num <= 3; num++) { li = $E('li') li.innerHTML = 'List item #' + num ol.appendChild(li) } $$('body')[0].appendChild(ol)
24. var ol = $E('ol') for (var li, num = 1; num <= 3; num++) { li = $E('li') li.innerHTML = 'List item #' + num ol.appendChild(li) } $('body').appendChild(ol)
25. rly?
26. // <div class="empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className.replace('empty', '')
27. // <div class="empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace('empty', '')
28. // <div class="halfempty empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace('empty', '')
29. // <div class="halfempty empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace(/\bempty\b/, '')
30. // <div class="half_empty empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace(/\bempty\b/, '')
31. // <div class="half-empty empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace(/\bempty\b/, '')
32. // <div class="half-empty empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace(/(^|\s)empty(\s|$)/, '')
33. // <div class="half-empty empty not-yet"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className.replace(/(^|\s)empty(\s|$)/, '')
34. // <div class="half-empty empty not-yet"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className .replace(/(^|\s)empty(\s|$)/, '$1$2')
35. // <div class="half-empty empty not-yet"> var div = $('.empty') div.innerHTML = 'Not empty!' div.className = div.className .replace(/(^|\s)empty(\s|$)/, '$1$2') .replace(/(^|\s)half-empty(\s|$)/, '$1$2')
37. // <div class="empty"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty')
38. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty')
39. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty foo')
40. INVALID_CHARACTER_ERR: DOM Exception 5
41. INVALID_CHARACTER_ERR: DOM Exception 5
42. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty foo')
43. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty')
44. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty').remove('foo')
45. TypeError: Cannot call method 'remove' of undefined
46. TypeError: Cannot call method 'remove' of undefined
47. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty').remove('foo')
48. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty')
49. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty') div.classList.remove('foo')
51. // <div class="empty foo"> var div = $('.empty') div.innerHTML = 'Not empty!' div.classList.remove('empty') div.classList.remove('foo')
52. // <div class="empty foo"> var div = $('.empty') div.html('Not empty!') div.removeClass('empty') div.removeClass('foo')
53. // <div class="empty foo"> var div = $('.empty') div.html('Not empty!') div.removeClass('empty foo')
54. // <div class="empty foo"> var div = $('.empty') div.html('Not empty!') div.removeClass('foo empty')
55. // <div class="empty foo"> var div = $('.empty') div.html('Not empty!') .removeClass('foo empty')
56. // <div class="empty foo"> $('.empty').html('Not empty!') .removeClass('foo empty')
57. DOM #sux jQuery #rockz
58. <p>I’m a paragraph.</p> <div> </div> var p = $('p') $('div').append(p)
59. <div> <p>I’m a paragraph.</p> </div> var p = $('p') $('div').append(p)
60. <p>I’m a paragraph.</p> <div> </div> var p = $('p') $('div').append(p)
61. <p>I’m a paragraph.</p> <div> </div> <div> </div> var p = $('p') $('div').append(p)
62. <div> <p>I’m a paragraph.</p> </div> <div> <p>I’m a paragraph.</p> </div> var p = $('p') $('div').append(p)
63. jQuery #rockz DOM #sux
64. jQuery DOM
65. $('a.lightbox').bind('click', function() { $.ajax({ url: $(this).attr('href') // ... }) return false })
66. $('a.lightbox').bind('click', function() { $.ajax({ url: this.href // ... }) return false })
67. $('a.hash-link').bind('click', function() { window.location.href = '#' + this.href.match(/\/.*$/)[0] })
68. $('a.hash-link').bind('click', function() { window.location.href = '#' + this.pathname })
70. github.com/rafBM/diy-dom-library
74. lacomtoiserie.ca
75. @rafBM github.com/rafBM rafbmasson@gmail.com
76. MERCI Questions, commentaires, etc etc…