1. Öffnungsanalyse
Was sagen wir heute in diesem Artikel? Hehehehe. Anschließend haben wir die Mängel im vorherigen Artikel rekonstruiert und sie Schritt für Schritt auf leicht verständliche Weise analysiert, damit jeder Schritt für Schritt verbessern kann. Weniger Unsinn, auf den Punkt kommen. Lassen Sie uns zunächst den vorherigen überprüfen
Der JS -Teilcode lautet wie folgt:
Die Codekopie lautet wie folgt:
Funktionselementen (Elem, Opts) {
this.elem = elem;
this.opts = opts;
};
var isProto = itemSelector.Prototyp;
IsProto.getelem = function () {
kehre dieses. Elem zurück;
};
IsProto.getopts = function () {
kehre dies zurück.
};
/* Datenmanip*/
IsProto._setCurrent = Funktion (aktuell) {
this.getOpts () ["Strom"] = Strom;
};
IsProto.getCurrentValue = function (aktuell) {
return this.getopts () ["aktuell"];
};
/* Datenmanip*/
IsProto.init = function () {
var das = dies;
this.getOpts () ["current"] = null; // Datencursor
this._setItemValue (this.getopts () ["currentText"]);
var itemselem = that.getelem (). find (". Inhalt .Items");
this.getelem (). find (". title div"). on ("click", function () {
itemselem.toggle ();
});
this.getelem (). find (". Titelspan"). On ("Click", function () {
itemselem.toggle ();
});
$ .each (this.getopts () ["items"], function (i, item) {
item ["id"] = (neues Datum (). GetTime ()). toString ();
that._render (item);
});
};
IsProto._setItemValue = function (value) {
this.getelem (). find (". title div"). text (Wert)
};
IsProto._render = function (item) {
var das = dies;
var itemelem = $ ("<div> </div>")
.Text (Element ["Text"])
.Attr ("id", item ["id"]);
if ("0" == item ["deaktiviert"]) {
itemelem.on ("klicken", function () {
var onchange = that.getOpts () ["Change"];
that.getelem (). find (". Inhalt .Items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.Mouseover (function () {
$ (this) .AddClass ("Item-Hover");
})
.Mouseout (function () {
$ (this) .removeclass ("item-hover");
});
}
anders{
itemelem.css ("color", "#ccc"). on ("click", function () {
that.getelem (). find (". Inhalt .Items"). hide ();
that._setItemValue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". Inhalt .Items")));
};
Der Effekt ist in der folgenden Abbildung dargestellt:
A) -------- Nicht-operierbarer Zustand
b) ------ Betriebszustand
(Ii) Öffnen Sie Ihre Ideen und rekonstruieren Sie sie
Es ist nicht schwer für Sie aus dem Code zu erkennen, dass er durch die Syntaxeigenschaften in "JS" effektiv organisiert wurde, was viel besser ist als die lose prozessbasierte Organisationsmethode, aber Sie werden immer noch viele Mängel finden.
(1) Es gibt zu viele Wiederholungen darin
(2) Die Aufteilung der Verantwortlichkeiten ist unklar
(3) Der Prozess ist nicht vollständig
Wir haben basierend auf den oben genannten Punkten effektiv nachgearbeitet. Zunächst müssen wir die Anforderungen dieser Komponente erkennen, und die Funktionspunkte sind wie folgt:
(1) Initialisieren Sie die Konfigurationskomponente
Die Codekopie lautet wie folgt:
$ (function () {
var itemSelector = new itemSelector ($ ("#item-selector"), {
aktuellText: "Bitte wählen Sie Element",
Artikel: [
{
Text: "JavaScript",
Wert: "JS",
Behindert: "1"
},
{
Text: "CSS",
Wert: "CSS",
Behindert: "0"
},
{
Text: "html",
Wert: "html",
Behindert: "0"
}
],
});
itemSelector.init ();
});
Dieser Code ist sehr klar und erfordert keine Änderungen. Sie können jedoch die Funktionen basierend auf der obigen Konfiguration erweitern, z. B. das Hinzufügen des Konfigurationselements "Modus", um mehrere Optionen zu unterstützen. Beispiel: "Checkbox Check -Modus".
Als nächstes soll die Initialisierungslogik wie folgt vervollständigen:
Die Codekopie lautet wie folgt:
IsProto.init = function () {
var das = dies;
this.getOpts () ["current"] = null; // Datencursor
this._setItemValue (this.getopts () ["currentText"]);
var itemselem = that.getelem (). find (". Inhalt .Items");
this.getelem (). find (". title div"). on ("click", function () {
itemselem.toggle ();
});
this.getelem (). find (". Titelspan"). On ("Click", function () {
itemselem.toggle ();
});
$ .each (this.getopts () ["items"], function (i, item) {
item ["id"] = (neues Datum (). GetTime ()). toString ();
that._render (item);
});
};
Dieser Code hat viele Probleme, unklare Verantwortlichkeiten und die Initialisierungslogik enthält detaillierte Implementierungen von Funktionspunkten.
Sehen Sie weiterhin den Rendering -Code:
Die Codekopie lautet wie folgt:
IsProto._render = function (item) {
var das = dies;
var itemelem = $ ("<div> </div>")
.Text (Element ["Text"])
.Attr ("id", item ["id"]);
if ("0" == item ["deaktiviert"]) {
itemelem.on ("klicken", function () {
var onchange = that.getOpts () ["Change"];
that.getelem (). find (". Inhalt .Items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.Mouseover (function () {
$ (this) .AddClass ("Item-Hover");
})
.Mouseout (function () {
$ (this) .removeclass ("item-hover");
});
}
anders{
itemelem.css ("color", "#ccc"). on ("click", function () {
that.getelem (). find (". Inhalt .Items"). hide ();
that._setItemValue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". Inhalt .Items")));
};
Das Problem ist offensichtlich. Es wurden wiederholbare Operationen gefunden, und es sollte eine angemessene Abstraktion durchgeführt werden, und der Zweck der Wiederverwendung wurde erreicht.
Der gesamte Bauprozess umfasst Initialisierung, Rendering (Ereignisbindung) sowie verwandte Datenbetriebsmethoden und Hilfsmethoden des DOM -Operationen.
Zusammenfassend sollten wir nach einer einfachen Sortierung den Betriebszweck der Funktion und die Aufgabenzuordnung der Hauptlinie des Prozesses festlegen, von denen jede für seine eigenen Verantwortlichkeiten verantwortlich ist.
Der Zweck unserer Rekonstruktion ist also sehr klar, richtig! Es geht um abstrakte Funktionspunkte und die Aufteilung der Verantwortung mit einer freundschaftlichen Abteilung. Wie erreichen wir das?
Der erste Schritt besteht darin, Prozessfunktionen festzulegen: (Methodenschnittstelle)
Die Codekopie lautet wie folgt:
IsProto.init = function () {
// Setzen Sie Sie hier Code ein!
};
IsProto._render = function () {
// Setzen Sie Sie hier Code ein!
};
Teil 2: Stellen Sie eine abstrakte Methodenschnittstelle fest:
Die Codekopie lautet wie folgt:
IsProto._fnitemSelektordelegateHandler = function () {
// Setzen Sie Sie hier Code ein!
};
IsProto._fntriggerHandler = function () {
// Setzen Sie Sie hier Code ein!
};
IsProto._addorremoveclass = function () {
// Setzen Sie Sie hier Code ein!
};
Der dritte Schritt besteht darin, eine Datenbetriebschnittstelle festzulegen:
Die Codekopie lautet wie folgt:
IsProto._setCurrent = function () {
// Setzen Sie Sie hier Code ein!
};
IsProto._getCurrent = function () {
// Setzen Sie Sie hier Code ein!
};
Es gibt auch einige Verweise auf den vollständigen Quellcode unten, der genau die hier erwähnte Idee ist.
(Iii), der vollständige Code ist für das Lernen, dieser Code wurde getestet
Die Codekopie lautet wie folgt:
Funktionselementen (Elem, Opts) {
this.elem = elem;
this.opts = opts;
this.current = -1; // Datencursor
};
var isProto = itemSelector.Prototyp;
/* Getter api*/
IsProto.getelem = function () {
kehre dieses. Elem zurück;
};
IsProto.getopts = function () {
kehre dies zurück.
};
IsProto._getCurrent = function () {
kehre dies zurück.
};
/* Getter api*/
/* Datenmanip*/
IsProto._setCurrent = Funktion (aktuell) {
this.current = current;
};
IsProto._setItemtext = function (text) {
this.getelem (). find (". title div"). text (text);
};
/* Datenmanip*/
/ * Update zu 2015 1/31 23:38 */
IsProto._fntriggerHandler = Funktion (Index, Text, Wert) {
if (this._isdisabled (value)) {
Index = -1;
text = this.getOpts () ["currentText"];
}
this._setItemtext (Text);
this._setCurrent (Index);
this.getelem (). find (". Inhalt .Items"). hide ();
};
IsProto._addorremoveclass = function (elem, className, addis) {
if (addis) {
Elem.AddClass (Klassenname);
}
anders{
Elem.removeclass (ClassName);
}
};
IsProto._fnitemSelektordelegateHandler = function () {
var das = dies;
this.getelem (). on ("klicken", "[data-toggle]", function () {
that.getelem (). find (". Inhalt .Items"). Toggle ();
});
};
IsProto._isdisabled = function (value) {
return ("1" == Wert)? wahr: falsch;
};
/ * Update zu 2015 1/31 23:38 */
IsProto.init = function () {
var das = dies;
this._fnitemSelektordelegateHandler ();
$ .each (this.getopts () ["items"], function (i, item) {
item ["index"] = i;
that._render (item);
});
this._fntriggerHandler (this._getCurrent (), this.getopts () ["currentText"], "1");
};
IsProto._render = function (item) {
var das = dies;
var itemelem = $ ("<div> </div>"). text (item ["text"]). attr ("id", itel ["index"]);
var activeclass = ("0" == item ["deaktiviert"])? "Item-Hover": "Item-Behinderte-Hover";
itemelem.on ("klicken", function () {
that._fntriggerHandler (item ["index"], item ["text"], item ["deaktiviert"]);
})
.Mouseover (function () {
that._addorremoveclass ($ (this), activeClass, true);
})
.Mouseout (function () {
that._addorremoveclass ($ (this), activeClass, false);
});
itemelem.appendto (this.getelem (). find (". Inhalt .Items")));
};
(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.
(4) Der folgende Artikel erweitert die damit verbundenen Funktionen wie den Eigenschaftsmodus. Wenn es sich um "1" handelt, unterstützt es den Checkbox Multi-Select-Modus, aber jetzt ist es nur der Standard-Dropdown-Modus.
Ist es viel besser als der vorherige Code? Freunde sollten über sich selbst nachdenken und mehr Projekte durchführen und versuchen, ihren eigenen Code vernünftiger zu machen.