Die jQuery-Site listet die grundlegende Plugin-Syntax für jQuery wie folgt auf:
(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 );
Ich möchte nur verstehen, was dort aus der Sicht von Javascript vor sich geht, da es nicht so aussieht, als ob es einer Syntax folgt, die JS zuvor gesehen hat. Hier ist meine Liste mit Fragen:
Wenn Sie die Funktion ($) ... durch eine Variable ersetzen, sagen Sie "the_function", sieht die Syntax folgendermaßen aus:
(the_function)( jQuery );
Was ist "(jQuery);" tun? Sind die Klammern um die Funktion wirklich notwendig? Warum sind die hier? Gibt es einen anderen Code, den Sie geben können, der ähnlich ist?
Es beginnt mit der Funktion ($). Es wird also eine Funktion erstellt, die, soweit ich das beurteilen kann, niemals ausgeführt wird, mit dem Parameter $, der bereits definiert ist? Was ist da los?
Danke für die Hilfe!
quelle
(function(){})()
ist als IIFE (Sofort aufgerufener Funktionsausdruck) bekannt . Lassen Sie uns wissen, dass Sie andere Symbole verwenden können, um den Parser zu zwingen, die Funktion als Ausdruck wie+,!,-,~
(und andere) wie folgt zu behandeln :!function($){}(jQuery)
. Und für noch mehr Spaß können Sie :~~+-!function($){}(jQuery)
!Dies ist eine selbstausführende anonyme Funktion, die
$
in Argumenten verwendet wird, damit Sie sie ($
) anstellejQuery
dieser Funktion verwenden können, ohne befürchten zu müssen, mit anderen Bibliotheken in Konflikt zu geraten, da auch in anderen Bibliotheken$
eine besondere Bedeutung hat. Dieses Muster ist besonders nützlich, wenn Sie jQuery-Plugins schreiben.Sie können dort jedes Zeichen schreiben, anstatt
$
auch:Hier
j
wird automatisch die am Ende angegebene jQuery abgerufen(jQuery)
. Oder Sie können das Argument komplett weglassen, aber dann müssen Sie dasjQuery
Schlüsselwort rundum verwenden, anstatt$
immer noch keine Angst vor einer Kollision zu haben. Wird$
also in das Argument für Kurzschrift eingewickelt, damit Sie innerhalb dieser Funktion schreiben können,$
anstattjQuery
ringsum.Wenn Sie sich sogar den Quellcode von jQuery ansehen, werden Sie feststellen, dass alles dazwischen eingeschlossen ist:
Das ist, wie zu sehen ist, auch eine selbstausführende anonyme Funktion mit Argumenten. Ein
window
(undundefined
) Argument wird erstellt und dem globalenwindow
Objekt unten zugeordnet(window)
. Dies ist heutzutage ein beliebtes Muster und hat nur einen geringen Geschwindigkeitsgewinn, da hierwindow
eher das Argument alswindow
das unten abgebildete globale Objekt untersucht wird.Das
$.fn
ist Aufgabe der jQuery , wo Sie Ihre neue Funktion erstellen (die auch ein Objekt ist) oder das Plugin selbst , so dass jQuery hüllt dein Plugin in seinem$.fn
Objekt und zur Verfügung stellen.Interessanterweise hatte ich hier eine ähnliche Frage beantwortet:
Syntax der JavaScript / jQuery-Schließfunktion
Sie können auch diesen Artikel lesen, um mehr über selbstausführende Funktionen zu erfahren, die ich geschrieben habe:
Javascript Selbstausführende Funktionen
quelle
Mit der grundlegenden Plugin-Syntax können Sie unabhängig von der Identität des Plugins auf den Inhalt Ihres Plugins
$
verweisenjQuery
$
zum Zeitpunkt des Ladens des Plugins. Dies verhindert Namenskonflikte mit anderen Bibliotheken, insbesondere Prototype.Die Syntax definiert eine Funktion, die einen so genannten Parameter akzeptiert,
$
sodass Sie ihn wie$
im Funktionskörper referenzieren können , und diese Funktion dann sofort aufruft und setztjQuery
als Argument eingibt.Dies hilft auch dabei, den globalen Namespace nicht zu verschmutzen (so dass das Deklarieren
var myvar = 123;
in Ihrem Plugin-Body nicht plötzlich definiert wirdwindow.myvar
), aber der Hauptzweck besteht darin, Ihnen zu ermöglichen, zu verwenden,$
wo$
möglicherweise seitdem neu definiert wurde.quelle
Sie haben es dort mit einer selbstaufrufenden anonymen Funktion zu tun. Es ist wie "Best Practice", ein jQuery-Plugin in eine solche Funktion einzuschließen, um sicherzustellen, dass das
$
Zeichen an dasjQuery
Objekt gebunden ist .Beispiel:
Dies würde alarmieren,
BAR
wenn es in einen<script>
Block gelegt wird. Der ParameterBAR
wird an die Funktion übergeben, die sich selbst aufruft.Das gleiche Prinzip geschieht in Ihrem Code, das
jQuery
Objekt wird an die Funktion übergeben,$
verweist also sicher auf das jQuery-Objekt.quelle
Die jQuery am Ende übergibt sich (jQuery) an die Funktion, sodass Sie das $ -Symbol in Ihrem Plugin verwenden können. Sie könnten es auch tun
quelle
Um eine klare Erklärung für diese und andere moderne Javascript-Tricks und gängige Praktiken zu finden, empfehle ich, Javascript Garden zu lesen.
http://bonsaiden.github.com/JavaScript-Garden/
Dies ist besonders nützlich, da viele dieser Muster in vielen Bibliotheken weit verbreitet sind, aber nicht wirklich erklärt werden.
quelle
Die anderen Antworten hier sind großartig, aber es gibt einen wichtigen Punkt, der nicht angesprochen wurde. Du sagst:
Es gibt keine Garantie dafür, dass die globale Variable
$
verfügbar ist . Standardmäßig erstellt jQuery zwei Variablen im globalen Bereich:$
undjQuery
(wobei die beiden Aliase für dasselbe Objekt sind). Allerdings jQuery kann auch in noConflict Modus ausgeführt werden :Wenn Sie aufrufen
jQuery.noConflict()
, wird die globale Variable$
auf den Wert zurückgesetzt, der vor der Aufnahme der jQuery-Bibliothek vorhanden war. Dadurch kann jQuery mit anderen Javascript-Bibliotheken verwendet werden, die auch$
als globale Variable verwendet werden.Wenn Sie ein Plugin geschrieben haben,
$
das als Alias für jQuery fungiert, funktioniert Ihr Plugin nicht für Benutzer, die im noConflict-Modus ausgeführt werden.Wie andere bereits erklärt haben, erstellt der von Ihnen veröffentlichte Code eine anonyme Funktion, die sofort aufgerufen wird. Die globale Variable
jQuery
wird dann an diese anonyme Funktion übergeben, die sicher als lokale Variable$
innerhalb der Funktion aliasiert ist .quelle