In der letzten Ausgabe haben wir das Design der Warteschlangenverwaltungskomponente besprochen und ihr einen lauten und eindeutigen Namen gegeben: Smart Queue. Dieses Mal werden wir die vorherigen Designergebnisse in die Praxis umsetzen und mit Code implementieren.
Zuerst müssen wir das Layout der Quelldatei berücksichtigen, d. h. entscheiden, wie der Code in unabhängige Dateien aufgeteilt wird. Warum das tun? Erinnern Sie sich, dass ich am Ende der letzten Ausgabe erwähnt habe, dass diese Komponente „externen Code“ verwenden wird? Um den Zweck des Codes zu unterscheiden, wurde beschlossen, den Code in mindestens zwei Teile zu unterteilen: die externe Codedatei und die Smart Queue-Datei.
Die Unterscheidung von Zwecken ist nur einer, und zweitens ist die Aufteilung in unabhängige Dateien für die Codepflege von Vorteil. Stellen Sie sich vor, dass Sie eines Tages in der Zukunft beschließen, den bestehenden Grundfunktionen der Warteschlangenverwaltung einige neue erweiterte Funktionen hinzuzufügen oder sie in eine Komponente zu packen, die eine bestimmte Aufgabe implementiert, Sie möchten jedoch die vorhandenen Funktionen (interne Implementierung) und Aufrufe beibehalten Wenn die Methode (externe Schnittstelle) unverändert bleibt, ist es am besten, den neuen Code in eine separate Datei zu schreiben.
Nun, das nächste Mal werden wir uns auf das Thema Dateilayout konzentrieren, kommen wir nun zur Sache. Der erste Schritt besteht natürlich darin, einen eigenen Namensraum für die Komponente zu erstellen. Der gesamte Code der Komponente wird auf diesen Namensraum der obersten Ebene beschränkt:
var SmartQueue = window.SmartQueue || {};
SmartQueue.version = '0.1';
Wenn Sie während der Initialisierung auf einen Namespace-Konflikt stoßen, ziehen Sie ihn herunter und verwenden Sie ihn. Normalerweise wird dieser Konflikt durch wiederholte Verweise auf Komponentencode verursacht. Im schlimmsten Fall wird das Objekt mit derselben Implementierung neu geschrieben, wenn sich auf der Seite zufällig ein anderes Objekt mit dem Namen SmartQueue befindet. Das wäre peinlich Überschreiben Sie Ihre Implementierung. Wenn es keine weiteren Namenskonflikte gibt, können die beiden Komponenten grundsätzlich ohne Zwischenfälle ausgeführt werden. Geben Sie ihm auch eine Versionsnummer.
Als nächstes erstellen Sie drei Warteschlangen für SmartQueue entsprechend drei Prioritäten:
var Q = SmartQueue.Queue = [[], [], []];
Jedes ist ein leeres Array, da noch keine Aufgaben hinzugefügt wurden. Und erstellen Sie übrigens eine „Verknüpfung“ dafür. Wenn Sie später auf das Array zugreifen möchten, schreiben Sie einfach Q[n].
Als nächstes hat unser Protagonist Task einen großen Auftritt – wie man einen neuen Task erstellt, wird hier definiert:
Ich werde nicht auf die spezifischen Details im Inneren eingehen. Mit den notwendigen Kommentaren kann unser Code im Allgemeinen selbstbeschreibend sein, und das Gleiche gilt für nachfolgende Codes. Hier sagen wir dem Kunden (Benutzer): Wenn Sie eine neue SmartQueue.Task-Instanz erstellen möchten, müssen Sie mindestens einen Parameter an diesen Konstruktor übergeben (die letzten drei können für die Standardverarbeitung weggelassen werden), andernfalls wird eine Ausnahme ausgelöst.
Dies reicht jedoch nicht aus. Manchmal möchten Kunden eine neue Instanz einer vorhandenen Aufgabe klonen oder einen „gesunden Körper“ (eine echte Aufgabenobjektinstanz) aus einem „deaktivierten Körper“ (einem Objekt mit einigen Aufgabenattributen) reparieren Die obige Bauweise ist etwas umständlich – der Kunde muss so schreiben:
var task1 = new SmartQueue.Task(obj.fn, 1, '', obj.dependencies);
Quelle: Alipay UED
var T = SmartQueue.Task = function(fn, level, name, dependencies) {
if(typeof fn !== FUNCTION) {
throw new Error('Ungültiger Argumenttyp: fn.');
}
this.fn = fn;
this.level = _validateLevel(level) ? level : LEVEL_NORMAL;
// Art des Namens erkennen
this.name = typeof name === STRING && name ? name : 't' + _id++;
// Abhängigkeiten könnten als „Objekt“ abgerufen werden, also verwenden Sie stattdessen „instanceof“.
this.dependencies = dependencies exampleof Array ? dependencies : [];
};