$ (documento). Già stenografia


245

La seguente scorciatoia è per $(document).ready?

(function($){

//some code

})(jQuery);

Vedo questo schema usato molto, ma non riesco a trovare alcun riferimento ad esso. Se è una scorciatoia per $(document).ready(), c'è qualche motivo particolare per cui potrebbe non funzionare? Nei miei test sembra sparare sempre prima dell'evento pronto.


Qualsiasi variabile definita all'interno della funzione del modello menzionata (ad es. var somevar;) Non cambierà il contenuto delle variabili con lo stesso nome al di fuori della funzione
Timo Huovinen,

3
Il codice ha l'effetto di garantire che $ rappresenti jQuery all'interno di quel blocco funzione in modo che il codice sia portabile in luoghi in cui l'alias $ per jQuery è disabilitato o definito come qualcos'altro.
Chiede comunque il

Risposte:


252

La scorciatoia per $(document).ready(handler)è $(handler)(dov'è handleruna funzione). Vedi qui .

Il codice nella tua domanda non ha nulla a che fare con .ready(). Piuttosto, è un'espressione di funzione immediatamente invocata (IIFE) con l'oggetto jQuery come argomento. Il suo scopo è limitare l'ambito di almeno la $variabile al proprio blocco in modo che non causi conflitti. In genere viene visualizzato il modello utilizzato dai plug-in jQuery per garantire ciò $ == jQuery.


14
Tecnicamente è un'espressione di funzione immediatamente invocata . Se si auto-invocasse, si chiamerebbe da se stesso. Cerca sul Web iifeo passa al famoso post sul blog di Cowboy Alman . Dettagli ... sheesh.
2540625,

546

La scorciatoia è:

$(function() {
    // Code here
});

24
Il primo argomento è $. Potrebbe volerlo aggiungere. È utile perjQuery(function($, undefined) {});
Raynos,

5
@raynos Non è richiesto. il codice sopra funziona bene come alias per$(document).ready(function(){ });
Kyle Trauberman

10
È solo utile sapere che si ottiene $gratuitamente come primo argomento.
Raynos,

3
Continuo a visitare questa risposta una volta al mese o giù di lì.
Nugsson,

89

La scorciatoia corretta è questa:

$(function() {
    // this behaves as if within document.ready
});

Il codice che hai pubblicato ...

(function($){

//some code

})(jQuery);

... crea una funzione anonima e la esegue immediatamente con il jQuerypassaggio come arg $. Tutto ciò che fa effettivamente è prendere il codice all'interno della funzione ed eseguirlo come al solito, poiché $è già un alias per jQuery. : D


4
Si potrebbe dire che garantisce anche che $ sia l'alias per jQuery, se vengono caricati altri strumenti che usano anche $ come alias
Jim Wolff


12

Queste linee specifiche sono il solito wrapper per i plugin jQuery:

"... per assicurarti che il tuo plug-in non si scontri con altre librerie che potrebbero utilizzare il simbolo del dollaro, è consigliabile passare jQuery a una funzione di auto-esecuzione (chiusura) che lo associ al simbolo del dollaro in modo che possa" essere sovrascritto da un'altra libreria nell'ambito della sua esecuzione. "

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

Da http://docs.jquery.com/Plugins/Authoring


11

La scorciatoia sicura multi-framework per ready è:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

Questo perché jQuery non è l'unico framework che utilizza le variabili $eundefined


può anche essere scritto come(function($){ ... })(jQuery);
Mike Causer il

2
Anche @MikeCauser ha un buon approccio, ma non verrà chiamato ready, invece verrà chiamato immediatamente
Timo Huovinen,

5

Anche una variante più breve è da usare

$(()=>{

});

dove $sta per jQuery ed ()=>{}è la cosiddetta "funzione freccia" che eredita thisdalla chiusura. (In modo che thisprobabilmente avrai windowinvece di document.)


0

Che dire di questo?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.