Se lo fai con jQuery... lo puoi fare anche in Javascript

Da anni jQuery aiuta gli sviluppatori web a velocizzare la creazione dei loro script e semplificare la relizzazione di effetti e interazioni nelle loro applicazioni web, soprattutto da quando è noto che permette di mettersi al riparo dal grande demone dell'incompatibilità tra browser a maggior ragione quando questo si chiama Internet Explorer.
In realtà, dopo IE8, anche questo browser si è allineato all'interpretazione del Javascript così come gli altri browser più versatili pertanto spesso diventa superfluo, se non eccessivo, caricare sul proprio sito una libreria come jQuery quando le funzionalità di cui necessitiamo possono essere ottenute in modo più compatto e con poche righe di codice in Javascript puro, senza contare l'incompatibilità che talvolta jQuery può avere con altre librerie con la conseguente generazione di grattacapi e perdite di tempo nella disperata ricerca di contorti stratagemmi per far funzionare il codice di cui necessitiamo.

Ecco che in questo articolo metto in evidenza alcune conversioni di codice da jQuery a Javascript pronte all'uso per garantire siti e web app più snelli e con migliori prestazioni in termini di caricamento.

La famosa funzione 'Ready':

Con jQuery:

$(document).ready(function(){

});

In Javascript (compatibile con IE9 e superiori):

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Effettuare una chiamata in POST:

Con jQuery:

$.ajax({
  type: 'POST',
  url: '/mio/url',
  data: data
});

In Javascript (compatibile con IE8 e superiori):

var request = new XMLHttpRequest();
request.open('POST', '/mio/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

Effettuare una chiamata in GET:

Con jQuery:

$.ajax({
  type: 'GET',
  url: '/mio/url',
  success: function(resp) {

  },
  error: function() {

  }
});

In Javascript (compatibile con IE10 e superiori):

var request = new XMLHttpRequest();
request.open('GET', '/mio/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Esito positivo!
    var resp = this.response;
  } else {
    // Attenzione! Il server ha risposto con un errore.

  }
};

request.onerror = function() {
  // Attenzione! Rilevato un problema di connessione.
};

request.send();

Effetto dissolvenza (Fade):

Con jQuery:

$(el).fadeIn();

In Javascript (compatibile con IE10 e superiori):

// Javascript
el.classList.add('show');
el.classList.remove('hide');

// CSS
.show { transition: opacity 400ms; }
.hide { opacity: 0; }

Effetto nascondi e mostra elemento (Hide e Show):

Con jQuery:

// Nascondi elemento
$(el).hide();

// Mostra elemento
$(el).show();

In Javascript (compatibile con IE10 e superiori):

// Nascondi elemento
el.style.display = 'none';

// Mostra elemento
el.style.display = '';

Ciclo Each:

Con jQuery:

$(selector).each(function(i, el){

});

In Javascript (compatibile con IE9 e superiori):

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

Effettuare il Parse HTML:

Con jQuery:

$.parseHTML(htmlString);

In Javascript (compatibile con IE9 e superiori):

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

Da quando ho iniziato a raccogliere questi (ed altri) esempi di codice Javascript puro che ho utilizzato nei miei script, dai siti web ai tag HTML personalizzati per Google Tag Manager, ho trovato una fonte molto ampia di altre conversioni da jQuery a Javascript che spaziano dalla gestione degli elementi (addClass, append, before, css, text, ecc..) agli eventi (off, on, trigger, ...) e molto altro e che mi portano ad interrompere qua la lista della mia collezione di codici per spostare direttamente l'attenzione su youmightnotneedjquery.com dove potete trovare sicuramente quello che fa per voi anche se, personalmente, non posso asicurare che tutti i codici funzionino perchè non li ho testati così come per tanti non ne ho mai avuto la necessità di farne uso.

Se incontrate problemi nella conversione di vostri script da jQuery a Javascript non esistate a lasciare un commento che vedremo insieme come risolvere al meglio.