1. Öffnungsanalyse
Hallo, erinnerst du dich noch an den vorherigen Artikel? Es wird hauptsächlich angezeigt, wie ein "Registerkarten" -Gladin Code organisiert und implementiert und wie das Prozessdesign mit objektorientiertem Denkdesign kombiniert wird
Wie entwerfe ich ein Plug-In? Die beiden Methoden haben ihre eigenen Vor- und Nachteile, um aus den Stärken und Schwächen des anderen zu lernen. Diese Artikelserie ist lernorientiert und jeder entscheidet, wie die spezifischen Szenarien verwendet werden. Aus diesem Artikel konzentrieren wir uns immer noch auf diese "Registerkarteninstanz".
Erweitern Sie die damit verbundenen Funktionen fort. Hehehe, weniger Unsinn sagen, kommen Sie auf den Punkt. Direkt auf den tatsächlichen Renderings:
Sie haben es gesehen und eine neue Funktion wurde hinzugefügt. Wenn die Anzahl der Einträge unseres Modulkonfigurationsinformationselements bei der Initialisierung größer ist als wir angeben, wird sie in "Mehr Modulen" angezeigt.
In der versteckten Liste der Betriebselemente wurde auch unsere Initialisierungsparameterkonfiguration neu eingestellt, z.
Während der Initialisierung ist keine Konfiguration erforderlich. Dynamische Konfiguration wird im Programm generiert, was die Programmflexibilität erhöht. Lassen Sie es uns unten ausführlich analysieren.
(Ii) Fallanalyse
(1) Bestimmen Sie zunächst, was dieses Plugin tut. Schauen wir uns die Anrufmethode des Plug-Ins und die Beschreibung der Konfigurationsparameter an. Der folgende Code:
Die Codekopie lautet wie folgt:
{
ButtonText: "Modul hinzufügen",
Ergebnis: [
{
Text: "Assistentum",
URL: "help.html",
Showclose: "0"
},
{
Text: "Schülerinformationen",
URL: "info.html",
Showclose: "1"
},
{
Text: "Schülerklassifizierung",
URL: "category.html",
Showclose: "1"
},
{
Text: "Big Bear {{BB}}",
URL: "Bb.html",
Showclose: "1"
},
{
Text: "Beta -Testmodul",
URL: "test.html",
Showclose: "1"
},
{
Text: "Drei fette Männer",
URL: "help.html",
Showclose: "1"
},
{
Text: "Vier kahle Männer",
URL: "help.html",
Showclose: "1"
}
],
Anzeigemax: 5 // Maximale Anzeigeelemente
}
"Bigbear.ui.CreateTab" enthält zwei Parameter. Das erste ist das DOM-Knoten-Objekt und die zweite ist die Option Plug-in-Parameter. "ButtonText" repräsentiert die Textbeschreibung der Operationsschaltfläche im Plug-In "Tab".
"Ergebnis" ist ein Array, das die Eigenschaften des Registerkartenelements enthält, einschließlich der Textbeschreibung, die URL, mit der sie beim Klicken auf das Registerkartenelement angefordert werden.
"Status" wird auch während der Initialisierung entfernt und erfordert keine Konfiguration, und die Konfiguration wird im Programm dynamisch generiert. Es kann einen geschlossenen Zustand geben, der als: 1-Default-Anzeige, Status 0-Off und 2-als die Standardzahl der Einträge ausgedrückt wird.
(2) Funktionen werden in Schritten eingeführt
1 --- Initialisieren Sie das Plug-In durch optionale Parameter:
Die Codekopie lautet wie folgt:
$ (function () {
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: "Modul hinzufügen",
Ergebnis: [
{
Text: "Assistentum",
URL: "help.html",
Showclose: "0"
},
{
Text: "Schülerinformationen",
URL: "info.html",
Showclose: "1"
},
{
Text: "Schülerklassifizierung",
URL: "category.html",
Showclose: "1"
},
{
Text: "Big Bear {{BB}}",
URL: "Bb.html",
Showclose: "1"
},
{
Text: "Beta -Testmodul",
URL: "test.html",
Showclose: "1"
},
{
Text: "Drei fette Männer",
URL: "help.html",
Showclose: "1"
},
{
Text: "Vier kahle Männer",
URL: "help.html",
Showclose: "1"
}
],
Anzeigemax: 5 // Maximale Anzeigeelemente
});
});
2 ---, rendern und vollständige Zeitbindung und verwandte Geschäftslogik, wie z. B. Überprüfung der Anzahl der Einträge während der Initialisierung.
Die Codekopie lautet wie folgt:
tabProto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("Kein Modul noch!");
}
var das = dies;
this.getelem (). find ("title .adder")
.Text (" +" + this.getOpts () ["buttonText"])
.on ("klicken", function () {
that.getelem (). find (". Konsole-Panel"). Slidetoggle (function () {
that._renderconsolepanel ("0");
});
});
$ .each (this.getopts () ["result"], function (i, item) {
if (that._isdisplaymax (i + 1)) {
that._saveorUpDatestatus (Element, "1");
}
anders{
that._saveorUpDatestatus (Artikel, "2");
}
that._render (item);
});
if (! that._isdisplaymax (this.getopts () ["result"]. Länge)) {
this.getelem (). find (". title .more-mod"). fadein (function () {
$ (this) .find (". Tag"). On ("Click", function () {
var root = $ (this) .Next ();
Root.Empty ();
$ .each (that._getItemListbyStatus ("2"), Funktion (i, data) {
$ ("<div> </div>"). Text (Daten ["Text"])
.on ("klicken", function () {
if (that._getItemListBYSTATUS ("1"). Länge <that.getopts () ["displayMax"]) {
that.getelem (). find (". title .Items div"). EQ (Daten ["Index"]). Fadein (function () {
that._saveorUpdatestatus (Daten, "1");
});
}
anders{
ALERT ("Es können keine Module hinzugefügt werden, es ist derzeit die maximale Zahl!");
}
})
.Appendto (root);
});
Root.Toggle ();
});
});
}
this.getelem (). Find (". Titel .Items Div")
.eq (0)
.TRIGGER ("Click"); // Angenommen, es muss eins geben, sonst macht das Plug-In nicht viel Sinn!
};
3 ---, Registerkartenschalt- und Dateninhalts-Rendering-Vorgänge.
Die Codekopie lautet wie folgt:
tabProto._setCurrent = function (index) {
var items = this.getElem (). find ("title .Items div"). removeclass ("active");
items.eq (Index) .AddClass ("Active");
var contents = this.getelem (). find (". content .c"). hide ();
contents.eq (index) .show ();
};
Die Codekopie lautet wie folgt:
item.on ("klicken", function () {
that._setCurrent ($ (this) .Index ());
that._getContent (data ["url"]). Done (Funktion (Ergebnis) {
that._setContent (Ergebnis);
})
.Fail (function () {
Neuen Fehler werfen ("Netto -Fehler!");
});
})
Die Codekopie lautet wie folgt:
tabproto._setcontent = function (html) {
this.getelem (). find (". Inhalt"). HTML (HTML);
};
tabproto._getContent = function (url) {
zurücksenden $ .ajax ({{{{
URL: URL
});
};
4 --- Die Kern-Hilfsdaten-Betriebsmethode umfasst DOM nicht.
Die Codekopie lautet wie folgt:
/ * Update Time 2015 1/26 15:36 */
tabProto._isdisplaymax = function (Größe) {
var displayMax = this.getOpts () ["displayMax"] || 5;
return (Größe <= displayMax)? wahr: falsch;
};
tabProto._isemptyresult = function () {
if (! this.getopts () ["Ergebnis"]. Länge) {
false zurückgeben;
}
zurückkehren;
};
tabproto._saveorUpdatestatus = Funktion (Element, Status) {
Item ["Status"] = Status;
};
Tabproto._GetItemListBYSTATUS = Funktion (Status) {
var list = [];
var result = this.getOpts () ["result"];
$ .each (Ergebnis, Funktion (i, item) {
if (Status == item ["Status"]) {
list.push (item);
}
});
Rückgabeliste;
};
tabProto._getStatusByIndex = Funktion (index) {
var status = null;
var result = this.getOpts () ["result"];
$ .each (Ergebnis, Funktion (i, item) {
if (index == item ["index"]) {
Status = item ["Status"];
}
});
Rückgabestatus;
};
(Iii), vollständiger Code für Lernen , dieser Code wurde getestet, einschließlich Verzeichnisstruktur und zugehörigen Dateien.
1, html
Die Codekopie lautet wie folgt:
<body>
<div>
Big Bear {{BB}}-DXJ UI ------ Registerkarte "
</div>
<div>
<div id = "tab">
<div>
<div>
+ Fügen Sie Schülerinformationen hinzu
</div>
<div>
<!-<div> <span> x </span> willkommene Seite </div>
<Div> <span> x </span> Benutzerverwaltung </div>
<div> <span> x </span> bigBear </div>->
</div>
<div>
<Div> More Module </div>
<div>
</div>
</div>
</div>
<div>
</div>
<div>
<!-<div>
<Div> <span> Name: </span> <Eingabe type = "text"/> </div>
<div> <span> Hinweis: </span> <textarea> </textArea> </div>
</div> <div> <Eingabe type = "button" value = "speichern"/> </div>
->
</div>
</div>
</div>
</body>
2, CSS
Die Codekopie lautet wie folgt:
.dxj-ui-hd {
Polsterung: 0px;
Rand: 0 Auto;
Randtop: 30px;
Breite: 780px;
Höhe: 60px;
Zeilenhöhe: 60px;
Hintergrund: #3385ff;
Farbe: #ffff;
Schriftfamilie: "Microsoft Yahei";
Schriftgröße: 28px;
Text-Align: Mitte;
Schriftgewicht: fett;
}
.dxj-ui-bd {
Polsterung: 0px;
Rand: 0 Auto;
Breite: 778px;
Padding-Top: 30px;
Padding-Bottom: 30px;
Überlauf: versteckt;
Grenze: 1PX Solid #3385ff;
}
.dxj-ui-bd #tab {
Polsterung: 0px;
Rand: 0 Auto;
Breite: 720px;
Überlauf: versteckt;
Position: Relativ;
}
.dxj-ui-bd #tab .title {
Breite: 720px;
Überlauf: versteckt;
Grenzboden: 2PX Solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
Breite: 160px;
Höhe: 32px;
Zeilenhöhe: 32px;
Hintergrund: #DC143C;
Farbe: #ffff;
Schriftfamilie: "Microsoft Yahei";
Schriftgröße: 14px;
Text-Align: Mitte;
Schriftgewicht: fett;
float: links;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .title .more-mod {
Überlauf: versteckt;
Rand: 1PX Solid #DC143C;
Breite: 70px;
Position: absolut;
Rechts: 0;
Rand-Rechts: 6PX;
Anzeige: Keine;
}
.dxj-ui-bd #tab .title .more-mod .tag {
Höhe: 32px;
Zeilenhöhe: 32px;
Breite: 70px;
Hintergrund: #DC143C;
Farbe: #ffff;
Schriftfamilie: Arial;
Schriftgröße: 12px;
Text-Align: Mitte;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .title .more-mod .mods {
Überlauf: versteckt;
Breite: 70px;
Anzeige: Keine;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
Höhe: 24px;
Zeilenhöhe: 24px;
Breite: 62px;
Schriftfamilie: Arial;
Schriftgröße: 12px;
Cursor: Zeiger;
Padding-Links: 10px;
}
.dxj-ui-bd #tab .title .Items {
Höhe: 32px;
Breite: 480px;
Überlauf: versteckt;
float: links;
}
.dxj-ui-bd #tab .title .Items div {
Polsterung: 0px;
Rand-Links: 10px;
Breite: 84px;
Höhe: 32px;
Zeilenhöhe: 32px;
Hintergrund: #3385ff;
Farbe: #ffff;
Schriftfamilie: Arial;
Schriftgröße: 12px;
Text-Align: Mitte;
Position: Relativ;
float: links;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .title .Items div span.del {
Breite: 16px;
Höhe: 16px;
Zeilenhöhe: 16px;
Anzeige: Block;
Hintergrund: #DC143C;
Position: absolut;
Rechts: 0;
Top: 0;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .content {
Breite: 716px;
Padding-Top: 30px;
Überlauf: versteckt;
Grenze: 2PX Solid #3385ff;
Border-Top: 0px;
min-hohe: 130px;
Text-Align: Mitte;
}
.dxj-ui-bd #tab .Content Table {
Rand: 0 Auto;
}
.dxj-ui-bd #tab .Content div.c {
Padding-Top: 20px;
Padding-Links: 20px;
Hintergrund: #eee;
Höhe: 140px;
}
.dxj-ui-bd #tab .Content div.c.Input-content {
Rand: 10px;
Schriftfamilie: Arial;
Schriftgröße: 12px;
}
.dxj-ui-bd #tab .console-panel {
Breite: 716px;
Padding-Top: 20px;
Padding-Bottom: 20px;
Überlauf: versteckt;
Grenze: 2PX Solid #3385ff;
Border-Top: 0px;
Grenzboden: 2PX Solid #3385ff;
Hintergrund: #fff;
Anzeige: Keine;
}
.Active {
Schriftgewicht: fett;
}
3, Bigbear.js
Die Codekopie lautet wie folgt:
(Funktion ($) {
var win = Fenster;
var bb = win.bigbear = win.bigbear || {
ui: {}
};
var ui = bb.ui = {};
var Tab = Funktion (Elem, Opts) {
this.elem = elem;
this.opts = opts;
};
var tabProto = tab.Prototype;
/ * Update Time 2015 1/26 15:36 */
tabProto._isdisplaymax = function (Größe) {
var displayMax = this.getOpts () ["displayMax"] || 5;
return (Größe <= displayMax)? wahr: falsch;
};
tabProto._isemptyresult = function () {
if (! this.getopts () ["Ergebnis"]. Länge) {
false zurückgeben;
}
zurückkehren;
};
tabproto._saveorUpdatestatus = Funktion (Element, Status) {
Item ["Status"] = Status;
};
Tabproto._GetItemListBYSTATUS = Funktion (Status) {
var list = [];
var result = this.getOpts () ["result"];
$ .each (Ergebnis, Funktion (i, item) {
if (Status == item ["Status"]) {
list.push (item);
}
});
Rückgabeliste;
};
tabProto._getStatusByIndex = Funktion (index) {
var status = null;
var result = this.getOpts () ["result"];
$ .each (Ergebnis, Funktion (i, item) {
if (index == item ["index"]) {
Status = item ["Status"];
}
});
Rückgabestatus;
};
tabProto._renderconsolepanel = function (Status) {
var das = dies;
var root = that.getElem (). find (". Konsole-Panel");
this._resetconsolepanel ();
$ .each (that._getItemListBYSTATUS (Status), Funktion (i, item) {
var elem = $ ("<div style = 'float: links';> </div>"). appendTo (root);
$ ("<Eingabe type = 'Radio' name = 'addMod' />")
.Data ("Artikel", Artikel)
.Appendto (Elem);
$ ("<span> </span>"). text (item ["text"]). appendTo (elem);
});
if (root.find ("div"). size ()) {
$ ("<Eingabe type = 'button' value = 'modul hinzufügen' style = 'margin-links: 20px'/>")
.on ("klicken", function () {
var data = root.find ("input [type = radio]: geprüft"). Daten ("item");
if (that._getItemListBYSTATUS ("1"). Länge <that.getopts () ["displayMax"]) {
that.getelem (). find (". title .Items div"). EQ (Daten ["Index"]). Fadein (function () {
that._saveorUpdatestatus (Daten, "1");
})
.TRIGGER ("Click");
}
anders{
that._saveorUpdatestatus (Daten, "2");
}
that.getElem (). find (". title .adder"). Trigger ("klicken");
})
.Appendto (root);
}
anders{
root.text ("Noch keine Elemente hinzuzufügen!");
}
};
/ * Update Time 2015 1/26 15:36 */
tabProto._setCurrent = function (index) {
var items = this.getElem (). find ("title .Items div"). removeclass ("active");
items.eq (Index) .AddClass ("Active");
var contents = this.getelem (). find (". content .c"). hide ();
contents.eq (index) .show ();
};
tabProto.getelem = function () {
kehre dieses. Elem zurück;
};
tabProto.getopts = function () {
kehre dies zurück.
};
tabProto._resetContent = function () {
this.getelem (). find (". Inhalt"). html ("");
};
tabproto._setcontent = function (html) {
this.getelem (). find (". Inhalt"). HTML (HTML);
};
tabproto._getContent = function (url) {
zurücksenden $ .ajax ({{{{
URL: URL
});
};
tabProto._deleteItem = function (elem) {
var das = dies;
this.getelem (). Find (". Titel .Items Div")
.eq (elem.index ())
.Fadeout (function () {
that._resetContent ();
that._saveorUpdatestatus (Elem.data ("item"), "0");
that._triggerItem (elem.index () + 1);
});
};
tabproto._triggerItem = function (next) {
var NextStatus = this._getStatusByIndex (next);
var items = this.getelem (). find (". title .Items div");
next = items.eq (Weiter);
if (next.size () && "1" == NextStatus) {// Der nachfolgende Dom -Knoten existiert
als nächstes.trigger ("klicken");
}
anders{
items.eq (0) .trigger ("click");
}
};
tabproto._resetconsolepanel = function () {
this.getelem (). find (". Konsole-Panel"). leer ();
};
tabProto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("Kein Modul noch!");
}
var das = dies;
this.getelem (). find ("title .adder")
.Text (" +" + this.getOpts () ["buttonText"])
.on ("klicken", function () {
that.getelem (). find (". Konsole-Panel"). Slidetoggle (function () {
that._renderconsolepanel ("0");
});
});
$ .each (this.getopts () ["result"], function (i, item) {
if (that._isdisplaymax (i + 1)) {
that._saveorUpDatestatus (Element, "1");
}
anders{
that._saveorUpDatestatus (Artikel, "2");
}
that._render (item);
});
if (! that._isdisplaymax (this.getopts () ["result"]. Länge)) {
this.getelem (). find (". title .more-mod"). fadein (function () {
$ (this) .find (". Tag"). On ("Click", function () {
var root = $ (this) .Next ();
Root.Empty ();
$ .each (that._getItemListbyStatus ("2"), Funktion (i, data) {
$ ("<div> </div>"). Text (Daten ["Text"])
.on ("klicken", function () {
if (that._getItemListBYSTATUS ("1"). Länge <that.getopts () ["displayMax"]) {
that.getelem (). find (". title .Items div"). EQ (Daten ["Index"]). Fadein (function () {
that._saveorUpdatestatus (Daten, "1");
});
}
anders{
ALERT ("Es können keine Module hinzugefügt werden, es ist derzeit die maximale Zahl!");
}
})
.Appendto (root);
});
Root.Toggle ();
});
});
}
this.getelem (). Find (". Titel .Items Div")
.eq (0)
.TRIGGER ("Click"); // Angenommen, es muss eins geben, sonst macht das Plug-In nicht viel Sinn!
};
tabProto._render = Funktion (Daten) {
var das = dies;
var item = $ ("<div> </div>"). text (Data ["text"]). appendTo (this.getelem (). find (". title .Items"));
Daten ["index"] = item.index ();
item.on ("klicken", function () {
that._setCurrent ($ (this) .Index ());
that._getContent (data ["url"]). Done (Funktion (Ergebnis) {
that._setContent (Ergebnis);
})
.Fail (function () {
Neuen Fehler werfen ("Netto -Fehler!");
});
})
.data ("item", data);
if ("2" == Data ["Status"]) {
item.hide ();
}
if ("1" == data ["showClose"]) {
$ ("<span class = 'del'> x </span>")
.on ("klicken", function () {
if (win.confirm ("Wird dieser Artikel gelöscht?")) {
that._deleteItem (item);
false zurückgeben; // Blasen stoppen
}
})
.Appendto (Artikel);
}
};
ui.createtab = function (elem, opts) {
var Tab = neue Registerkarte (Elem, Opts);
tab.init ();
Registerkarte zurück;
};
}) (jQuery);
(Iv), endgültige Zusammenfassung
(1) Eine vernünftige Analyse der funktionalen Anforderungen in einer objektorientierten Denkweise.
(2) organisieren Sie unsere Plug-in-Logik auf eine klassenweise Weise.
(3) rekonstruieren Sie die obigen Beispiele kontinuierlich, wie Sie das vernünftigerweise rekonstruieren können? Nicht überherzig, seien Sie wohl. Die empfohlene Methode besteht darin, das Prozessdesign mit objektorientiertem Denkdesign zu kombinieren.