js デザインパターン: フライウェイトパターンとは何ですか? JS フライウェイトモードの概要-jsチュートリアル-php.cn

js デザインパターン: フライウェイトパターンとは何ですか? JS フライウェイトモードの概要

不言

リリース： 2018-08-17 16:39:26

オリジナル

1339 人が閲覧しました

この記事では、JS デザインパターンに関するコンテンツをお届けします: Flyweight パターンとは何ですか? js flyweight モードの導入には一定の参考値がありますので、困っている方は参考にしていただければ幸いです。

フライ級モードとは何ですか?

定義: フライウェイトモードは、プログラムのパフォーマンスを最適化するモードであり、その本質は、作成されるオブジェクトの数を減らすことです。

主な解決策: オブジェクトの数が多い場合、メモリオーバーフローが発生する可能性があります。同じビジネスリクエストがある場合、再作成を避けるために、すでにメモリ上にあるオブジェクトを直接返します。

いつ使用するか: 1. システム内には多数のオブジェクトがあります。 2. これらのオブジェクトは大量のメモリを消費します。 3. これらのオブジェクトのステータスのほとんどは外部化できます。 4. これらのオブジェクトは、その固有の状態に従って多くのグループに分割できます。オブジェクトから外部オブジェクトが削除されると、オブジェクトの各グループを 1 つのオブジェクトに置き換えることができます。 5. システムはこれらのオブジェクトの ID に依存せず、これらのオブジェクトは区別できません。

解決方法: 固有の識別コードを使用して判断し、メモリ内に存在する場合は、固有の識別コードで識別されるオブジェクトを返します。

キーコード: これらのオブジェクトを保存するにはハッシュオブジェクトを使用します。

js flyweight モードの適用例: 1. たとえば、文字列が存在する場合はそれを返し、存在しない場合は文字列を作成して文字列キャッシュプールに保存します。 2. データベースのデータプール。

js flyweight モードの利点: オブジェクトの作成を大幅に削減し、システムメモリを削減し、効率を向上させます。

js flyweight モードの欠点: システムの複雑さが増し、外部状態と内部状態の分離が必要になります。さらに、外部状態には固有の性質があり、内部状態の変化に応じて変化するべきではありません。システムが壊れてしまいます。

js flyweight モードの使用シナリオ: 1. システムには類似したオブジェクトが多数あります。 2. バッファープールが必要なシナリオ。

JSフライ級モデルの例:

ある業者が男性用下着を50種類、女性用下着を50種類持っており、それらを展示したいと考えています

オプション1: 男性用のプラスチックモデルと女性用のプラスチックモデルを50個ずつ作成し、着用させて表示する、コードは次のとおりです:

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()
}

ログイン後にコピー

オプション 2: 1 つのプラスチック男性モデルと 1 つのプラスチック女性モデルを作成し、それぞれ 50 スタイルの下着を試着します

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()
}

ログイン後にコピー

比較が見つかりました: オプション 1 では 100 個のオブジェクトが作成され、オプション 2 では 2 つのオブジェクトのみが作成されました, このデモでは、性別は内部オブジェクトであり、下着は外部オブジェクトです。

もちろん、オプション 2 のデモでは、さらなる改善を行うことができます:

最初からコンストラクターを通じてインスタンスを明示的に作成し、ファクトリーモードを使用して制御された世代にアップグレードします
手動インスタンスに下着を追加するあまりエレガントではありませんが、外部に別のマネージャー関数を記述することもできます

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()
}

ログイン後にコピー