Detaillierte Interpretation des Flyweight-Musters in der JavaScript-Designmusterprogrammierung

Das Flyweight-Muster eignet sich am besten zur Lösung von Leistungsproblemen, die durch die Erstellung einer großen Anzahl ähnlicher Objekte entstehen. In diesem Artikel wird die Verwendung des Flyweight-Musters in der JavaScript-Entwurfsmusterprogrammierung zusammengefasst, einschließlich Beispielen für die Verwendung bei DOM-Operationen:

Das Fliegengewichtsmuster unterscheidet sich vom allgemeinen Entwurfsmuster. Es wird hauptsächlich zur Optimierung der Leistung des Programms verwendet. Es eignet sich am besten zur Lösung von Leistungsproblemen, die durch eine große Anzahl ähnlicher Objekte verursacht werden. Der Flyweight-Modus verbessert die Anwendungsleistung, indem er Anwendungsobjekte analysiert und sie in intrinsische Daten und extrinsische Daten analysiert, wodurch die Anzahl der Objekte reduziert wird.

Grundkenntnisse

Der Fliegengewichtsmodus reduziert die Anzahl der Objekte durch die gemeinsame Nutzung einer großen Anzahl feinkörniger Objekte, wodurch der Objektspeicher reduziert und die Anwendungsleistung verbessert wird. Die Grundidee besteht darin, die Komponenten vorhandener ähnlicher Objekte zu zerlegen und sie in gemeinsam nutzbare intrinsische Daten und nicht gemeinsam nutzbare extrinsische Daten zu erweitern. Wir nennen die Objekte intrinsischer Daten Fliegengewichtsobjekte. Normalerweise wird auch eine Factory-Klasse benötigt, um interne Daten zu verwalten.
In JS besteht das Flyweight-Muster hauptsächlich aus den folgenden Rollen:
(1) Client: eine Klasse, die zum Aufrufen der Flyweight-Fabrik verwendet wird, um intrinsische Daten zu erhalten, normalerweise die von der Anwendung benötigten Objekte,
(2 ) Fliegengewichtsfabrik: eine Klasse zur Verwaltung von Fliegengewichtsdaten
(3) Fliegengewichtsklasse: eine Klasse zur Verwaltung interner Daten

Implementierung und Anwendung von Fliegengewichtsmustern

Allgemeine Implementierung

Nehmen wir zur Veranschaulichung ein Beispiel: Apple produziert iPhones in Massenproduktion. Die meisten iPhone-Daten wie Modell und Bildschirm sind gleich, einige Teile der Daten sind jedoch identisch Der Speicher ist beispielsweise in 16 GB, 32 GB usw. unterteilt. Bevor wir den Fliegengewichtsmodus verwenden, haben wir den Code wie folgt geschrieben:

function Iphone(model, screen, memory, SN) {
  this. model = model;
  this.screen = screen;
  this.memory = memory;
  this.SN = SN;
}
var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}

In diesem Code werden eine Million iPhones erstellt, und jedes iPhone wendet unabhängig einen Speicher an. Aber wenn wir genau hinschauen, können wir erkennen, dass die meisten iPhones ähnlich sind, außer dass der Speicher und die Seriennummer unterschiedlich sind. Wenn es sich um ein Programm mit relativ hohen Leistungsanforderungen handelt, müssen wir über eine Optimierung nachdenken.
Für Programme mit einer großen Anzahl ähnlicher Objekte können wir den Fliegengewichtsmodus zur Optimierung in Betracht ziehen. Wir haben analysiert, dass die meisten iPhone-Modelle, Bildschirme und Speicher gleich sind, sodass dieser Teil der Daten gemeinsam genutzt werden kann. Das ist Fliegengewicht. Die intrinsischen Daten im Modell definieren die Fliegengewichtsklasse wie folgt:

function IphoneFlyweight(model, screen, memory) {
  this.model = model;
  this.screen = screen;
  this.memory = memory;
}

Wir definieren die Fliegengewichtsklasse des iPhone, die drei Daten enthält: Modell, Bildschirm und Speicher. Wir benötigen auch eine Fliegengewichtsfabrik, um diese Daten zu verwalten:

 var flyweightFactory = (function () {
  var iphones = {};
  return {
    get: function (model, screen, memory) {
      var key = model + screen + memory;
      if (!iphones[key]) {
        iphones[key] = new IphoneFlyweight(model, screen, memory);
      }
      return iphones[key];
    }
  };
})();

In dieser Fabrik definieren wir ein Wörterbuch zum Speichern des Fliegengewichtsobjekts und stellen eine Methode zum Abrufen des Fliegengewichts bereit Objekt gemäß den Parametern. Wenn es im Wörterbuch vorhanden ist, wird es direkt zurückgegeben. Wenn nicht, wird es erstellt und zurückgegeben.
Dann erstellen wir eine Client-Klasse, die von der iPhone-Klasse modifiziert ist:

 function Iphone(model, screen, memory, SN) {
  this.flyweight = flyweightFactory.get(model, screen, memory);
  this.SN = SN;
}

Dann generieren wir immer noch mehrere iPhones

var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}
console.log(phones);

Der Schlüssel hier ist this.flyweight = flyweightFactory.get(model, screen, memory) im Iphone-Konstruktor. Dieser Code erhält Flyweight-Daten über die Flyweight-Factory. Wenn in der Flyweight-Factory bereits ein Objekt mit denselben Daten vorhanden ist, wird das Objekt direkt zurückgegeben. Mehrere iPhone-Objekte teilen sich diesen Teil derselben Daten, sodass die ursprünglichen ähnlichen Daten vorhanden sind Stark reduzierte Speichernutzung.

Anwendung des Fliegengewichtsmodus im DOM

Eine typische Anwendung des Fliegengewichtsmodus ist der DOM-Ereignisbetrieb. Der DOM-Ereignismechanismus ist in Ereignisblasen und Ereigniserfassung unterteilt. Lassen Sie uns die beiden kurz vorstellen:
Ereignisblasen: Das gebundene Ereignis beginnt vom innersten Element und sprudelt dann bis zum äußersten Element.
Ereigniserfassung: Das gebundene Ereignis beginnt vom äußersten Element auszulösen und geht dann zur innersten Ebene über
Angenommen, wir haben eine Menüliste in HTML

<ul class="menu">
  <li class="item">选项1</li>
  <li class="item">选项2</li>
  <li class="item">选项3</li>
  <li class="item">选项4</li>
  <li class="item">选项5</li>
  <li class="item">选项6</li>
</ul>

Klicken Sie auf den Menüpunkt und führen Sie den entsprechenden Vorgang aus. Um Ereignisse über jQuery zu binden, gehen Sie normalerweise wie folgt vor:

$(".item").on("click", function () {
  console.log($(this).text());
})

Binden Sie Ereignisse an jedes Listenelement und klicken Sie, um den entsprechenden Text auszugeben. Auf diese Weise gibt es vorerst kein Problem, aber wenn es sich um eine sehr lange Liste handelt, insbesondere wenn es sich um eine sehr lange Liste auf dem mobilen Endgerät handelt, kommt es zu Leistungsproblemen, da jedes Element an ein Ereignis gebunden ist und dauert Speicher aufladen. Aber diese Event-Handler sind sich tatsächlich sehr ähnlich, daher müssen wir sie optimieren.

$(".menu").on("click", ".item", function () {
  console.log($(this).text());
})

Die Ereignisbindung auf diese Weise kann die Anzahl der Ereignishandler reduzieren und verwendet auch das Flyweight-Muster. Der Ereignishandler ist der gemeinsame innere Teil und der jeweilige Text jedes Menüelements ist der äußere Teil. Lassen Sie uns kurz über das Prinzip der Ereignisdelegierung sprechen: Wenn Sie auf einen Menüpunkt klicken, wird das Ereignis vom li-Element zum ul-Element übertragen. Wenn wir das Ereignis an ul binden, binden wir tatsächlich ein Ereignis und verwenden dann das Ziel Bestimmen Sie im Ereignisparameter event, auf welches Element geklickt wurde, z. B. das erste Low-Level-li-Element, event.target ist li, sodass Sie das spezifische angeklickte Element abrufen und je nach Element unterschiedliche Verarbeitungen durchführen können.

Zusammenfassung

Der Flyweight-Modus ist ein Mittel zur Optimierung der Programmleistung. Er reduziert die Anzahl der Objekte durch die gemeinsame Nutzung gemeinsamer Daten, um das Programm zu optimieren. Der Fliegengewichtsmodus eignet sich für Szenarien mit einer großen Anzahl ähnlicher Objekte und hohen Leistungsanforderungen. Da der Flyweight-Modus die Trennung interner und externer Daten erfordert, was die logische Komplexität des Programms erhöht, wird empfohlen, den Flyweight-Modus nur dann zu verwenden, wenn Leistung erforderlich ist.

Vorteile des Fliegengewichtsmodus:
Er kann den Ressourcenbedarf von Webseiten um mehrere Größenordnungen reduzieren. Auch wenn die Anwendung des Fliegengewichtsmodus die Anzahl der Instanzen nicht auf eine reduzieren kann, können Sie dennoch viel davon profitieren.

Diese Art der Speicherung erfordert keine umfangreiche Änderung des Originalcodes. Nach dem Erstellen des Managers, der Factory und des Flyweights besteht die einzige Änderung am Code darin, von der direkten Instanziierung der Zielklasse zum Aufruf einer Methode des Managerobjekts zu wechseln.

Nachteile des Fliegengewichtsmodus:
Wenn er an unnötigen Stellen verwendet wird, wirkt sich das Ergebnis nachteilig auf die Effizienz des Codes aus. Während dieser Modus den Code optimiert, erhöht er auch seine Komplexität, was das Debuggen und die Wartung erschwert.

Der Grund dafür, dass das Debuggen behindert wird, liegt darin, dass es jetzt drei mögliche Orte gibt, an denen Fehler passieren können: der Manager, die Fabrik und das Fliegengewicht.

Durch diese Optimierung wird auch die Wartung erschwert. Anstelle einer klaren Struktur, die aus Objekten besteht, die Daten kapseln, sehen Sie sich jetzt einem Haufen fragmentierter und unordentlicher Dinge gegenüber. Die Daten werden an mindestens zwei Orten gespeichert. Am besten kommentieren Sie die internen und externen Daten.

Diese Optimierung sollte nur bei Bedarf durchgeführt werden. Es muss ein Kompromiss zwischen betrieblicher Effizienz und Wartbarkeit geschlossen werden. Wenn Sie nicht sicher sind, ob Sie den Fliegengewichtsmodus verwenden müssen, benötigen Sie ihn wahrscheinlich nicht. Der Flyweight-Modus eignet sich für Situationen, in denen die Systemressourcen fast vollständig genutzt werden und offensichtlich eine Optimierung erforderlich ist.

Dieser Modus ist besonders nützlich für Javascript-Programmierer, da er verwendet werden kann, um die Anzahl der auf einer Webseite verwendeten DOM-Elemente zu reduzieren, da diese Elemente viel Speicher verbrauchen. Durch die Kombination dieses Musters mit Organisationsmustern wie dem Composite-Muster können Sie funktionsreiche und komplexe Webanwendungen entwickeln, die in jeder modernen Javascript-Umgebung reibungslos laufen können.

Anwendbare Anlässe für den Fliegengewichtsmodus:
Auf Webseiten muss eine große Anzahl ressourcenintensiver Objekte verwendet werden. Werden nur wenige solcher Objekte verwendet, ist diese Optimierung nicht kosteneffektiv.

Zumindest ein Teil der im Objekt gespeicherten Daten kann in externe Daten umgewandelt werden. Darüber hinaus sollte die Speicherung dieser Daten außerhalb des Objekts relativ kostengünstig sein, da sonst die Auswirkungen dieses Ansatzes auf die Leistung praktisch bedeutungslos sind. Objekte, die viel Basiscode und HTML-Inhalte enthalten, eignen sich möglicherweise besser für diese Optimierung.

Nachdem die extrinsischen Daten getrennt wurden, ist die Anzahl der eindeutigen Objekte relativ gering.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

JavascriptMehrere Methoden der Array-Definition (grafisches Tutorial)

Über JavascriptSammlung von Flusskontrollanweisungen (Bild- und Text-Tutorial)

Umfassendes Verständnis und praktische Verwendung der Funktion Javascript (beigefügter Code)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des Flyweight-Musters in der JavaScript-Designmusterprogrammierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!