jQuery Evitare collisioni nello spazio dei nomi


Esempio

Le librerie diverse da jQuery possono anche usare $ come alias. Questo può causare interferenze tra quelle librerie e jQuery.

Per rilasciare $ per l'uso con altre librerie:

jQuery.noConflict();

Dopo aver chiamato questa funzione, $ non è più un alias per jQuery . Tuttavia, puoi comunque utilizzare la variabile jQuery per accedere alle funzioni di jQuery:

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

Facoltativamente, puoi assegnare una variabile diversa come alias per jQuery:

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

Viceversa, per evitare che altre librerie interferiscano con jQuery, puoi avvolgere il tuo codice jQuery in un'espressione di funzione immediatamente invocata (IIFE) e passare in jQuery come argomento:

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

All'interno di questo IIFE, $ è un alias solo per jQuery.

Un altro modo semplice per proteggere l'alias $ di jQuery e assicurarsi che il DOM sia pronto :

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

Riassumere,

  • jQuery.noConflict() : $ non si riferisce più a jQuery, mentre la variabile jQuery fa.
  • var jQuery2 = jQuery.noConflict() - $ non fa più riferimento a jQuery, mentre la variabile jQuery fa così come la variabile jQuery2 .

Ora, esiste un terzo scenario: cosa succede se vogliamo che jQuery sia disponibile solo in jQuery2 ? Uso,

var jQuery2 = jQuery.noConflict(true)

Ciò non causa né $jQuery riferendosi a jQuery.

Questo è utile quando più versioni di jQuery devono essere caricate sulla stessa pagina.

<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/