Che cosa significa un blocco di codice tra parentesi in JavaScript/jQuery?

Question

Eventuali duplicati:
What does (function($) {})(jQuery); mean?

ho visto un sacco di codice jQuery con il seguente tipo di sintassi, ma io non capisco che cosa significa. Viene visualizzato in this answer e this answer in una domanda sull'organizzazione del codice. Entrambi parlano di namespace, quindi suppongo che questo sia ciò che realizza.

var foo = (function() { 
    var someVar; 

    function someFunc() { 
     return true; 
    } 
})(); 

È questo per il namespace e come funziona? A volte c'è un nome (lo spazio dei nomi?) Nella serie finale di parentesi, a volte no. Qual è la differenza tra i due?

Answer 1

Lo () che avvolge la funzione trasforma la dichiarazione di funzione anonima in un'espressione di funzione che può quindi essere richiamata immediatamente con () che segue l'espressione.

In questo caso, l'esterno () non è realmente necessario poiché lo var foo = lo trasformerebbe in un'espressione. Inoltre, il valore di foo sarà undefined poiché l'invocazione della funzione non restituisce nulla.

Può essere utilizzato per creare un nuovo scope variabile, poiché una funzione è l'unico modo per ottenerlo in javascript. (Javascript non ha un ambito di blocco.)

Quindi la variabile someVar non è accessibile per l'ambito esterno. Ci possono essere momenti in cui è desiderabile renderlo accessibile in modo controllato. Per fare ciò, è possibile passare una funzione fuori da tale ambito che fa riferimento a someVar. Quindi, una volta terminata l'invocazione della funzione, il relativo contesto di esecuzione rimarrà intatto e someVar sarà disponibile in qualsiasi modo la funzione che è stata distribuita.

Si chiama creando closure.

Supponiamo di aver passato un valore nell'invocazione e assegnato a someVar. È quindi possibile eseguire la funzione return dal richiamo alla variabile foo. Se la funzione restituisce i riferimenti someVar, è possibile utilizzare tale funzione per ottenere il relativo valore.

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function() { 
     alert(someVar); 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

Come si può vedere, la funzione ora fa riferimento foo può comunque accedere someVar.

Supponiamo di averlo modificato in modo che la funzione restituita a foo possa accettare un argomento, che aggiornerà il valore di myVar.

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function(n) { 
     if(n) { 
      someVar = n; 
     } else { 
      alert(someVar); 
     } 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

foo('newvalue'); // give it a new value 

foo(); // alerts 'newvalue' 

ora si può vedere, che la funzione in foo realmente accedere a tale variabile, in quanto è in grado di cambiare il suo valore, e fare riferimento il nuovo valore che precedentemente impostato.

Answer 2

Le parentesi racchiudono una funzione anonima, al fine di renderla una variabile che può essere richiamata direttamente aggiungendo i parametri dopo di essa.

(function(param) { 
    // do stuff 
})(param); 

Il bit alla fine non è uno spazio dei nomi, solo un parametro. Probabilmente avete visto questo utilizzato per jQuery come:

(function($) { 
    $('.something').addClass('.other'); 
})(jQuery); 

Quello che fa è passare l'oggetto jQuery per la funzione, rendendo la variabile $ jQuery oggetto nella nell'ambito di applicazione della funzione anonima. Alle persone piace usare la stenografia $, ma può portare a conflitti con altre librerie. Questa tecnica rimuove la possibilità di un conflitto passando l'oggetto completo jQuery e sovrascrivendo la variabile $ nell'ambito di tale funzione, in modo che il collegamento possa essere utilizzato.