Skip to content

Latest commit

 

History

History
1198 lines (866 loc) · 26.6 KB

README-fr.md

File metadata and controls

1198 lines (866 loc) · 26.6 KB
Raw

Vous n'avez pas besoin de jQuery Build Status

De nos jours, les environnements frontend évoluent si rapidement que les navigateurs récents ont déjà implémenté beaucoup d'API DOM/BOM suffisantes. Il n'est pas utile d'apprendre jQuery à partir de rien pour manipuler le DOM ou les évènements. Pendant ce temps, grâce à l'efficacité de bibliothèques frontend comme React, Angular et Vue, manipuler directement le DOM est devenu obsolète, jQuery n'a jamais été aussi peu important. Ce projet résume la plupart des alternatives à jQuery à l'aide d'implémentations natives, compatibles avec IE 10+.

Sommaire

  1. Traductions
  2. Sélecteur jQuery
  3. Style et CSS
  4. Manipulation du DOM
  5. Ajax
  6. Évènements
  7. Utilitaires
  8. Promesses
  9. Animation
  10. Alternatives
  11. Navigateurs compatibles

Traductions

Sélecteur jQuery

À la place des sélecteurs communs comme class, id ou attribute il est possible d'utiliser document.querySelector ou document.querySelectorAll. Les différences sont que:

  • document.querySelector retourne le premier élément trouvé,
  • document.querySelectorAll retourne tous les éléments trouvés sous forme d'une NodeList. Il est possible de le convertir en Array à l'aide de [].slice.call(document.querySelectorAll(selector) || []);,
  • si aucun élément n'a été trouvé, jQuery peut retourner [] alors que l'API DOM va retourner null. Faites attention au Null Pointer Exception. Vous pouvez aussi utiliser || pour définir la valeur par défaut si rien n'a été trouvé, comme document.querySelectorAll(selector) || [].

Remarque: document.querySelector et document.querySelectorAll sont assez LENTS, essayez plutôt d'utiliser getElementById, document.getElementsByClassName ou document.getElementsByTagName si vous souhaitez obtenir un gain de performance.

  • 1.0 Requête par sélecteur

    // jQuery
$('selector');

// Natif
document.querySelectorAll('selector');

  • 1.1 Requête par classe

    // jQuery
$('.class');

// Natif
document.querySelectorAll('.class');

// ou
document.getElementsByClassName('class');

  • 1.2 Requête par id

    // jQuery
$('#id');

// Natif
document.querySelector('#id');

// ou
document.getElementById('id');

  • 1.3 Requête par attribut

    // jQuery
$('a[target=_blank]');

// Natif
document.querySelectorAll('a[target=_blank]');

  • 1.4 Requête par descendants

    // jQuery
$el.find('li');

// Natif
el.querySelectorAll('li');

  • 1.5 Éléments voisins/précédents/suivants

    • Éléments voisins

      // jQuery
$el.siblings();

// Natif
[].filter.call(el.parentNode.children, function(child) {
  return child !== el;
});

    • Éléments précédents

      // jQuery
$el.prev();

// Natif
el.previousElementSibling;

    • Éléments suivants

      // next
$el.next();
el.nextElementSibling;

  • 1.6 Plus proche

    Retourne le premier élément trouvé à l'aide du sélecteur fourni, parcourant l'élément actuel vers le document.

    // jQuery
$el.closest(queryString);

// Natif - Seulement le dernier, ne fonctionne pas sous IE
el.closest(selector);

// Natif - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

  • 1.7 Parents jusqu'à

    Retourne les ancêtres de chaque élément dans l'ensemble d'éléments trouvés courants, jusqu'à (sans l'inclure) l'élément correspondant au sélecteur, le noeud DOM ou l'objet JQuery.

    // jQuery
$el.parentsUntil(selector, filter);

// Natif
function parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // la correspondance commence à partir du parent
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, filter)) {
        result.push(el);
      }
    }
    el = el.parentElement;
  }
  return result;
}

  • 1.8 Formulaire

    • Input/Textarea

      // jQuery
$('#my-input').val();

// Natif
document.querySelector('#my-input').value;

    • Obtenir l'index du e.currentTarget entre .radio

      // jQuery
$(e.currentTarget).index('.radio');

// Natif
[].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);

  • 1.9 Contenus Iframe

    $('iframe').contents() retourne contentDocument pour cet iframe en particulier

    • Contenus de l'Iframe

      // jQuery
$iframe.contents();

// Natif
iframe.contentDocument;

    • Requête Iframe

      // jQuery
$iframe.contents().find('.css');

// Natif
iframe.contentDocument.querySelectorAll('.css');

⬆ remonter

Style & CSS

  • 2.1 CSS

    • Obtenir le style

      // jQuery
$el.css("color");

// Natif
// NOTE: Bug connu, retournera 'auto" si la valeur du site est 'auto'
const win = el.ownerDocument.defaultView;
// null signifie ne pas retourner les pseudo styles
win.getComputedStyle(el, null).color;

    • Définir le style

      // jQuery
$el.css({ color: "#ff0011" });

// Natif
el.style.color = '#ff0011';

    • Obtenir/Définir les styles

      Notez que si vous souhaitez définir plusieurs styles à la fois, you devriez vous référer à la méthode setStyles du paquet oui-dom-utils.

    • Ajouter une classe

      // jQuery
$el.addClass(className);

// Natif
el.classList.add(className);

    • Supprimer une classe

      // jQuery
$el.removeClass(className);

// Natif
el.classList.remove(className);

    • Possède une classe

      // jQuery
$el.hasClass(className);

// Natif
el.classList.contains(className);

    • Basculer une class

      // jQuery
$el.toggleClass(className);

// Natif
el.classList.toggle(className);

  • 2.2 Largeur et Hauteur

    Travailler avec la hauteur ou la largeur est en théorie identique, prenons la hauteur pour exemple:

    • Hauteur de la fenêtre

      // hauteur de la fenêtre
$(window).height();
// se comporte comme jQuery sans ascenseur
window.document.documentElement.clientHeight;
// avec ascenseur
window.innerHeight;

    • Hauteur du document

      // jQuery
$(document).height();

// Natif
document.documentElement.scrollHeight;

    • Hauteur de l'élement

      // jQuery
$el.height();

// NatiF
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// précis à l'entier près (quand `border-box`, son `height - border`; quand `content-box`, son `height + padding`)
el.clientHeight;
// précis à la décimale près (quand `border-box`, son `height`; quand `content-box`, son `height + padding + border`)
el.getBoundingClientRect().height;

  • 2.3 Position et offset

    • Position

      Récupère les coordonnées courantes de l'élement relatif à l'offset parent.

      // jQuery
$el.position();

// Natif
{ left: el.offsetLeft, top: el.offsetTop }

    • Offset

      Récupère les coordonnées courantes de l'élement relatif au document.

      // jQuery
$el.offset();

// Natif
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  }
}

  • 2.4 Défiler vers le haut

    Récupère la position verticale courante de l'ascenseur pour cet élément.

    // jQuery
$(window).scrollTop();

// Natif
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ remonter

Manipulation du DOM

  • 3.1 Supprimer

    Supprime l'élément du DOM.

    // jQuery
$el.remove();

// Natif
el.parentNode.removeChild(el);

  • 3.2 Texte

    • Obtenir le texte

      Récupère le contenu textuel combiné de l'élément en incluant ses descendants.

      // jQuery
$el.text();

// Natif
el.textContent;

    • Définir le text

      Définit le contenu de l'élément à partir du texte spécifié.

      // jQuery
$el.text(string);

// Natif
el.textContent = string;

  • 3.3 HTML

    • Obtenir l'HTML

      // jQuery
$el.html();

// Natif
el.innerHTML;

    • Définir l'HTML

      // jQuery
$el.html(htmlString);

// Natif
el.innerHTML = htmlString;

  • 3.4 Ajouter

    Ajouter un élément enfant après le dernier enfant de l'élément parent.

    // jQuery
$el.append("<div id='container'>hello</div>");

// Natif
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);

  • 3.5 Faire précéder

    // jQuery
$el.prepend("<div id='container'>hello</div>");

// Natif
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild);

  • 3.6 Insérer avant

    Insérer un nouveau noeud avant les éléments sélectionnés.

    // jQuery
$newEl.insertBefore(queryString);

// Natif
newEl.insertBefore(document.querySelector(queryString));

  • 3.7 Insérer après

    Insérer un nouveau noeud après les noeuds sélectionnés

    // jQuery
$newEl.insertAfter(queryString);

// Natif
function insertAfter(newEl, queryString) {
  const parent = document.querySelector(queryString).parentNode;

  if (parent.lastChild === newEl) {
    parent.appendChild(newEl);
  } else {
    parent.insertBefore(newEl, parent.nextSibling);
  }
},

  • 3.8 est

    Retourne true le paramètre correspond à la requête de sélection

    // jQuert - Noter que `is` fonctionne également avec `function` ou `elements` qui ne sont pas concernés ici
$el.is(selector);

// Natif
el.matches(selector);

  • 3.9 clone

    Créé une copie profonde de cet élément

    // jQuery
$el.clone();

// Natif
el.cloneNode();

// Pour une copie profonde, définir le paramètre à `true`

  • 3.10 vider

    Supprime tous les noeuds enfants

    // jQuery
$el.empty();

// Natif
el.innerHTML = '';

  • 3.11 enrouler

    Enrouler une structure HTML autour de chaque élément

    // jQuery
$('.inner').wrap('<div class="wrapper"></div>');

// Natif
[].slice.call(document.querySelectorAll('.inner')).forEach(function(el){
  var wrapper = document.createElement('div');
  wrapper.className = 'wrapper';
  el.parentNode.insertBefore(wrapper, el);
  el.parentNode.removeChild(el);
  wrapper.appendChild(el);
});

  • 3.12 dérouler

    Supprime les parents de la collection des éléments correspondants du DOM

    // jQuery
$('.inner').unwrap();

// Natif
[].slice.call(document.querySelectorAll('.inner')).forEach(function(el){
  [].slice.call(el.childNodes).forEach(function(child){
    el.parentNode.insertBefore(child, el);
  });
  el.parentNode.removeChild(el);
});

⬆ remonter

Ajax

Fetch API est le nouveau standard qui a pour but de remplacer XMLHttpRequest afin de faire de l'ajax. Il fonctionne sous Chrome et Firefox, il est possible d'utiliser polyfills pour le faire fonctionner sur de vieux navigateurs.

Essayer github/fetch sous IE9+ ou fetch-ie8 sous IE8+, fetch-jsonp pour construire des requêtes JSONP.

⬆ remonter

Évènements

Pour remplacer complètement jusqu'aux espaces de nom et délégations, se référer à https://github.com/oneuijs/oui-dom-events

  • 5.1 Attacher un événement avec on

    // jQuery
$el.on(eventName, eventHandler);

// Natif
el.addEventListener(eventName, eventHandler);

  • 5.2 Détacher un événement avec off

    // jQuery
$el.off(eventName, eventHandler);

// Natif
el.removeEventListener(eventName, eventHandler);

  • 5.3 Trigger

    // jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Natif
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ remonter

Utilitaires

La plupart des utilitaires se trouvent dans l'API native. D'autres fonctions avancées peuvent être choisies afin de se concentrer sur la cohérence et la performance. Il est recommandé de remplacer par lodash.

  • 6.1 Utilitaires basiques

    • isArray

    Détermine si l'argument est un tableau.

    // jQuery
$.isArray(range);

// Natif
Array.isArray(range);
    • isWindow

    Détermine si l'argument est une fenêtre.

    // jQuery
$.isWindow(obj);

// Native
function isWindow(obj) {
  return obj != null && obj === obj.window;
}
    • inArray

    Recherche une valeur spécifique à l'intérieur d'un tableau et retourne son index (ou -1 si rien n'a été trouvé).

    // jQuery
$.inArray(item, array);

// Natif
Array.indexOf(item);
    • isNumeric

    Détermine si l'argument est un nombre. Utiliser typeof pour décider du type. Si nécessaire utiliser une bibliothèque, parfois typeof n'est pas exact.

    // jQuery
$.isNumeric(item);

// Natif
function isNumeric(item) {
  return typeof item === 'number';
}
    • isFunction

    Détermine si l'argument est un objet fonction JavaScript.

    // jQuery
$.isFunction(item);

// Natif
function isFunction(item) {
  return typeof value === 'function';
}
    • isEmptyObject

    Vérifie si un objet est vide (ne contient aucune propriétés énumérables).

    // jQuery
$.isEmptyObject(obj);

// Natif
function isEmptyObject(obj) {
  for (let key in obj) {
    return false;
  }
  return true;
}
    • isPlainObject

    Vérifie si un objet est un objet "plat" (créé en utilisant "{}" ou "new Object").

    // jQuery
$.isPlainObject(obj);

// Natif
function isPlainObject(obj) {
  if (typeof (obj) !== 'object' || obj.nodeType || obj != null && obj === obj.window) {
    return false;
  }

  if (obj.constructor &&
      !{}.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
    return false;
  }

  return true;
}
    • extend

    Fusionne le contenu de deux objets ou plus ensembles en un seul objet. Object.assign fait parti de l'API ES6, il est également possible d'utiliser polyfill.

    // jQuery
$.extend({}, defaultOpts, opts);

// Natif
Object.assign({}, defaultOpts, opts);
    • trim

    Supprime les espaces au début et à la fin d'une chaine de caractères String.

    // jQuery
$.trim(string);

// Natif
string.trim();
    • map

    Traduit tous les éléments d'un tableau ou d'un objet vers un nouveau tableau d'éléments.

    // jQuery
$.map(array, function(value, index) {
});

// Natif
array.map(function(value, index) {
});
    • each

    Une fonction générique d'itération, qui peut être utilisée pour itérer de façon transparente à travers des objets et des tableaux.

    // jQuery
$.each(array, function(value, index) {
});

// Natif
array.forEach(function(value, index) {
});
    • grep

    Trouve les éléments d'un tableau qui satisfont avec une fonction filtre.

    // jQuery
$.grep(array, function(value, index) {
});

// Natif
array.filter(function(value, index) {
});
    • type

    Détermine la [[Class]] interne JavaScript d'un objet.

    // jQuery
$.type(obj);

// Natif
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
    • merge

    Fusionne le contenu de deux tableau dans un seul tableau.

    // jQuery
$.merge(array1, array2);

// Natif
// But concat function don't remove duplicate items.
function merge() {
  return Array.prototype.concat.apply([], arguments)
}
    • now

    Retourne un nombre représentant l'heure actuelle.

    // jQuery
$.now();

// Natif
Date.now();
    • proxy

    Prend une fonction et en retourne une nouvelle qui aura toujours un contexte particulier.

    // jQuery
$.proxy(fn, context);

// Natif
fn.bind(context);
    • makeArray

    Convertit un objet "array-like" vers un véritable tableau JavaScript.

    // jQuery
$.makeArray(array);

// Natif
[].slice.call(array);

  • 6.2 Contient

    Vérifie si un élément du DOM est un descendant d'un autre élément du DOM.

    // jQuery
$.contains(el, child);

// Natif
el !== child && el.contains(child);

  • 6.3 Globaleval

    Exécute du code JavaScript de manière globale.

    // jQuery
$.globaleval(code);

// Natif
function Globaleval(code) {
  let script = document.createElement('script');
  script.text = code;

  document.head.appendChild(script).parentNode.removeChild(script);
}

// Utilise eval, mais le contexte d'eval est l'actuel alors que le contexte de $.Globaleval est global.
eval(code);

  • 6.4 parse

    • parseHTML

    Parse une chaine de caractères vers un tableau de noeuds DOM.

    // jQuery
$.parseHTML(htmlString);

// Natif
function parseHTML(string) {
  const tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = string;
  return tmp.body.children;
}
    • parseJSON

    Prend une chaine JSON correctement formatée et retourne la valeur JavaScript résultante.

    // jQuery
$.parseJSON(str);

// Natif
JSON.parse(str);

⬆ remonter

Promesses

Une promesse représente le résultat éventuel d'une opération asynchrone. jQuery a sa propre manière de traiter les promesses. JavaScript natif implémente une API minimale et légère afin de traiter les promesses en accord avec les spécifications Promises/A+.

  • 7.1 done, fail, always

    done est appelée quand une promesse est résolue, fail est appelée quand une promesse est rejetée et always est appelée quand une promesse n'est ni résolue ni rejetée.

    // jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Natif
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)

  • 7.2 when

    when est utilisée pour traiter de multiples promesses. Elle sera résolue quand toutes les promesses le seront, and rejetée si au moins une est rejetée.

    // jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {})

// Natif
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});

  • 7.3 Deferred

    Deferred est un moyen de créer une promesse.

    // jQuery
function asyncFunc() {
  var d = new $.Deferred();
  setTimeout(function() {
    if(true) {
      d.resolve('some_value_compute_asynchronously');
    } else {
      d.reject('failed');
    }
  }, 1000);
  return d.promise();
}

// Natif
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      if (true) {
        resolve('some_value_compute_asynchronously');
      } else {
        reject('failed');
      }
    }, 1000);
  });
}

// Avec deferred
function defer() {
  let resolve, reject;
  let promise = new Promise(function() {
    resolve = arguments[0];
    reject = arguments[1];
  });
  return { resolve, reject, promise };
}
function asyncFunc() {
  var d = defer();
  setTimeout(function() {
    if(true) {
      d.resolve('some_value_compute_asynchronously');
    } else {
      d.reject('failed');
    }
  }, 1000);
  return d.promise;
}

⬆ remonter

Animation

  • 8.1 Show & Hide

    // jQuery
$el.show();
$el.hide();

// Natif
//Pour plus de détails à propos de la méthode show, merci de se référer à https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363

el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

  • 8.2 Toggle

    Affiche ou cache un élément.

    // jQuery
$el.toggle();

// Natif
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
}
else {
  el.style.display = 'none';
}

  • 8.3 FadeIn & FadeOut

    // jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Natif
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';

  • 8.4 FadeTo

    Ajuste l'opacité d'un élément.

    // jQuery
$el.fadeTo('slow',0.15);
// Natif
el.style.transition = 'opacity 3s'; // assume que 'slow' vaut 3 seconds
el.style.opacity = '0.15';

  • 8.5 FadeToggle

    Affiche ou cache un élément en animant son opacité.

    // jQuery
$el.fadeToggle();

// Natif
el.style.transition = 'opacity 3s';
let { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
  el.style.opacity = '0';
}
else {
  el.style.opacity = '1';
}

  • 8.6 SlideUp & SlideDown

    // jQuery
$el.slideUp();
$el.slideDown();

// Natif
let originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;

  • 8.7 SlideToggle

    Affiche ou cache un élément en le faisant glisser.

    // jQuery
$el.slideToggle();

// Natif
let originHeight = '100px';
el.style.transition = 'height 3s';
let { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
  el.style.height = originHeight;
}
else {
 el.style.height = '0px';
}

  • 8.8 Animate

    Réalise une animation personnaliée à partir d'une collection de propriétés CSS.

    // jQuery
$el.animate({params}, speed);

// Natif
el.style.transition = 'all' + speed;
Object.keys(params).forEach(function(key) {
  el.style[key] = params[key];
})

Alternatives

Traductions

Navigateurs compatibles

Chrome Firefox IE Opera Safari
Plus récente ✔ Plus récente ✔ 10+ ✔ Plus récente ✔ 6.1+ ✔

Licence

MIT