Der Xiangyuan -Modus unterscheidet sich vom allgemeinen Entwurfsmodus. Es wird hauptsächlich verwendet, um die Leistung des Programms zu optimieren. Es ist am besten, die Leistungsprobleme zu lösen, die durch eine große Anzahl ähnlicher Objekte verursacht werden. Das Enzyklopädiemuster reduziert die Anzahl der Objekte und verbessert somit die Leistung der Anwendung, indem die Objekte der Anwendung analysiert und in intrinsische und externe Daten analysiert werden.
Grundwissen
Der Enzyklopädie-Modus reduziert die Anzahl der Objekte, indem eine große Anzahl feinkörniger Objekte geteilt wird, wodurch der Speicher von Objekten reduziert und die Leistung von Anwendungen verbessert wird. Die Grundidee besteht darin, die Zusammensetzung vorhandener ähnlicher Objekte zu zerlegen und sie in gemeinsam genutzte interne Daten und nicht-stammende externe Daten zu erweitern. Wir nennen das Objekt der internen Daten ein Meta -Objekt. Normalerweise wird auch eine Fabrikklasse benötigt, um intrinsische Daten aufrechtzuerhalten.
In JS besteht der Enzyklopädie -Modus hauptsächlich aus den folgenden Zeichen:
(1) Kunde: Eine Klasse, mit der die Xiangyuan -Fabrik aufgerufen wird, um intrinsische Daten zu erhalten, normalerweise das von der Anwendung erforderliche Objekt.
(2) Xiangyuan -Fabrik: Klasse, die zur Aufrechterhaltung von Xiangyuan -Daten verwendet wird
(3) Genießen Sie die Yuan -Klasse: eine Klasse, die interne Daten pflegt
Implementierung und Anwendung des Xiangyuan -Modus
Allgemeine Umsetzung
Lassen Sie uns ein Beispiel geben, um zu veranschaulichen: Apfelmassenproduzent iPhones. Die meisten Daten wie Modelle und Bildschirme sind gleich, und einige Teile der Daten wie Speicher werden in 16G, 32G usw. unterteilt, bevor wir den Enzyklopedia -Modus verwenden, schreiben wir den Code wie folgt:
Funktion iPhone (Modell, Bildschirm, Speicher, sn) {this. Modell = Modell; this.screen = Bildschirm; this.memory = memory; this.sn = sn;} var fone = []; für (var i = 0; i <1000000; i ++) {var memory = i % 2 == 0? 16: 32; Telefone.push (neues iPhone ("iPhone6s", 5.0, Speicher, i));}In diesem Code werden eine Million iPhones erstellt, und jedes iPhone gilt unabhängig von einem Speicher. Aber wenn wir genau hinschauen, können wir sehen, dass die meisten iPhones ähnlich sind, außer dass die Speicher und die Seriennummern unterschiedlich sind. Wenn es sich um ein Programm mit hohen Leistungsanforderungen handelt, müssen wir in Betracht ziehen, es zu optimieren.
Für eine große Anzahl von Programmen mit ähnlichen Objekten können wir den Xiangyuan -Modus verwenden, um ihn zu optimieren. Wir analysieren, dass die meisten iPhone -Modelle, Bildschirme und Speicher gleich sind, sodass dieser Teil der Daten für öffentliche Zwecke verwendet werden kann, was die internen Daten im Xiangyuan -Modus sind. Die Definition der Xiangyuan -Klasse lautet wie folgt:
Funktion iPhoneflygewicht (Modell, Bildschirm, Speicher) {this.model = Modell; this.screen = Bildschirm; this.memory = memory;}Wir definieren die Genussklasse des iPhone, die drei Daten enthält: Modell, Bildschirm und Speicher. Wir brauchen auch eine Xiangyuan -Fabrik, um diese Daten aufrechtzuerhalten:
var flygewichtfactory = (function () {var iPhones = {}; return {get: function (Modell, Bildschirm, Speicher) {var key = Modell + Bildschirm + Speicher; if (! iPhones [key]) {iPhones [key] = new iPhoneFlyweight (Modell, Bildschirm, Speicher);} return iPhones [key];}}}}}}}}}}});In dieser Fabrik definieren wir ein Wörterbuch, um das Opferobjekt zu retten, eine Methode zu geben, um das Opferobjekt gemäß den Parametern zu erhalten, und wenn es ein Opfer gibt, wird es direkt zurückgegeben, und wenn es kein Opfer gibt, wird es geschaffen.
Als nächstes erstellen wir eine Client -Klasse, die aus der iPhone -Klasse geändert wird:
Funktion iPhone (Modell, Bildschirm, Speicher, sn) {this.flyweight = flyweightFactory.get (Modell, Bildschirm, Speicher); this.sn = sn;}Dann erzeugen wir immer noch mehrere iPhones wie dazwischen
var Tel. 16: 32; Telefone.push (neues iPhone ("iPhone6s", 5.0, Speicher, i));} console.log (Telefone);Der Schlüssel hier ist dies.flyweight = flyweightFactory.get (Modell, Bildschirm, Speicher) im iPhone -Konstruktor. Dieser Code erhält Xiangyuan -Daten über die Xiangyuan -Fabrik. In der Xiangyuan -Fabrik wird das Objekt direkt zurückgegeben, wenn ein Objekt mit denselben Daten vorhanden ist. Mehrere iPhone -Objekte teilen diesen Teil derselben Daten, sodass die ursprünglichen ähnlichen Daten stark reduziert wurden, was die Speicherverwendung verringert.
Anwendung von genießen Sie den Yuan -Modus in DOM
Eine typische Anwendung des Xiangyuan -Modus ist der DOM -Ereignisbetrieb, und der DOM -Ereignismechanismus wird in Ereignisblasen und Ereigniserfassung unterteilt. Lassen Sie uns diese beiden kurz vorstellen:
Ereignisblase: Das gebundene Ereignis beginnt vom innersten Element und sprudelt dann zur äußersten Schicht
Ereigniserfassung: Das gebundene Ereignis beginnt vom äußersten Element und übergeht dann an die innerste Ebene.
Angenommen, wir haben eine Menüliste in HTML
<ul> <li> Option 1 </li> <li> Option 2 </li> <li> Option 3 </li> <li> Option 4 </li> <li> Option 5 </li> <li> Option 6 </li> </ul>
Klicken Sie auf das Menüelement, um die entsprechende Operation durchzuführen. Wir binden Ereignisse durch JQuery, was normalerweise der Fall ist:
$ (". item"). on ("click", function () {console.log ($ (this) .Text ());})Binden Sie Ereignisse für jedes Listenelement und klicken Sie, um den entsprechenden Text auszugeben. Zu diesem Zeitpunkt gibt es kein Problem, aber wenn es sich um eine sehr lange Liste handelt, insbesondere wenn es sich um ein Mobiltelefon mit einer besonders langen Liste handelt, gibt es Leistungsprobleme, da jedes Element an Ereignisse gebunden ist und Speicher aufnimmt. Aber diese Event -Handler sind eigentlich sehr ähnlich, daher müssen wir sie optimieren.
$ (". Menü"). On ("Click", ".Item", function () {console.log ($ (this) .Text ());})Auf diese Weise kann die Anzahl der Ereignishandler reduziert werden. Diese Methode wird als Ereignisdelegation bezeichnet, die auch das Prinzip des Xiangyuan -Modells verwendet. Der Event -Handler ist ein allgemeiner interner Teil, und der Text jedes Menüelements ist ein externer Teil. Lassen Sie uns kurz über das Prinzip der Ereignisdelegation sprechen: Klicken Sie auf den Menüelement, und das Ereignis sprudelt vom Li -Element zum UL -Element. Wenn wir das Ereignis an UL binden, binden wir tatsächlich ein Ereignis und verwenden dann das Ziel im Ereignisparameterereignis, um zu bestimmen, welches Element das Klick ist. Zum Beispiel ist das erste Li -Element auf der niedrigen Ebene, Ereignis. Target ist li. Auf diese Weise können wir das spezifische Klickelement erhalten und nach verschiedenen Elementen unterschiedlich verarbeiten.
Zusammenfassen
Der Encyclopedia -Modus ist ein Mittel, um die Programmleistung zu optimieren und die Anzahl der Objekte zu reduzieren, indem öffentliche Daten geteilt werden, um Optimierungsprogramme zu erreichen. Der Enzyklopädie -Modus eignet sich für Szenarien, in denen eine große Anzahl ähnlicher Objekte und Leistungsanforderungen vorhanden ist. Da der Xiangyuan -Modus interne und externe Daten trennen muss, erhöht er die logische Komplexität des Programms. Es wird empfohlen, den Xiangyuan -Modus nur zu verwenden, wenn die Leistungsanforderungen vorliegen.
Die Vorteile des Yuan -Modells genießen:
Die Ressourcenkonformität von Webseiten kann durch Größenordnungen reduziert werden. Auch wenn die Anwendung des Xiangyuan -Modus die Anzahl der Instanzen auf einen nicht reduzieren kann, können Sie dennoch viel davon davon profitieren.
Dieser Speichern erfordert nicht viel Änderung des ursprünglichen Code. Nach der Erstellung des Managers, der Fabrik und des Xiangyuan sind die Änderungen des Code nichts anderes als die Umstellung der Zielklasse zum Aufrufen einer Methode des Manager -Objekts.
Nachteile des Yuan -Modus: genießen Sie den Yuan -Modus:
Wenn es an unnötigen Stellen verwendet wird, schädigt das Ergebnis tatsächlich die laufende Effizienz des Codes. Dieses Muster optimiert den Code und erhöht gleichzeitig seine Komplexität, was zu Schwierigkeiten beim Debuggen und Wartung führen kann.
Es behindert das Debuggen, weil es jetzt drei mögliche Fehler gibt: Manager, Fabrik und Xiangyuan.
Diese Optimierung kann auch die Wartung erschweren. Jetzt stehen Sie nicht vor einer klaren Architektur, die sich aus Objekten zusammensetzt, sondern eine Reihe von unordentlichen Dingen. Die darin enthaltenen Daten werden an mindestens zwei Stellen gespeichert. Es ist am besten, die internen Daten und die externen Daten zu kommentieren.
Diese Optimierung sollte nur bei Bedarf durchgeführt werden. Es muss ein Kompromiss zwischen operativer Effizienz und Wartbarkeit durchgeführt werden. Wenn Sie nicht sicher sind, ob Sie den Enzyklopädie -Modus verwenden müssen, benötigen Sie ihn höchstwahrscheinlich nicht. Der Xiangyuan -Modus eignet sich für Anlässe, wie beispielsweise Systemressourcen, fast und offensichtlich ist eine Optimierung erforderlich.
Dieses Muster ist besonders nützlich für JavaScript -Programmierer, da es verwendet werden kann, um die Anzahl der DOM -Elemente auf einer Webseite zu reduzieren, wobei der Wissen, dass diese Elemente viel Speicherkonsum haben. Durch die Verwendung dieses Musters und des Organisationstyps wie Kombinationsmuster kann featurereiche komplexe Webanwendungssysteme entwickelt werden, die in jeder modernen JavaScript-Umgebung reibungslos ausgeführt werden können.
Anwendbare Anlässe für den Xiangyuan -Modus:
Eine große Anzahl ressourcenintensiver Objekte muss auf der Webseite verwendet werden. Wenn nur wenige dieser Objekte verwendet werden, ist diese Art der Optimierung nicht kostengünstig.
Zumindest ein Teil der im Objekt gespeicherten Daten kann in externe Daten konvertiert werden. Darüber hinaus sollte das Speichern dieser Daten außerhalb des Objekts relativ wenig Ressourcen einnehmen, da dieser Ansatz ansonsten für Leistungshinweise tatsächlich bedeutungslos ist. Die Art des Objekts, der eine große Menge an Basiscode und HTML -Inhalten enthält, ist möglicherweise besser für diese Art der Optimierung geeignet.
Nach der Trennung der externen Daten ist die Anzahl der eindeutigen Objekte relativ gering.