MICHELEPISANI.IT
 

Non hai bisogno di jQuery

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

Maggio 14
07:302017

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.

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …

Luca

Peccato che fb abbia modificato tutto ed ora sembra non esserci alcun modo per accedere alle …