Share
Beim Schreiben eines jQuery-Plugins sollte die gleiche Konfliktverhütungsroutine implementiert werden, die für regulären, alten jQuery-Code verwendet wird. In diesem Sinne sollten alle Plugins in einem privaten Bereich enthalten sein, in dem die $ Alias kann ohne Angst vor Konflikten oder überraschenden Ergebnissen verwendet werden.
Die folgende Codierungsstruktur sollte bekannt sein, da sie in fast jedem Codebeispiel dieser Sitzung verwendet wird.
Neue Plugins werden an die angehängt jQuery.fn object, da dies eine Verknüpfung oder ein Alias für ist jQuery.prototype. In unserem Codierungsbeispiel unten fügen wir das count-Plugin zum hinzu jQuery.fn Objekt. Auf diese Weise erstellen wir eine eigene benutzerdefinierte jQuery-Methode, die für eine Gruppe von DOM-Elementen verwendet werden kann.
Grundsätzlich ist ein Plugin an jQuery.fn ermöglicht es uns, eigene Methoden zu erstellen, die denen in der API ähneln. Dies liegt daran, wenn wir unsere Plugin-Funktion anhängen jQuery.fn, Unsere Funktion ist in der Prototypenkette enthalten-$ .fn.count = function () -für jQuery-Objekte, die mit der jQuery-Funktion erstellt wurden. Wenn das Ihren Kopf berührt, denken Sie einfach daran, dass Sie eine Funktion hinzufügen jQuery.fn bedeutet, dass das Schlüsselwort diese In der Plugin-Funktion wird auf das jQuery-Objekt selbst verwiesen.
Anmerkungen: Durch Hinzufügen eines Plugins zum jQuery.fn Wir sagen im Wesentlichen, dass unser Plugin die jQuery-Funktion verwenden möchte, um einen Kontext (DOM-Elemente) auszuwählen. Wenn für Ihr Plugin kein bestimmter Kontext (dh eine Gruppe von DOM-Elementen) erforderlich ist, in dem es ausgeführt werden muss, müssen Sie dieses Plugin möglicherweise nicht mit dem verknüpfen $ .fn. Es könnte sinnvoller sein, es als Dienstprogrammfunktion im jQuery-Namespace hinzuzufügen.
Accentsconagua
diese Ist ein Verweis auf das aktuelle jQuery-ObjektWenn Sie ein Plugin an die jQuery.fn Objekt, das Schlüsselwort diese Die in der angefügten Plug-In-Funktion verwendeten Verweise beziehen sich auf das aktuelle jQuery-Objekt.
Es ist wichtig, dass Sie genau wissen, was das Keyword ist diese bezieht sich auf die Plugin-Funktion.
diese StichwortVerwenden jeder(), Wir können eine implizite Iteration für unser Plugin erstellen. Das heißt, wenn der Wrapper-Satz mehr als ein Element enthält, wird unsere Plugin-Methode auf jedes Element im Wrapper-Satz angewendet.
Dazu verwenden wir das Dienstprogramm jQuery jeder() function ist ein generischer Iterator für Objekte und Arrays, der das Schleifen vereinfacht. Im folgenden Codebeispiel verwenden wir die Funktion, um das jQuery-Objekt selbst zu durchlaufen. Innerhalb der Funktion, an die übergeben wird jeder(), das Schlüsselwort diese bezieht sich auf die Elemente im jQuery-Wrapper-Set.
Verwendung der jeder() Funktion ist kritisch, wenn Sie möchten, dass ein Plugin die implizite Iteration verwendet.
In der Regel geben die meisten Plugins das jQuery-Objekt selbst zurück, sodass das Plugin die Kette nicht beschädigt. Mit anderen Worten, wenn ein Plugin keinen Wert speziell zurückgeben muss, sollte es die Kette fortsetzen, sodass zusätzliche Methoden auf den Wrapper-Satz angewendet werden können. In dem folgenden Code geben wir das jQuery-Objekt mit dem zurück kehre das zurück; Anweisung, damit die Verkettung nicht gebrochen wird. Beachten Sie, dass ich an der angekettet bin Elternteil() und anhängen () Methoden, nachdem ich die anrufe Anzahl() Plugin.
Anmerkungen: Es ist möglich, das Plugin zu einer destruktiven Methode zu machen, indem das jQuery-Objekt einfach nicht zurückgegeben wird.
Plugins enthalten normalerweise Standardoptionen, die als Baseline-Standardkonfiguration für die Logik der Plugins dienen. Diese Optionen werden verwendet, wenn das Plugin aufgerufen wird. Im folgenden Code erstelle ich ein defaultOptions Objekt, das eine einzelne Eigenschaft enthält (startCount) und Wert (0). Dieses Objekt wird in der Zählfunktion gespeichert $ .fn.count.defaultOptions. Wir machen dies, damit die Optionen von außerhalb des Plugins konfiguriert werden können.
In der Regel können die Standard-Plugin-Optionen mit benutzerdefinierten Optionen überschrieben werden. Im folgenden Code gebe ich ein customOptions object als Parameter für die Plugin-Funktion. Dieses Objekt wird mit dem kombiniert defaultOptions Objekt, um ein einzelnes zu erstellen Optionen Objekt. Wir verwenden die Dienstprogrammmethode jQuery erweitern() Mehrere Objekte zu einem Objekt zusammenfassen. Das erweitern() Die Methode bietet das perfekte Dienstprogramm zum Überschreiben eines Objekts mit neuen Eigenschaften. Mit diesem Code kann das Plugin jetzt angepasst werden, wenn es aufgerufen wird. Im Beispiel übergeben wir die Anzahl Fügen Sie eine benutzerdefinierte Nummer (500) ein, die als Startpunkt für die Zählung verwendet werden soll. Diese benutzerdefinierte Option überschreibt die Standardoption (0)..
Da die Standardoptionen von außerhalb eines Plugins aufgerufen werden können, ist es möglich, die Standardoptionen vor dem Aufrufen des Plugins zurückzusetzen. Dies kann praktisch sein, wenn Sie eigene Optionen definieren möchten, ohne den Plugin-Code selbst zu ändern. Dies kann die Aufrufe von Plugins vereinfachen, da Sie das Plugin gewissermaßen global nach Ihren Wünschen einrichten können, ohne den ursprünglichen Plugin-Code selbst zu verzichten.
Je nach Art des Plugins kann es kritisch sein, dass ein Plugin sowohl normal (über DOM-Elemente und Ereignisse) als auch programmgesteuert aufgerufen wird. Betrachten Sie ein Dialog-Plugin. Es wird Zeiten geben, in denen der Modal / Dialog auf der Basis von Benutzerereignissen geöffnet wird. Zu anderen Zeiten muss ein Dialog basierend auf Umgebungs- oder Systemereignissen geöffnet werden. In diesen Situationen können Sie Ihr Plugin immer noch ohne Elemente im DOM aufrufen, indem Sie ein Element erstellen, um das Plugin aufzurufen. Im folgenden Code rufe ich die Dialog() Plugin beim Laden der Seite, indem Sie zuerst ein Element erstellen, um mein Plugin aufzurufen.
Dialog, sag hallo Dialog, sag Tschüss
Natürlich kann dieses Muster in Abhängigkeit von den Optionen, der Komplexität und der Funktionalität des Plugins stark variieren. Der Punkt ist hier, dass Plugins über vorhandene DOM-Elemente sowie über die spontan erstellten Elemente aufgerufen werden können.
Wenn Sie jQuery-Plugins erstellen, ist es ratsam, Callback-Funktionen als Option bereitzustellen und diese Funktionen dem Kontext von zu übergeben diese wenn der Rückruf aufgerufen wird. Dies stellt ein Fahrzeug für eine zusätzliche Behandlung von Elementen in einem Umhüllungsset bereit. Im folgenden Code übergeben wir eine benutzerdefinierte Option an outAndInFade () Plugin-Methode, die eine Funktion ist und nach Abschluss der Animation aufgerufen werden sollte. Der Rückruffunktion wird der Wert von übergeben diese wenn es aufgerufen wird. Dies erlaubt uns dann die Verwendung der diese Wert innerhalb der von uns definierten Funktion. Wenn die Rückruffunktion aufgerufen wird, verweist das Schlüsselwort this auf eines der DOM-Elemente, die im Wrapper-Set enthalten sind.
Out und In FadeOut und In Fade
