1. Öffnungsanalyse
Hallo alle! Die heutige Artikelreihe spricht hauptsächlich darüber, wie die Plug-in-Entwicklung basierend auf "JavaScript" entwickelt wird. Ich denke, viele Menschen sind nicht mit dem Wort "Plugin" vertraut.
Einige Leute können es "Komponente" oder "Komponente" nennen, was nicht wichtig ist. Der Schlüssel liegt darin, zu untersuchen, wie man entwirft und eine umfassende Überlegung vorliegt. Dies ist das Konzept, auf das sich dieser Artikel konzentriert. Ich denke, jeder hat Recht
Ich habe ein gewisses Verständnis der "JQuery-Plug-in" -Methode. Wir werden es gemeinsam auf diesem Thema diskutieren und schließlich relevante Implementierungspläne zur kontinuierlichen Verbesserung unserer Fähigkeiten geben.
2. Geben Sie das Plug-in-Thema ein
Im Allgemeinen ist die Entwicklung von JQuery-Plug-Ins in zwei Typen unterteilt: Eine ist eine globale Funktion, die unter dem JQuery-Namespace hängt, der auch als statische Methode bezeichnet werden kann.
Eine andere Methode ist die Methode der JQuery -Objektebene, dh die Methode, die unter dem Jquery -Prototyp gehängt ist, so dass die über den Selektor erhaltenen Jquery -Objektinstanzen auch die Methode teilen können.
(1), Plug-in-Entwicklung auf Klassenebene
Das direkteste Verständnis der Plug-in-Entwicklung auf Klassenebene besteht darin, der "jQuery" -Klasse Klassenmethoden hinzuzufügen, die als Hinzufügen statischer Methoden verstanden werden kann. Ein typisches Beispiel ist die Funktion "$ .ajax ()", die die Funktion im Jquery -Namespace definiert. Die Plug-In-Entwicklung auf Klassenebene kann in den folgenden Formularen erweitert werden:
1.1 Fügen Sie eine globale Funktion hinzu, wir müssen sie nur wie folgt definieren und den Code sehen:
Die Codekopie lautet wie folgt:
$ .hello = function () {
Alarm ("Hallo, Big Bear!");
};
1.2 Fügen Sie mehrere globale Funktionen hinzu, die wie folgt definiert werden können:
Die Codekopie lautet wie folgt:
$ .extend ({{
Hallo: Funktion (Name) {
// Setzen Sie Ihren Code hier ein
},
Welt: function () {
// Setzen Sie Ihren Code hier ein
}
});
Beschreibung: "$ .extend (target, [Object1], [ObjectN])" (Diese Methode wird hauptsächlich zum Zusammenführen des Inhalts (Attribute) von zwei oder mehr Objekten an das erste Objekt verwendet und das fusionierte erste Objekt zurückgibt.
Wenn die Methode nur ein Parameterziel hat, erweitert der Parameter den Namespace von JQuery, dh, es wird als statische Methode unter das globale Jquery -Objekt aufgehängt).
(2), Plug-in-Entwicklung auf Objektebene
Die Plug-in-Entwicklung auf Objektebene erfordert zwei Formulare:
2.1 Dynamisch relevante Attribute über "$ .fn.extend ()" als Prototypen.
Die Codekopie lautet wie folgt:
(Funktion ($) {
$ .fn.extend ({{
PlugInname: Funktion (opts) {
// Setzen Sie Ihren Code hier ein
}
});
}) (jQuery);
2.2 Fügen Sie der Prototypkette direkt dynamische Attribute hinzu.
Die Codekopie lautet wie folgt:
(Funktion ($) {
$ .fn.pluginname = function () {
// Setzen Sie Ihren Code hier ein
};
}) (jQuery);
Lassen Sie mich erklären: Die beiden sind gleichwertig. Für ein JQuery-Plug-In kann eine grundlegende Funktion gut funktionieren, aber für komplexere Plug-Ins müssen verschiedene Methoden und private Funktionen bereitgestellt werden.
Sie können verschiedene Namespaces verwenden, um verschiedene Methoden für Ihr Plug-In bereitzustellen, aber das Hinzufügen zu viel Namespace macht den Code chaotisch und weniger robust. Die beste Lösung besteht also darin, private Funktionen und Methoden angemessen zu definieren.
Daher implementieren wir die simulierte private Plug-in-Einheit, indem wir selbst executierende Funktionen mit Schließungen kombinieren, genau wie in unserem obigen Beispiel.
(3) geben wir ein einfaches Beispiel, um den Implementierungsprozess anzuzeigen:
(1) ist der "HTML" -Pragmentcode wie folgt:
Die Codekopie lautet wie folgt:
<div id = "bb">
<span> </span>
<div
style = "margin-top: 10px;
Randboden: 30px; "
> 8 </div>
</div>
(2) ist die Definition von "Data.json" wie folgt:
Die Codekopie lautet wie folgt:
{
"Text": "Hallo, Big Bear {{BB}}!" ;
}
(3) ist der Code "Bb.js" wie folgt:
Die Codekopie lautet wie folgt:
$ (function () {
$ ("#BB"). Bigbear ();
});
(Funktion ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
Gibt this.each (function () {zurück
var elem = $ (this);
Elem.find ("span"). text (optts ["title"]);
$ .get (opts ["url"], function (data) {
Elem.find ("Div"). Text (Daten ["Text"]);
});
});
};
$ .fn.bigbear.defaults = {
Titel: "Dies ist ein einfacher Test",
URL: "Data.json"
};
}) (jQuery);
Laufeffekt:
Lassen Sie uns zusammenfassen :
(1) "$ .fn.bigbear.Defaults" enthält die Standardparameteroptionen für das Plug-In. Ein Plug-In mit einer guten Erweiterbarkeit sollte es Benutzern ermöglichen, Parameteroptionen entsprechend der Anforderungen anzupassen und das Verhalten des Plug-Ins zu steuern. Daher müssen wiederhergestellte Standardoptionen bereitgestellt werden. Sie können diese Optionen über die Erweiterungsmethode von JQuery festlegen.
(2), "zurückgeben. Dies ist eine von mehreren hervorragenden Funktionen von JQuery, und selbst wenn Sie nicht bereit sind, Ihr Plugin während der Entwicklung mehrfach zu unterstützen, ist es immer noch ein guter Weg, sich darauf vorzubereiten. Darüber hinaus verfügt JQuery über eine gute Funktion, mit der Methodenkaskaden ausgeführt werden können, die auch als Kettenaufrufe bezeichnet werden können. Daher sollten wir diese Funktion nicht zerstören und immer ein Element in der Methode zurückgeben.
(Iv), endgültige Zusammenfassung
(1) JQuery hat zwei Methoden für das Entwicklungs-Plug-In eingeführt, nämlich: jQuery.fn.extend (Objekt); Fügen Sie dem Jquery -Objekt die Methode hinzu.
jQuery.extend (Objekt); Fügt der Klasse neue Methoden hinzu, um die JQuery -Klasse selbst zu erweitern.
(2) Setzen Sie den gesamten Code in die Schließung (eine sofortige Ausführungsfunktion). Zu diesem Zeitpunkt entspricht die Schließung einem privaten Bereich. Das Äußere kann nicht auf interne Informationen zugreifen, und es wird keine Verschmutzung globaler Variablen geben. Die offizielle Entwicklungsspezifikation wird erläutert: a) Vermeiden Sie globale Abhängigkeiten; b) Schäden von Drittanbietern vermeiden; c) Kompatibilität mit JQuery -Betreibern "$" und "jQuery".
(3) Geben Sie die Standardparameteroptionen für Plug-in an. Ein Plug-In mit einer guten Erweiterbarkeit sollte es Benutzern ermöglichen, Parameteroptionen entsprechend ihren Anforderungen anzupassen und das Verhalten des Plug-Ins zu steuern. Daher ist es notwendig, wiederhergestellte Standardoptionen bereitzustellen. Sie können diese Optionen über die Erweiterungsmethode von JQuery festlegen
(4) durch mehrere Elemente durchzusetzen und JQuery mit dem Sizzle Selector-Engine zurückzugeben. Sizzle kann Multi-Elemente-Operationen für Ihre Funktionen bereitstellen (z. B. Elemente mit demselben Klassennamen). Dies ist eine von mehreren hervorragenden Funktionen von JQuery, und selbst wenn Sie nicht bereit sind, Ihr Plugin während des Entwicklungsprozesses mit mehreren Elementen zu unterstützen, ist es immer noch eine gute Praxis, sich darauf vorzubereiten. Darüber hinaus verfügt JQuery über eine gute Funktion, mit der Methodenkaskaden ausgeführt werden können, die auch als Kettenaufrufe bezeichnet werden können. Daher sollten wir diese Funktion nicht zerstören und immer ein Element in der Methode zurückgeben.
(5) Es ist wichtig, einen einmaligen Code außerhalb der Hauptschleife zu platzieren, wird jedoch oft ignoriert. Einfach ausgedrückt, wenn Sie ein Stück Code haben, das eine Reihe von Standardwerten ist, die nur einmal instanziiert werden müssen, anstatt jedes Mal, wenn Sie die Plugin -Funktion aufrufen, diese Code außerhalb der Plugin -Methode stellen.
(6) Denken wir nach dem Lernen darüber nach. Wenn die Auswahl und den Austausch dieser Plug-Ins der Projekttechnologie auf den „JQuery“ -Mechanismus beruht, werden die von uns zuvor geschriebenen Plug-Ins nicht verwendet (vorausgesetzt, dass JQuery nicht verwendet wird). Wie kann man es neu umrüsten?
Der Artikel von morgen wird über dieses Problem sprechen und die wichtigste Logik des Plug-Ins neu aufrüsten. Bleiben Sie also dran. . .