1. Öffnungsanalyse
Hallo alle! Erinnern Sie sich noch an den vorherigen Artikel ----- Der Beginn dieser Serie (Tutorial für JavaScript Plug-in Development 1). Es erzählt hauptsächlich die Geschichte von "Wie man Plug-Ins in JQuery entwickelt",
Heute werden wir unsere Plug-in-Entwicklungsreise mit den gestrigen Fragen fortsetzen. Die vorherigen Fragen sind wie folgt:
(1) Wenn die Auswahl und den Austausch dieser Plug-Ins der Projekttechnologie auf den Mechanismus "JQuery" angewiesen ist, werden die Plug-Ins, die wir zuvor geschrieben haben, nicht verwendet (vorausgesetzt, dass JQuery nicht verwendet wird), wie Sie es neu umstellen können?
(2) Wie werden wir das organisieren, wie die wichtigsten Logik von Plug-Ins organisieren?
Okay, lernen wir den heutigen Artikel mit Fragen.
Zunächst leugne ich nicht die "Jquery-Plug-in" -Methode, und zweitens müssen wir das Problem aus verschiedenen Perspektiven analysieren, wie z. B. "Jquery Plug-In hat die folgenden Vorteile":
(1) Geben Sie den gesamten Code in die Schließung (eine sofortige Ausführungsfunktion) ein. 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.
(2) a) globale Abhängigkeiten vermeiden; b) Schäden von Drittanbietern vermeiden; c) kompatibel mit JQuery -Betreibern '$' und 'JQuery'.
Inwiefern werden wir den Code organisieren, was die objektorientierte Idee (OOP) ist? Oder sollten wir zur prozessbasierten Idee fortfahren? Oder ist es eine Kombination aus beiden? Hahaha, schau weiter. . . . . .
2. Rekonstruieren Sie das Beispiel von gestern
Das Folgende ist der Quellcode -Teil des gestrigen JS -Teils:
Die Codekopie lautet wie folgt:
(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);
Lassen Sie es uns Schritt für Schritt analysieren:
Bestimmen Sie zunächst die Funktionen dieses Plugins
(1) Zeigen Sie die von uns festgelegten Titeltextinformationen an.
(2) Dynamisch Inhaltsinformationen über asynchrone Mittel erhalten.
In Ordnung! Es ist einfach, es zu besprechen, wenn die Anforderungen klar sind. Aus dem obigen Code ist es nicht schwer zu erkennen, dass die Logik locker ist und das prozessbasierte Denken offensichtlich ist. Der erste Schritt besteht darin
Organisieren effektiv in klassener Weise. Schauen Sie sich den neu gestalteten Code wie folgt an:
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);
var bb = new Bigbear (Elem, Opts);
BB.GetElem (). Trigger ("Daten");
});
};
$ .fn.bigbear.defaults = {
Titel: "Dies ist ein einfacher Test",
URL: "Data.json"
};
}) (jQuery);
Funktion Bigbear (Elem, Opts) {
this.elem = elem;
this.opts = opts;
this.init ();
};
var bbProto = bigBear.Prototyp;
bbProto.getelem = function () {
kehre dieses. Elem zurück;
};
bbProto.getopts = function () {
kehre dies zurück.
};
bbProto.init = function () {
var das = dies;
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
$ .get (that.getopts () ["url"], function (result) {
that.getelem (). find ("div"). text (result ["text"]);
});
});
};
bbProto._settitle = function (text) {
this.getelem (). find ("span"). text (text);
};
Hahaha, gibt es viel mehr Code? Tatsächlich besteht diese Methode darin, das Problem aus einer objektorientierten Perspektive zu betrachten, zuerst die funktionalen Anforderungen zu analysieren und dann unsere Klasse zu entwerfen. Obwohl es uns unmöglich ist, es auf einmal sehr gut zu entwerfen.
Die Perspektive des Problems hat sich jedoch geändert, unser Code ist lesbarer geworden und wir können es besser beibehalten, damit unser Zweck erreicht werden kann.
Das Folgende ist der relevante Quellcode -Implementierungsabschnitt aus dem Abschnitt "Bootstrap" JS, wie unten gezeigt:
Es ist nicht schwer zu erkennen, dass es auch ähnliche Implementierungsmethoden gibt, die die Hauptlogik unseres Plug-Ins durch Klassen beibehalten.
(Iii), fügen Sie neue Funktionen hinzu und führen Sie zusätzliche Klassen ein
Jetzt hat die Nachfrage zugenommen, und es muss einige Änderungen der Erfahrung geben, und beim Laden von Daten gibt es einen "Belastungs" -Effekt.
Die Implementierungsidee kann wie folgt sein: Setzen Sie den Text auf das Wort "Ladedaten ..." im ursprünglichen Inhaltsbereich und stellen Sie dann wie folgt eine neue Klasse ein:
Die Codekopie lautet wie folgt:
Funktion Overlay () {
};
var olproto = Overlay.Prototyp;
olproto.show = function () {};
olproto.hide = function () {};
// Ich werde die spezifische Implementierung nicht aufschreiben
Okay, die Maskenebene ist bereits da, wie können wir sie jetzt integrieren? Wir greifen in einer Kombination wie folgt darauf zu:
Die Codekopie lautet wie folgt:
Funktion Bigbear (Elem, Opts) {
this.elem = elem;
this.opts = opts;
this.overlay = new Overlay ();
this.init ();
};
var bbProto = bigBear.Prototyp;
bbProto.getelem = function () {
kehre dieses. Elem zurück;
};
bbProto.getopts = function () {
kehre dies zurück.
};
bbProto.init = function () {
var das = dies;
var loadingText = "Datenladen ....";
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
that.overlay.show ();
that.getElem (). find ("div"). text (ladetExt);
$ .get (that.getopts () ["url"], function (result) {
that.overlay.hide ();
that.getelem (). find ("div"). text (result ["text"]);
});
});
};
bbProto._settitle = function (text) {
this.getelem (). find ("span"). text (text);
};
Dies ist nur für das Ende unserer Funktionen. Ich glaube, dass das auf diese Weise geschriebene Plug-In viel besser ist als die erste Version. Dies ist natürlich nicht die optimale Implementierung und muss ständig aus den Details neu gestaltet werden. Diese Methode ist jedoch eine optionale Möglichkeit, Plug-Ins zu entwickeln.
Hier ist der vollständige Code:
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);
var bb = new Bigbear (Elem, Opts);
BB.GetElem (). Trigger ("Daten");
});
};
$ .fn.bigbear.defaults = {
Titel: "Dies ist ein einfacher Test",
URL: "Data.json"
};
}) (jQuery);
Funktion Bigbear (Elem, Opts) {
this.elem = elem;
this.opts = opts;
this.overlay = new Overlay ();
this.init ();
};
var bbProto = bigBear.Prototyp;
bbProto.getelem = function () {
kehre dieses. Elem zurück;
};
bbProto.getopts = function () {
kehre dies zurück.
};
bbProto.init = function () {
var das = dies;
var loadingText = "Datenladen ....";
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
that.overlay.show ();
that.getElem (). find ("div"). text (ladetExt);
$ .get (that.getopts () ["url"], function (result) {
that.overlay.hide ();
that.getelem (). find ("div"). text (result ["text"]);
});
});
};
bbProto._settitle = function (text) {
this.getelem (). find ("span"). text (text);
};
Funktion Overlay () {
};
var olproto = Overlay.Prototyp;
olproto.show = function () {};
olproto.hide = function () {};
// Ich werde die spezifische Implementierung nicht aufschreiben
Dieser Artikel ist vorerst vorbei. Haben Sie ein neues Verständnis der Plug-in-Entwicklung von JavaScript?