Heim >
Web-Frontend >
js-Tutorial >
Tutorial zur Entwicklung von JavaScript-Plug-Ins (3)_Javascript-Kenntnisse
Tutorial zur Entwicklung von JavaScript-Plug-Ins (3)_Javascript-Kenntnisse
WBOY
Freigeben: 2016-05-16 16:17:48
Original
1124 Leute haben es durchsucht
1, Eröffnungsanalyse
In den beiden vorherigen Artikeln haben wir hauptsächlich darüber gesprochen, „wie man Plug-Ins mit jQuery entwickelt“ und wie man prozedurales Design mit objektorientiertem Design kombiniert
Beim Entwerfen eines Plug-Ins haben beide Methoden ihre eigenen Vor- und Nachteile. Diese Artikelserie ist lernorientiert. Sie können entscheiden, wie Sie es in bestimmten Szenarien verwenden. Ausgehend von diesem Artikel werden wir Sie heute anhand von Beispielen durch die Entwicklung Ihrer eigenen Plug-In-Bibliothek führen, von oberflächlich bis tief. Hey hey hey, hör auf, Unsinn zu reden und komm zum Punkt. Laden Sie die tatsächlichen Renderings direkt hoch:
Wie Sie sehen, handelt es sich um ein Tab-Plug-in, mit dem wir täglich in Berührung kommen können, wenn wir Single-Page-Anwendungen („SPA“) erstellen. Nehmen Sie das heutige Beispiel,
Wir bauen ein System auf, das aus mehreren Modulen besteht. Sie sind alle Komponenten des Systems. Durch dieses Plug-in können wir unsere Module effektiv verwalten
Die Erlebnisform und Benutzerinteraktivität von
werden im Folgenden detailliert analysiert.
(2), Beispielanalyse
(1), bestimmen Sie zunächst, was dieses Plug-in bewirkt. Werfen wir einen Blick auf den Aufruf des Plug-Ins und die Beschreibung der Konfigurationsparameter. Der folgende Code:
„bigbear.ui.createTab“ enthält zwei Parameter, der erste ist das Dom-Knotenobjekt und der zweite ist die Plug-in-Parameteroption „buttonText“, die die Textbeschreibung der Bedienschaltfläche im „Tab“-Plug darstellt -In.
„result“ ist ein Array, das die Eigenschaften des Tab-Elements enthält, einschließlich einer Textbeschreibung und der URL, die zum Senden von Anfragen beim Klicken auf das Tab-Element verwendet wird. „showClose“ gibt an, ob die Tab-Option eine Schaltfläche zum Schließen anzeigt.
„Status“ stellt den Status der Option dar, die standardmäßig offen ist und geschlossen sein kann: 1-offen, 0-geschlossen.
(2), welche Funktionen sind beteiligt
Generieren Sie relevante Optionseinträge dynamisch über optionale Parameter, wie im folgenden Beispiel gezeigt:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn