back to top

Evitare conflitti tra jQuery e altre librerie

Nella creazione del nostro portale web potrebbe essere necessario utilizzare diverse librerie, magari perchè una offre dei vantaggi che l’altra non offre o più semplicemente perchè troviamo un plugin ben fatto che utilizza quella libreria piuttosto che un’altra.

Non sempre l’utilizzo contemporaneo di più librerie (o framework) differenti è ammesso, in quanto potrebbero andare in conflitto tra di loro e creare un blocco del motore Javascript. Un problema piuttosto comune a riguardo è quello che riguarda il nome dei metodi: infatti se due o più librerie implementano tramite lo stesso metodo due operazioni diverse, il sistema risulterebbe instabile e non si avrebbe certezza su quale delle operazioni viene effettivamente eseguita.

Con jQuery il problema nasce soprattutto dal fatto che molte librerie utilizzano il simbolo del dollaro come funzione o come variabile. Per questo motivo jQuery mette a disposizione la funzione noConflict() la quale esclude l’utilizzo del dollaro per jQuery "liberandolo" per altre librerie. In sostanza jQuery "rinuncia" al suo alias $().

Una premessa importante da fare prima di proseguire è la seguente: le tecniche di risoluzione dei conflitti che vedremo risolvono i problemi tra jQuery ed altre librerie che utilizzano il simbolo del dollaro, ma non tra altre due librerie che, per altri e svariati motivi, interferiscono tra loro, quindi i sistemi e le tecniche esposte non possono essere considerati la soluzione definitiva ad ogni problema di convivenza tra una pluralità di framework all’interno del medesimo progetto web.

Il primo sistema che viene utilizzato, come detto, è quello di non utilizzare $() come alias, ma di scrivere sempre jQuery(). Vediamo un esempio:

<script>
jQuery.noConflict();

// Usa jQuery con jQuery(...) 
jQuery(document).ready(function(){ 
  jQuery("#foto").show("slow");      
});       

// Codice di una libreria diversa da jQuery che usa $ 
// ...
</script>

Questo metodo può essere tuttavia poco pratico per via della riscrittura della parola "jQuery". Si può quindi decidere di cambiare l’alias di jQuery impostandone uno personale, ovviamente diverso dal dollaro. Un esempio è utilizzare "$j" invece di "jQuery". Vediamo come fare:

<script>
// creo un nuovo alias
var $j = jQuery.noConflict();

// Usa jQuery con $j(...)
$j(document).ready(function(){ 
  $j("#foto").show("slow");   
});      
      
// Codice di una libreria diversa da jQuery che usa $ 
// ...
</script>

Questa tecnica consente di scrivere codice più velocemente rispetto all’utilizzo della forma estesa della funzione jQuery(), tuttavia se non volete abbandonare il buon vecchio dollaro allora possiamo passare al terzo metodo di risoluzione dei conflitti. Mettiamo tutto il codice di interesse nella funzione ready() di fine caricamento del DOM e, al suo interno, possiamo continuare ad utilizzare jQuery come abbiamo sempre fatto:

<script>
jQuery.noConflict();

jQuery(document).ready(function($){
  $("#foto").show("slow");
});

// Codice di una libreria diversa da jQuery che usa $ 
// ...
</script>

Un ulteriore soluzione, che stavolta non prevede l’utilizzo di noConflict(), è data dall’includere la libreria jQuery prima di ogni altra libreria. In questo modo si può tranquillamente utilizzare la funzione jQuery() e lo shortcut $() il quale resta disponibile anche per le altre librerie.

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>

// Usa jQuery con jQuery(...) 
jQuery(document).ready(function(){
  $("#foto").show("slow");      
});

// Codice prototype che utilizza $(...)
// ...
</script>
Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).