Heim > Web-Frontend > js-Tutorial > js-Designmuster: Was ist ein Fliegengewichtsmuster? Einführung in den Fliegengewichtsmodus von js

js-Designmuster: Was ist ein Fliegengewichtsmuster? Einführung in den Fliegengewichtsmodus von js

不言
Freigeben: 2018-08-17 16:39:26
Original
1402 Leute haben es durchsucht

Dieser Artikel enthält Inhalte zu js-Designmustern: Was ist das Fliegengewichtsmuster? Die Einführung des js-Fliegengewichtsmodus hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Was ist der Fliegengewichtsmodus?

Definition: Der Flyweight-Modus ist ein Modus, der die Programmleistung optimiert. Sein Wesen besteht darin, die Anzahl der erstellten Objekte zu reduzieren.

Hauptlösung: Wenn eine große Anzahl von Objekten vorhanden ist, kann es zu einem Speicherüberlauf kommen. Wenn dieselbe Geschäftsanforderung vorliegt, geben wir die bereits gespeicherten Daten direkt zurück im Speicher wird verhindert, dass einige Objekte neu erstellt werden.

Wann zu verwenden ist: 1. Es gibt eine große Anzahl von Objekten im System. 2. Diese Objekte verbrauchen viel Speicher. 3. Der Status dieser Objekte kann größtenteils externalisiert werden. 4. Diese Objekte können entsprechend ihrem intrinsischen Zustand in viele Gruppen eingeteilt werden. Wenn externe Objekte aus den Objekten entfernt werden, kann jede Objektgruppe durch ein Objekt ersetzt werden. 5. Das System verlässt sich nicht auf die Identität dieser Objekte und diese Objekte sind nicht unterscheidbar.

So lösen Sie: Verwenden Sie den eindeutigen Identifikationscode, um zu beurteilen, ob er im Speicher vorhanden ist, und geben Sie das durch den eindeutigen Identifikationscode identifizierte Objekt zurück.

Schlüsselcode: Verwenden Sie Hash-Objekte, um diese Objekte zu speichern.

Anwendungsbeispiel für den js-Fliegengewichtsmodus: 1. Wenn beispielsweise eine Zeichenfolge vorhanden ist, geben Sie sie zurück. Wenn nicht, erstellen Sie eine Zeichenfolge und speichern Sie sie im Zeichenfolgen-Cache-Pool. 2. Der Datenpool der Datenbank.

Vorteile des js-Fliegengewichtsmodus: Reduziert die Erstellung von Objekten erheblich, reduziert den Systemspeicher und verbessert die Effizienz.

Nachteile des js-Fliegengewichtsmodus: Erhöht die Komplexität des Systems und erfordert eine Trennung von externen und internen Zuständen. Der externe Zustand ist von Natur aus inhärent und sollte sich nicht mit dem internen Zustand ändern nach Änderungen, sonst kommt es zu Chaos im System.

Nutzungsszenarien für den js-Fliegengewichtsmodus: 1. Das System verfügt über eine große Anzahl ähnlicher Objekte. 2. Szenarien, die einen Pufferpool erfordern.

Beispiel für den JS-Fliegengewichtsmodus:

Ein Händler hat 50 Arten von Herrenunterwäsche und 50 Arten von Damenunterwäsche und möchte diese ausstellen

Option 1: Machen Sie 50 Plastikartikel Ein männliches Model und 50 weibliche Plastikmodels und lassen Sie sie zur Schau tragen. Der Code lautet wie folgt:

const Model = function(gender, underwear) {
  this.gender = gender
  this.underwear = underwear
}

Model.prototype.takephoto = function() {
  console.log(`${this.gender}穿着${this.underwear}`)
}

for (let i = 1; i < 51; i++) {
  const maleModel = new Model(&#39;male&#39;, `第${i}款衣服`)
  maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
  const female = new Model(&#39;female&#39;, `第${i}款衣服`)
  female.takephoto()
}
Nach dem Login kopieren

Option 2: Machen Sie 1 männliches Plastikmodell und 1 weibliches Plastikmodell und probieren Sie jeweils 50 Unterwäschemodelle an

const Model = function(gender) {
    this.gender = gender
}

Model.prototype.takephoto = function() {
    console.log(`${this.gender}穿着${this.underwear}`)
}

const maleModel = new Model(&#39;male&#39;)
const femaleModel = new Model(&#39;female&#39;)

for (let i = 1; i < 51; i++) {
    maleModel.underwear = `第${i}款衣服`
    maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
    femaleModel.underwear = `第${i}款衣服`
    femaleModel.takephoto()
}
Nach dem Login kopieren

Vergleich gefunden: Plan 1 hat 100 Objekte erstellt, Plan 2 hat nur 2 Objekte erstellt. In dieser Demo ist Geschlecht ein internes Objekt und Unterwäsche ein externes Objekt.

Natürlich können in der Demo von Option 2 weitere Verbesserungen vorgenommen werden:

  1. Erstellen Sie die Instanz von Anfang an explizit über den Konstruktor und verwenden Sie dazu den Factory-Modus Aktualisieren Sie es auf eine Controlling-Generation

  2. Das manuelle Hinzufügen von Unterwäsche zur Instanz ist nicht sehr elegant. Sie können extern eine separate Managerfunktion schreiben

const Model = function(gender) {
  this.gender = gender
}

Model.prototype.takephoto = function() {
  console.log(`${this.gender}穿着${this.underwear}`)
}

const modelFactory = (function() { // 优化第一点
  const modelGender = {}
  return {
    createModel: function(gender) {
      if (modelGender[gender]) {
        return modelGender[gender]
      }
      return modelGender[gender] = new Model(gender)
    }
  }
}())

const modelManager = (function() {
  const modelObj = {}
  return {
    add: function(gender, i) {
      modelObj[i] = {
        underwear: `第${i}款衣服`
      }
      return modelFactory.createModel(gender)
    },
    copy: function(model, i) { // 优化第二点
      model.underwear = modelObj[i].underwear
    }
  }
}())

for (let i = 1; i < 51; i++) {
  const maleModel = modelManager.add(&#39;male&#39;, i)
  modelManager.copy(maleModel, i)
  maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
  const femaleModel = modelManager.add(&#39;female&#39;, i)
  modelManager.copy(femaleModel, i)
  femaleModel.takephoto()
}
Nach dem Login kopieren

Verwandte Empfehlungen:

js-Designmuster: Was ist das Kombinationsmuster? Einführung in das js-Kombinationsmuster

js-Entwurfsmuster: Was ist das Vorlagenmethodenmuster? Einführung in das Muster der JS-Vorlagenmethode

Das obige ist der detaillierte Inhalt vonjs-Designmuster: Was ist ein Fliegengewichtsmuster? Einführung in den Fliegengewichtsmodus von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage