jQuery - Méthode noConflict()


Comment utiliser jQuery et d'autres frameworks simultanément sur une page ?


jQuery et autres frameworks JavaScript

Comme vous l'avez déjà appris, jQuery utilise le symbole $ comme raccourci pour jQuery.

Que se passe-t-il si d'autres frameworks JavaScript utilisent aussi le symbole $ comme raccourci ?

Parmi les autres frameworks JavaScript, on peut citer : MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman et Ext JS.

Certains de ces frameworks utilisent aussi le symbole $ comme raccourci (tout comme jQuery). Si vous utilisez deux frameworks différents qui utilisent le même symbole de raccourci, cela peut empêcher les scripts de fonctionner.

L'équipe jQuery a pris en compte ce problème et a implémenté la méthode noConflict().


Méthode jQuery noConflict()

La méthode noConflict() libère le contrôle de l'identifiant $, afin que d'autres scripts puissent l'utiliser.

Bien sûr, vous pouvez toujours utiliser jQuery en remplaçant le raccourci par le nom complet :

Exemple

$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery fonctionne toujours !"); }); });

Essayez-le vous-même »

Vous pouvez également créer votre propre raccourci. noConflict() renvoie une référence à jQuery, que vous pouvez stocker dans une variable pour une utilisation ultérieure. Regardez cet exemple :

Exemple

var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery fonctionne toujours !"); }); });

Essayez-le vous-même »

Si votre bloc de code jQuery utilise le raccourci $ et que vous ne souhaitez pas modifier ce raccourci, vous pouvez passer le symbole $ comme variable à la méthode ready. De cette façon, vous pouvez utiliser le symbole $ à l'intérieur de la fonction - tandis qu'à l'extérieur de la fonction, vous devez toujours utiliser "jQuery" :

Exemple

$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery fonctionne toujours !"); }); });

Essayez-le vous-même »
Autres extensions