2011-11-29 8 views
14

Io sono il debug di codice JavaScript di qualcun altro e la maggior parte del codice è avvolto come questo:

(function ($) { 
    //majority of code here... 
})(jQuery); 

Che cosa sta succedendo con la ($) e il (jQuery)? Non mi è stato insegnato a programmare così e non li ho visti. Qual è il loro scopo?

Come pure, non c'è document.ready, ma suppongo che sia perché il codice viene eseguito subito dopo che è letto dal (); alla fine?

+0

Questo codice verrà eseguito su document.ready – longbkit

+5

@longbkit: No, non è un codice pronto per DOM. – RightSaidFred

+4

@longbkit, no, non è quello che significa. Per favore vai a leggere sulla chiusura .. o, diavolo, inizia a imparare javascript. –

risposta

16
var $ = "some value we don't care about"; 

// v=====normal plain old function 
(function ($) { 
//  ^=======receives jQuery object as the $ parameter 

    //majority of code here, where $ === jQuery... 

    $('.myclass').do().crazy().things(); 


})(jQuery); 
// ^=======immediately invoked, and passed the jQuery object 


// out here, $ is undisturbed 
alert($); // "some value we don't care about" 
+3

Ok, quindi sostanzialmente l'intero punto di questo è che puoi chiamare jQuery con la notazione $() all'interno di quella funzione, e al di fuori di quella funzione se qualcos'altro come il prototipo usa notazione $() non importa? .. Quindi in realtà ti evita di dover scrivere jQuery() (o qualche altra notazione) ogni volta che non usi alcun conflitto .. ha senso – tsdexter

+2

Essenzialmente tutto, cioè nel bit "maggioranza del codice qui ...", è isolato dal resto del codice. Esiste in ambito separato. Se crei 'var something = 1' lì, non finisce nello scope' window' globale. Il codice all'esterno di questa struttura non può sovrascrivere tutto ciò che è dentro. –

+1

@tsdexter: Sì, ce l'hai. Il 'jQuery globale 'è riferito dal' '$ locale', che significa che il' '$ globale '(se presente) può essere usato per altri scopi.In JavaScript, l'ambito variabile viene creato con una funzione. – RightSaidFred

13

Questo è utile quando si desidera/bisogno di usare jQuery.noConflict(), e il nome globale $ non è un alias per jQuery. Il codice che hai pubblicato ti consente di usare lo $ più corto per indicare jQuery solo all'interno della funzione anonima, senza che sia $ che deve essere globale.

+0

Grazie, anche se RightSaidFred ti ha battuto. Molto apprezzato. – tsdexter

+0

+1 per aver menzionato 'jQuery.noConflict' che fa sì che jQuery rinunci al globale' $'. – RightSaidFred

0

Questa struttura si chiama JQuery Plugin, lo scopo dei plugin è creare un framework di qualsiasi attività/funzione comune nel progetto, allo stesso modo è possibile estendere i plug-in in base all'utilizzo in pagine diverse o nella stessa pagina. in questo modo puoi evitare di ripetere lo stesso codice ovunque.

controllare fuori http://docs.jquery.com/Plugins/Authoring

+0

Questa struttura non è un semplice costrutto jQuery. E mentre può essere usato durante la creazione di un plugin, non è necessario. I plugin jQuery vengono creati estendendo 'jQuery.prototype'. – RightSaidFred

3

Giusto per espandere su RightSaidFred's risposta un po ', quando ho visto la prima volta il ()() sintassi ero un po' confuso, ma aveva un senso una volta che mi sono reso conto le staffe vengono utilizzati per definire un anonimo funzione e quindi chiamarlo. ad esempio:

(function (msg){alert(msg)})('hello'); 

... definisce una funzione e quindi la chiama, passando 'ciao' come parametro.

Così l'esempio nella domanda:

(function ($) { 
    //majority of code here... 
})(jQuery); 

sta passando jQuery in una funzione anonima e facendo riferimento ad essa come $ all'interno della funzione, un modo per garantire che $ lavorerà per jQuery senza interferire con qualsiasi altra cosa .

+1

Per qualche ragione, questa spiegazione ha fatto un po 'meglio con me :) Grazie! – JoshP