Mi piacerebbe capire la sintassi del plugin jQuery

89

Il sito jQuery elenca la sintassi di base del plugin per jQuery come questa:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

Vorrei solo capire cosa sta succedendo dal punto di vista di Javascript, perché non sembra che segua alcuna sintassi che ho visto fare in JS prima. Quindi ecco la mia lista di domande:

  1. Se sostituisci la funzione ($) ... con una variabile, dì "la_funzione", la sintassi sarà simile a questa:

     (the_function)( jQuery );

    Che cos'è "(jQuery);" facendo? Le parentesi attorno alla funzione_ sono davvero necessarie? Perché ci sono? C'è un altro pezzo di codice che puoi fornire simile?

  2. Inizia con la funzione ($). Quindi sta creando una funzione, che per quanto ne so non verrà mai eseguita, con il parametro $, che è già definito? Cosa sta succedendo lì?

Grazie per l'aiuto!

javascript  jquery  jquery-plugins 
— Ethan
fonte

Risposte:

130 
function(x){ 
    x...
}

è solo una funzione senza nome, che accetta un argomento, "x", e fa cose con x.

Invece di "x", che è un nome di variabile comune, puoi usare $, che è un nome di variabile meno comune, ma comunque legale.

function($){ 
    $...
}

Lo metterò tra parentesi per assicurarmi che venga analizzato come un'espressione:

(function($){
    $....
})

Per chiamare una funzione, inserisci () dopo di essa con un elenco di argomenti. Ad esempio, se volessimo chiamare questa funzione passando 3 per il valore di $faremmo questo:

(function($){
    $...
})(3);

Solo per i calci, chiamiamo questa funzione e passiamo jQuery come variabile:

(function($){
     $....
})(jQuery);

Questo crea una nuova funzione che accetta un argomento e quindi chiama quella funzione, passando jQuery come valore.

PERCHÉ?

  • Perché scrivere jQuery ogni volta che vuoi fare qualcosa con jQuery è noioso.

PERCHÉ NON SCRIVERE SOLO $ = jQuery?

  • Perché qualcun altro potrebbe aver definito $ per significare qualcos'altro. Ciò garantisce che qualsiasi altro significato di $ venga oscurato da questo.
— Joel Spolsky
fonte
20
È chiaro, ma manca un'elaborazione sulla necessità di guidare il parser nell'analisi della definizione della funzione come un'espressione e non come un'istruzione . Ecco a cosa servono le parentesi extra .
— Pointy
16
(function(){})()è noto come IIFE (Espressione di funzione immediatamente invocata) . Si sappia che è possibile utilizzare altri simboli per forzare il parser per trattare la funzione come un'espressione come +,!,-,~(e altri) in questo modo: !function($){}(jQuery). E per divertirti ancora di più puoi ~~+-!function($){}(jQuery):!
— David Murdoch
(funzione ($, win, doc) {$ ....}) (jQuery, window, document); Aggiungerei anche questo ... Mi ha aiutato a capire meglio. in questa pace di codice, jQuery ---> $; e finestra ---> vinci; quindi documento ---> doc ... :) grazie ...
— Haranadh
Ho affrontato un esempio di codice che IMHO non è incluso nell'elenco precedente: $ (function () {.....} (jQuery)); (Tratto da qui: docs.microsoft.com/en-us/aspnet/core/mvc/models/… ). Qui, non capisco l'utilizzo di $. Non sembra essere né un selettore jQuery $ (...) né una sintassi breve per l'evento 'document ready', perché la funzione non restituisce nulla. Inoltre, non sembra essere un prefisso per trattare la funzione come un'espressione, perché è al di fuori delle parentesi graffe. Inoltre, la chiamata alla funzione viene fatta DENTRO le parentesi graffe, quindi stiamo chiamando la dichiarazione.
— sich
35 
(function( $ ){

})( jQuery );

Questa è una funzione anonima autoeseguente che utilizza $in argomento in modo da poterla utilizzare ( $) invece jQueryche all'interno di quella funzione e senza il timore di entrare in conflitto con altre librerie perché anche in altre librerie $ha un significato speciale. Questo modello è particolarmente utile quando si scrivono plugin jQuery.

Puoi scrivere qualsiasi carattere lì invece che $anche:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Qui jrecupererà automaticamente jQuery specificato alla fine (jQuery). Oppure puoi tralasciare completamente l'argomento ma poi dovrai usare jQueryparole chiave tutt'intorno invece di $senza timore di collisioni. Quindi $è racchiuso nell'argomento per l'abbreviazione in modo che tu possa scrivere $invece che jQuerytutto intorno all'interno di quella funzione.

Se guardi anche il codice sorgente di jQuery, vedrai che tutto è racchiuso tra:

(function( window, undefined ) {
  // jQuery code
})(window);

Questo è come si può vedere anche una funzione anonima autoeseguente con argomenti. Viene creato un argomento window(and undefined) che viene mappato con l' windowoggetto globale in basso (window). Questo è un modello popolare in questi giorni e ha poco guadagno di velocità perché qui windowverrà esaminato dall'argomento piuttosto che windowdall'oggetto globale che è mappato di seguito.

È $.fnl'oggetto di jQuery in cui crei la tua nuova funzione (che è anche un oggetto) o il plugin stesso in modo che jQuery avvolga il tuo plugin nel suo $.fnoggetto e lo renda disponibile.

È interessante notare che avevo risposto a una domanda simile qui:

Sintassi della funzione di chiusura JavaScript / jQuery

Puoi anche consultare questo articolo per saperne di più sulle funzioni autoeseguibili che avevo scritto:

Funzioni autoeseguenti Javascript

— Sarfraz
fonte
Quindi, se avessi un oggetto chiamato my_object e facessi questo: (function (mo) {mo.doSomething ()}) (my_object), allora eseguirà my_object.doSomething ()?
— Ethan
3

La sintassi di base del plug-in consente di utilizzare $per fare riferimento jQuerynel corpo del plug-in, indipendentemente dall'identità del $momento in cui il plug-in viene caricato. Ciò impedisce conflitti di denominazione con altre librerie, in particolare Prototype.

La sintassi definisce una funzione che accetta un parametro noto come in $modo che tu possa fare riferimento ad esso come $nel corpo della funzione, quindi invoca immediatamente quella funzione, inserendola jQuerycome argomento.

Questo aiuta anche a non inquinare lo spazio dei nomi globale (quindi la dichiarazione var myvar = 123;nel corpo del plug-in non definirà improvvisamente window.myvar), ma lo scopo principale apparente è quello di consentire di utilizzare $dove $potrebbe essere stato ridefinito da allora.

— Steven
fonte
3

Hai a che fare con una funzione anonima che si autoinvoca lì. È come "best practice" racchiudere un plug-in jQuery all'interno di una tale funzione per assicurarsi che il $segno sia associato jQueryall'oggetto.

Esempio:

(function(foo) {
    alert(foo);
}('BAR'));

Questo avvisa BARquando viene inserito in un <script>blocco. Il parametro BARviene passato alla funzione che chiama se stessa.

Lo stesso principio sta accadendo nel tuo codice, l' jQueryoggetto viene passato alla funzione, quindi $farà sicuramente riferimento all'oggetto jQuery.

— jAndy
fonte
1
Capisco tutto questo. Quello che voglio sapere è perché / come funziona la sintassi delle parentesi per creare una funzione autoeseguibile? È solo una caratteristica della lingua? Come funziona?
— carne
2

Il jQuery alla fine passa se stesso (jQuery) alla funzione, in modo che tu possa usare il simbolo $ all'interno del tuo plugin. Potresti anche farlo

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );
— harpax
fonte
2

Per trovare una chiara spiegazione di questo e di altri trucchi javascript moderni e pratiche comuni, consiglio di leggere Javascript Garden.

http://bonsaiden.github.com/JavaScript-Garden/

È particolarmente utile, perché molti di questi modelli sono ampiamente utilizzati in molte librerie ma non sono realmente spiegati.

— OlliM
fonte
2

Le altre risposte qui sono ottime, ma c'è un punto importante che non è stato affrontato. Tu dici:

Quindi sta creando una funzione, che per quanto ne so non verrà mai eseguita, con il parametro $, che è già definito?

Non vi è alcuna garanzia che la variabile globale $sia disponibile . Per impostazione predefinita, jQuery crea due variabili nell'ambito globale: $e jQuery(dove i due sono alias per lo stesso oggetto). Tuttavia, jQuery può essere eseguito anche in modalità noConflict :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Quando si chiama jQuery.noConflict(), la variabile globale $viene reimpostata su quello che era prima che la libreria jQuery fosse inclusa. Ciò consente di utilizzare jQuery con altre librerie Javascript che utilizzano anche $come variabile globale.

Se hai scritto un plugin che si basa $sull'essere un alias per jQuery, allora il tuo plugin non funzionerebbe per gli utenti che eseguono in modalità noConflict.

Come altri hanno già spiegato, il codice che hai postato crea una funzione anonima che viene chiamata immediatamente. La variabile globale jQueryviene quindi passata a questa funzione anonima, a cui viene fornito un alias sicuro come variabile locale$ all'interno della funzione.

— Kip
fonte
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.