Qualcuno può spiegare quale funzione ($) fa in jQuery

Question

Recentemente ho letto che qualcuno il codice di un altro, e mi sono imbattuto in questo modo:

// Semicolon (;) to ensure closing of earlier scripting 
// Encapsulation 
// $ is assigned to jQuery 
;(function($) { 

    // DOM Ready 
    $(function() { 
     ... 
    }); 

})(jQuery); 

Capisco il punto dei principali, e capisco che $ (function() {è lo stesso del documento pronto, ma qual è il punto di aggiunta della funzione ($)?

Capisco che è una chiusura, ma dal momento che questo viene sempre chiamato a livello globale, sembra che tu non ti La funzione $ (function() {utilizzerà lo stesso oggetto globale in entrambi i casi, no?

È salvaguardare contro qualcosa, o è una buona pratica per un altro motivo?

Answer 1

È una struttura comune per un plug-in jQuery. Protegge dall'identificatore $ che è stato sovrascritto e utilizzato per qualcos'altro. All'interno della funzione anonima, $ fa sempre riferimento a jQuery.

Esempio:

$ = "oh no"; 
$(function() { //Big problem! 
    //DOM ready 
}); 

Con l'introduzione di un nuovo ambito, è possibile garantire che $ si riferisce a quello che ci si aspetta che:

$ = "oh no"; 
(function($) { //New scope, $ is redeclared and jQuery is assigned to it 

    $(function() { //No problem! 
     //DOM ready 
    }); 

}(jQuery)); 

La motivazione principale alla base di questo è che le numerose altre librerie JavaScript utilizzare $ come identificatore (ad es. PrototipoJS). Se si desidera utilizzare sia Prototype che jQuery, è necessario consentire a Prototype di avere l'identificatore $, ma probabilmente non si desidera scrivere jQuery ogni volta che si desidera chiamare un metodo jQuery. Introducendo un nuovo ambito si consente a jQuery di avere il suo $ nuovamente in quel contesto di esecuzione.

Answer 2

L'esempio di codice che ci hai fornito è un esempio di un Self-Invocare Funzione:

(function(){ 
// some code… 
})(); 

La prima serie di parentesi definisce una funzione: (una funzione anonima avvolto in parentesi)

(function() {}) 

Definisce la funzione anonima. Di per sé, non fa nulla. Ma se aggiungi una serie di parentesi () dopo la definizione, è uguale alle parentesi utilizzate per chiamare una funzione. Prova questo:

(function(message) { 
    alert(message); 
})("Hello World"); 

che crea una funzione che accetta un parametro, e visualizza una finestra di avviso che contiene il valore fornito. Quindi, chiama immediatamente quella funzione con un parametro di "Hello World".

---

Nell'esempio, viene definita una funzione di autoinvocazione. Accetta un parametro, denominato $. Quindi, la funzione viene immediatamente chiamata, con un riferimento a jQuery passato come argomento.

Questo è comune se si desidera che jQuery funzioni nella modalità noConflict() (che rimuove il riferimento globale a $).

In modalità noConflict(), è ancora possibile accedere jQuery tramite la variabile globale jQuery, ma la maggior parte delle persone preferiscono utilizzare $, per cui questa funzione di auto-chiamare accetta la jQuery variabile globale come un parametro denominato $ nel campo di applicazione della funzione, che ti lascia libero di utilizzare il collegamento $ all'interno della funzione di auto-richiamo mentre jQuery funziona in modalità noConflict() per evitare interferenze con altre librerie che usano lo scope $ nell'ambito globale.

Spero che questo risponda alla tua domanda!