Passer de jQuery à Vanilla JS
Je me suis récemment retrouvée dans une situation où je devais absolument utiliser Vanilla JS à la place du confortable et si pratique jQuery auquel je m’étais habitué.
VS
Vanilla JS c’est quoi?
C’est avant tout JavaScript natif, c’est à dire nu, zéro bibliothèque, absolument rien! jQuery est une bibliothèque de JavaScript créée pour faciliter l’écriture de scripts côté client.
Je me suis posée la question pourquoi privilégier Vanilla Js à JQuery qui facilite l’écriture du code , alors que Vanilla paraît plus verbeux au premier abord.
Au fil de mes recherches je comprends que Vanilla est rapide, léger et multi plateformes. Qu’il est déjà implémenté dans tous les navigateurs d’aujourd’hui, donc pas de bibliothèque supplémentaire à charger.
Par exemple, il faut toujours trouver un moyen de réduire la taille d’un site Web afin qu’il soit facile et accessible à n’importe qui (même celui qui qui possède encore Internet Explorer…au fin fond de la France!).
Saviez-vous que Google, facebook, Amazon, Paypal, Wikipedia, LinkedIn et bien d’autres utilisent Vanilla JS?
En pratique…
Voici quelques exemples de comparaison…
Evènement
jQuery
$(document).ready(function() {
// du code….
});
Vanilla
document.addEventListener('DOMContentLoaded', function() {
// du code, du code...
});
jQuery
$('#').click(function() {
// code…
});
Vanilla
elementHtml.addEventListener('click', function() {
// code…
});
Sélecteurs
jQuery
var *htmlElement* = $('#id')[0];
Vanilla
var *htmlElement* = document.getElementById('id');
jQuery
var divs = $('div');
Vanilla
var divs = document.querySelectorAll('div');
jQuery
var newDiv = $('li');
Vanilla
var newDiv = document.createElement('li');
Manipulation
jQuery
$(htmlElement).append($(appendHtmlElement));
Vanilla
htmlElement.appendChild(appendHtmlElement);
jQuery
$(htmlElement).html();
Vanilla
htmlElement.innerHTML;
Attributs
jQuery
$(htmlElement).attr(attributeName);
Vanilla
htmlElement.getAttribute(attributeName);
jQuery
$(“htmlElement”).data(dataName);
Vanilla
htmlElement.getAttribute(”data” + dataName);
jQuery
$(“htmlElement”).val();
Vanilla
htmlElement.value;
Ajax
GET
jQuery
$.ajax({
type: “GET”,
url: url,
data: data,
});
Vanilla
var get = new XMLHttpRequest();
get.open(“GET”, url, true);
get.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded;charset=UTF-8”);
get.send(data);
POST
jQuery
$.ajax({
type:’ POST’,
url: url,
data: data
});
vanilla
var post=new XMLHttpRequest();
post.open(“POST”, url, true);
post.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded; charset=UTF-8”);
post.send(data);
Effets
Hide
jQuery
$(“htlmElement”).hide();
vanilla
htmlElement.style.display=’none’;
Show
jQuery
$(“htmlElement”).show();
vanilla
htmlElement.style.display=” ”;
Voilà, une toute petite partie de ce que l’on peut faire en utilisant Vanilla JS; Ici, il n’est pas question de choisir et prendre position sur ce qui est “mieux” entre l’un et l’autre… A vous de choisir en fonction de vos besoins en développement, pour ma part cela m’a permis de parfaire mes connaissance en JavaScript et ça n’est que le début!
Muriel THOMAS
Simplonienne de la promotion 2 Toulouse.
Sources: