Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DOM… avec pas de jQuery!?

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! :)

Rafaël Blais Masson

December 03, 2011
Tweet

More Decks by Rafaël Blais Masson

Other Decks in Programming

Transcript

  1. // 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) }
  2. $A = function(it) { var array = [] for (var

    i = 0; i < it.length; i++) array.push(it[i]) return array }
  3. 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)
  4. 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)
  5. 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)
  6. 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)
  7. // <div class="empty"> var div = $('.empty') div.innerHTML = 'Not

    empty!' div.className.replace('empty', '')
  8. // <div class="empty"> var div = $('.empty') div.innerHTML = 'Not

    empty!' div.className = div.className.replace('empty', '')
  9. // <div class="halfempty empty"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.className = div.className.replace('empty', '')
  10. // <div class="halfempty empty"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.className = div.className.replace(/\bempty\b/, '')
  11. // <div class="half_empty empty"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.className = div.className.replace(/\bempty\b/, '')
  12. // <div class="half-empty empty"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.className = div.className.replace(/\bempty\b/, '')
  13. // <div class="half-empty empty"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.className = div.className.replace(/(^|\s)empty(\s|$)/, '')
  14. // <div class="half-empty empty not-yet"> var div = $('.empty') div.innerHTML

    = 'Not empty!' div.className = div.className.replace(/(^|\s)empty(\s|$)/, '')
  15. // <div class="half-empty empty not-yet"> var div = $('.empty') div.innerHTML

    = 'Not empty!' div.className = div.className .replace(/(^|\s)empty(\s|$)/, '$1$2')
  16. // <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')
  17. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty')
  18. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty foo')
  19. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty foo')
  20. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty')
  21. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty').remove('foo')
  22. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty').remove('foo')
  23. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty')
  24. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty') div.classList.remove('foo')
  25. // <div class="empty foo"> var div = $('.empty') div.innerHTML =

    'Not empty!' div.classList.remove('empty') div.classList.remove('foo')
  26. // <div class="empty foo"> var div = $('.empty') div.html('Not empty!')

    div.removeClass('empty') div.removeClass('foo')