jQuery Éviter les collisions d'espaces de noms

Exemple

Les bibliothèques autres que jQuery peuvent également utiliser $ comme un alias. Cela peut provoquer des interférences entre ces bibliothèques et jQuery.

Pour libérer $ pour une utilisation avec d'autres bibliothèques:

jQuery.noConflict();

Après avoir appelé cette fonction, $ n'est plus un alias pour jQuery . Cependant, vous pouvez toujours utiliser la variable jQuery elle-même pour accéder aux fonctions jQuery:

jQuery('#hello').text('Hello, World!');

Vous pouvez éventuellement affecter une variable différente en tant qu'alias pour jQuery:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

À l'inverse, pour empêcher d'autres bibliothèques d'interférer avec jQuery, vous pouvez envelopper votre code jQuery dans une expression de fonction immédiatement invoquée (IIFE) et passer en jQuery comme argument:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

Dans cet IIFE, $ est un alias pour jQuery uniquement.

Un autre moyen simple de sécuriser l'alias $ de jQuery et de s'assurer que DOM est prêt :

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});

Résumer,

  • jQuery.noConflict() : $ ne fait plus référence à jQuery, jQuery.noConflict() à la variable jQuery .
  • var jQuery2 = jQuery.noConflict() - $ ne fait plus référence à jQuery, alors que la variable jQuery fait, de même que la variable jQuery2 .

Maintenant, il existe un troisième scénario - Que faire si nous voulons que jQuery ne soit disponible que dans jQuery2 ? Utilisation,

var jQuery2 = jQuery.noConflict(true)

Cela se traduit par ni $ ni jQuery faisant référence à jQuery.

Ceci est utile lorsque plusieurs versions de jQuery doivent être chargées sur la même page.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/