Share
In diesem Artikel werden wir unser eigenes jQuery-Plugin Schritt für Schritt von Grund auf neu erstellen. jQuery macht diese Aufgabe für uns außerordentlich einfach. Es bietet uns eine einfache Methode, unsere Skripte zusammenzufassen und deren Funktionalität bereitzustellen, und die Verwendung skalierbarer und wiederverwendbarer objektorientierter Techniken zu fördern.
Es macht Sinn, Code, den wir immer wieder verwenden, in ein jQuery-Plugin umzuwandeln. Das bedeutet, dass wir Skripts auf Websites ablegen können, sodass diese sofort mit wenig oder keiner Anpassung bearbeitet werden können. Dies bedeutet, dass wir unseren Code mit anderen Entwicklern teilen können. Aufgrund der gebräuchlichen Syntax bei der Verwendung von jQuery-Plugins sollten die meisten Entwickler in der Lage sein, sie zu übernehmen und intuitiv zu verwenden, wenn sie einige einfache Dokumentation enthalten, in der die konfigurierbaren Eigenschaften aufgeführt sind.
Unser Plugin wird ein einfacher Image Loader sein; Sobald eine Seite geladen wurde, die Startseite oder eine andere Landing-Page auf unserer Website, laden wir eine Reihe von Bildern. Diese Bilder werden im Browser-Cache des Besuchers gespeichert und können daher auf der gesamten Website verwendet werden. Sie werden viel schneller als normal geladen. Dies ist eine gute Möglichkeit, große Bilder vorab zu laden, so dass der Besucher nicht warten muss, bis er gerendert wird, wenn er die Seite öffnet, die sie enthält.
Wir erstellen ein neues Verzeichnis, in dem alle erforderlichen Dateien gespeichert werden.
Nun, da wir alles eingerichtet haben, können wir mit dem Scripting beginnen. Beginnen Sie in einer neuen Datei in Ihrem Texteditor mit dem folgenden Code:
(Funktion ($) // Plugin-Code wird hier angezeigt…) (jQuery);
Speichern Sie die neue Datei im Skriptordner als jquery.jloader.js. Wir beginnen mit der Erstellung einer anonymen Wrapper-Funktion, die sich selbst ausführt. Die Funktion akzeptiert ein einzelnes Argument, nämlich das Dollarsymbol. Auf die Funktion folgt ein zweiter Satz von Klammern. Wir verwenden diese, um die jQuery-Bibliothek an unser Plugin zu übergeben. Das bedeutet, dass wir jede standardmäßige jQuery-Funktionalität verwenden können, indem Sie das Zeichen $ als Alias verwenden. Diese zweite Gruppe von Klammern macht unsere Funktion auch selbstausführend.
Fügen Sie in unserer anonymen Funktion den folgenden Code hinzu:
$ .jLoader = Standardwerte: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Mit diesem Code erstellen wir ein neues Objekt, das dem jQuery-Objekt als Eigenschaft hinzugefügt wird. In diesem Objekt befindet sich ein zweites Objekt, das als Standardwerte bezeichnet wird. Dieses zweite Objekt dient zum Speichern der verschiedenen Konfigurationseinstellungen für unser Plugin. Diese Einstellungen sind Eigenschaften unseres Plugins und bilden die Haupt-API, mit der es programmgesteuert verwendet werden kann. Nachdem das Plugin codiert wurde, wird es auf der Registerkarte DOM von Firebug als Eigenschaft der $ - oder jQuery-Objekte angezeigt:
Als Nächstes müssen wir unsere Konstruktormethode zu jQuery hinzufügen, damit wir bestimmte Elemente oder Elementgruppen anvisieren und unser Plugin darauf anwenden können. Fügen Sie direkt nach den konfigurierbaren Eigenschaften den folgenden Code hinzu:
Accentsconagua
$ .fn.extend (jLoader: function (config, Dateiname)) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); (config .simpleFileNames == true)? simpleLoad (config): complexLoad (config, fileNames); dies zurückgeben;); Die Erweiterungsmethode von jQuery nimmt ein Objekt und wendet dessen Eigenschaften auf ein anderes Objekt an. Bei der Erstellung von Plugins wenden wir das Objekt, das unser Plugin darstellt, auf das Fn-Objekt an. Hierbei handelt es sich um ein spezielles jQuery-Konstrukt für Authoring-Plugins.
Die jLoader-Eigenschaft in dem Objekt, auf das wir fn anwenden, hat eine anonyme Funktion als Wert. Innerhalb dieser Funktion fügen wir zunächst unsere konfigurierbaren Eigenschaften hinzu. Wir machen dies erneut mit der Erweiterungsmethode von jQuery. Unsere Konstruktorfunktion akzeptiert zwei optionale Argumente, ein vom Entwickler erstelltes Konfigurationsobjekt und ein Array von Dateinamen.
Dadurch können wir die Standardeigenschaften verwenden, aber auch ein Konfigurationsobjekt akzeptieren, wenn wir die Konstruktormethode aus externem Code aufrufen. Alle im Konfigurationsobjekt des Konstruktors bereitgestellten Eigenschaften überschreiben die Werte aller übereinstimmenden Eigenschaften im Standardkonfigurationsobjekt.
Für andere Entwickler ist es hilfreich, so viele konfigurierbare Eigenschaften wie möglich bereitzustellen, um unsere Plugins robuster und anpassbarer zu machen. Die resultierenden Eigenschaften werden in der config-Variablen gespeichert, damit wir sie leicht an andere Funktionen weitergeben können.
Wir erhalten die ID des ausgewählten Elements, die wir erhalten können, indem Sie das ID-Attribut des aktuellen jQuery-Objekts abfragen, das auf das Element bzw. die Elemente verweist, an die unsere Konstruktorfunktion angehängt ist.
Wir bestimmen dann, ob wir einfache (numerische) oder komplexe (alphanumerische) Dateinamen verwenden. Wir können dies über die simpleFileNames-Eigenschaft unseres config-Objekts erfahren. Standardmäßig ist dies auf true gesetzt. Wir überprüfen also, ob der Wert noch true ist, und rufen die entsprechende Funktion mit der ternären bedingten Anweisung von Standard-JavaScript auf. Jeder Funktion wird das Konfigurationsobjekt übergeben, damit wir ihre Eigenschaften innerhalb der Funktion verwenden können. Andernfalls könnten wir nicht auf die Konfigurationseigenschaften innerhalb unserer Methoden zugreifen.
Schließlich verwenden wir die return-Anweisung, um unser Plugin-Objekt zurückzugeben. Dies ist ein wichtiger Faktor im Plugin-Code. Dies bedeutet, dass wir zusätzliche jQuery-Methoden an das Ende des Aufrufs unserer Konstruktor-Methode ketten können, sodass sie sich genau wie andere interne Methoden von jQuery verhält.
Unser Plugin verfügt über zwei zusätzliche Methoden, die der Konstruktormethode folgen. Diese beiden Methoden werden intern vom Plugin verwendet und müssen nicht aus externem Code aufgerufen werden. Stellen Sie sich sie als geschützte Methoden vor. Die erste davon ist die simpleLoad-Methode und besteht aus dem folgenden Code:
Funktion simpleLoad (config) für (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" image "+ x, src: config.imgDir + x + config.imgFormat, Titel:" Image "+ x). appendTo (" # "+ config.imgContainer) .css ( Anzeige: "keine");; Mit einer Standard-JavaScript-for-Schleife können wir die erforderliche Anzahl von img-Elementen gemäß der imgTotal-Eigenschaft erstellen, die wir in unserem Standardobjekt auf 9 setzen. Es mag umständlich erscheinen, dem Plugin mitteilen zu müssen, wie viele Bilder wir laden möchten. Leider gibt es keine Möglichkeit, den Ordner mithilfe von JavaScript nach seinem Inhalt abzufragen. Diese Eigenschaft verhindert, dass das Plugin eine serverseitige Unterstützung erfordert.
Wir erstellen jedes Bild mit der hervorragenden Funktion zur Erstellung von DOM-Knoten von jQuery und legen die grundlegenden Attribute fest, die jedes Bild benötigt. eine id, src und ein titel. Um die ID jedes Elements eindeutig zu machen, können wir die count-Variable unserer for-Schleife verwenden. Die src jedes neuen img-Elements ist das komplexeste; Für dieses Attribut fügen wir den Pfad zuerst mit der Eigenschaft imgDir zum Bild hinzu. Bei einfachen Dateinamen können wir auch die count-Variable verwenden, um jedes angegebene Bild hinzuzufügen. Schließlich fügen wir die Dateierweiterung mit der Eigenschaft imgFormat hinzu. Das Titelattribut stimmt einfach mit der ID überein.
Sobald jedes Bild erstellt und mit den entsprechenden Attributen versehen wurde, hängen wir es an das in der imgContainer-Eigenschaft angegebene Containerelement an. Die vorab geladenen Bilder sind zu diesem Zeitpunkt noch nicht sichtbar. Daher können wir die css-Methode von jQuery verwenden, um ihre Anzeigeeigenschaft auf none zu setzen. Die letzte Funktion complexLoad verwendet sowohl das optionale Konfigurationsobjekt als auch das fileNames-Array. Der Code sollte wie folgt aussehen:
Funktion complexLoad (config, fileNames) für (var x = 0; x) < fileNames.length; x++) $("![]()
") .attr (id: fileNames [x], src: config.imgDir + fileNames [x] + config.imgFormat, Titel:" The "+ fileNames [x] +" nebula "). appendTo (" # ") + config.imgContainer) .css (display: "none");; Wir verwenden immer noch eine for-Schleife in dieser Methode, obwohl die Anzahl der Ausführungen auf der Anzahl der Elemente im fileNames-Array und nicht auf der imgTotal-Eigenschaft basiert. Wir erstellen immer noch eine Reihe von img-Elementen und setzen für diese Elemente dieselben Attribute wie zuvor, obwohl wir diesmal andere Werte für die Attribute verwenden.
Die ID jedes neuen Bildes wird einfach auf den Inhalt des aktuellen Feldelements festgelegt. Das Bild wird geladen, indem Pfad, Dateiname und Dateierweiterung noch einmal zusammengefügt werden. Diesmal verwenden wir jedoch den Inhalt des aktuellen Arrayelements als Dateinamen anstelle einer Ganzzahl. Das title-Attribut hat einen etwas detaillierteren Wert als zuvor und verwendet erneut das Array-Element anstelle einer Konfigurationseigenschaft.
Wir haben jetzt den gesamten Code hinzugefügt, aus dem unser Plugin besteht. Es ist Zeit, es auf die Probe zu stellen. Erstellen Sie eine leere HTML-Datei wie die folgende:
jLoader Demo-Seite
Speichern Sie diese Seite im Hauptprojektordner (jLoader) als etwas wie jLoader.demo.html. Im Hauptteil der Seite haben wir unsere beiden Containerelemente, die wir mit den vorab geladenen Bildern füllen. Wir verlinken auf jQuery und auf die Quelldatei für unser Widget. Anschließend haben wir zwei Konstruktormethoden für unser Plugin.
Der erste get ist der simpleImageContainer, der die Standard-DOM-Abrufmethode von jQuery verwendet, und ruft unser Plugin ohne zusätzliche Konfiguration auf. Dies ruft die Standardimplementierung auf und sollte den Container mit den numerisch benannten Bildern füllen. Sie werden dies nicht auf der Seite sehen, da wir alle für die Anzeige festgelegt haben: none, aber Sie sollten sie in Firebug sehen können:
Die zweite Konstruktormethode verwendet sowohl ein Konfigurationsobjekt als auch das Array fileNames. Wir legen hier zwei Eigenschaften fest; Zuerst setzen wir die simpleFileNames-Eigenschaft auf false, damit unsere zweite protected-Methode in unserem Plugin verwendet wird. Zweitens setzen wir die imgContainer-Eigenschaft auf die ID des Elements, zu dem die Bilder hinzugefügt werden sollen. Wir stellen dann ein Array aller Bilddateinamen bereit, die wir im String-Format vorladen möchten. Wieder sehen Sie die Bilder nicht; das ist der springende Punkt, aber Firebug wird ihre Existenz beweisen:
In diesem Tutorial haben wir uns die einzelnen Schritte angesehen, die zum Erstellen eines einfachen jQuery-Plugins erforderlich sind. Wir haben untersucht, wie Sie der API unseres Plugins Eigenschaften hinzufügen und Methoden hinzufügen, die unterschiedliche Verhaltensweisen ausführen. Wir haben auch die Methoden von jQuery kennen gelernt, um das Authoring von Plugins zu vereinfachen, und Techniken, mit denen wir unsere Kreationen robuster machen können.
Besuchen Sie die jQuery-Site, um die verfügbaren Plugins zu überprüfen. Es ist sinnlos, das Rad neu zu erfinden, wenn Sie nicht lernen!
Artikel besuchen
"Manchmal ist uns klar, dass eine Aufgabe zu komplex ist, die wir einfach ignorieren. Das war meine Denkweise, wenn ich über die Entwicklung eines Plugins für jQuery nachdachte. Ich habe immer gedacht, dass ein Teil des von mir entwickelten Codes mehr Sinn macht als Plugin, aber ich hatte einfach keine Zeit, es herauszufinden. "
Artikel besuchen
"Sie waren also auf der Suche nach der Antwort auf das Leben, das Universum und alles andere. Als Blam Sie jQuery gefunden haben. Ja, ich weiß, Sie erwarteten 42, aber auch unsere ganze Überraschung war jQuery. Also Was kommt als nächstes? Bauen Sie Ihr eigenes Plugin! "
Artikel besuchen
