JavaScript デザインパターンプログラミングにおけるフライウェイトパターンの詳細な解釈

フライウェイト モードは、多数の同様のオブジェクトを作成することによって引き起こされるパフォーマンスの問題を解決するのに最適です。この記事では、DOM 操作中の使用例を含め、JavaScript デザイン パターン プログラミングにおけるフライウェイト モードの使用法を要約します。デザイン パターンは主にプログラムのパフォーマンスを最適化するために使用され、多数の同様のオブジェクトによって引き起こされるパフォーマンスの問題を解決するのに最適です。フライウェイト モードは、アプリケーション オブジェクトを分析し、それらを内部データと外部データに解析してオブジェクトの数を削減することにより、アプリケーションのパフォーマンスを向上させます。

基礎知識

フライウェイト パターンは、多数のきめの細かいオブジェクトを共有することでオブジェクトの数を減らし、それによってオブジェクトのメモリを削減し、アプリケーションのパフォーマンスを向上させます。基本的な考え方は、既存の類似オブジェクトのコンポーネントを分解し、それらを共有可能な内部データと共有不可能な外部データに拡張することです。これらのオブジェクトを、内部データのフライウェイト オブジェクトと呼びます。通常、内部データを維持するためにファクトリ クラスも必要です。

JS では、Flyweight モードは主に次の役割で構成されます:

(1) クライアント: 内部データ (通常はアプリケーションに必要なオブジェクト) を取得するために Flyweight ファクトリを呼び出すために使用されるクラス、
(2) Flyweight Metafactory: クラスフライウェイト データを維持するために使用されます
(3) フライウェイト クラス: 内部データを維持するクラス

フライウェイト パターンの実装と適用

一般的な実装を説明します: Apple はほとんどの iPhone をバッチで生産しています。 iPhoneのモデルや画面などのデータは同じですが、メモリなどの一部のデータは16G、32Gなどに分かれています。フライウェイト モードを使用する前に、次のようなコードを作成しました:

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

このコードでは、100 万台の iPhone が作成され、各 iPhone が個別にメモリを申請します。しかし、よく見てみると、メモリとシリアル番号が異なることを除けば、ほとんどの iPhone が似ていることがわかります。比較的高いパフォーマンスが要求されるプログラムの場合は、最適化を検討する必要があります。

類似したオブジェクトが多数あるプログラムの場合は、フライウェイト モードを使用して最適化することを検討できます。ほとんどの iPhone モデル、画面、メモリは同じであるため、データのこの部分は共有できます。内部データの場合、フライウェイト クラスは次のように定義されます:

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

iPhone のフライウェイト クラスを定義しました。これには、モデル、画面、メモリの 3 つのデータが含まれます。これらのデータを維持するには、フライウェイト ファクトリも必要です。

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

このファクトリでは、フライウェイト オブジェクトを保存するディクショナリを定義し、If there のパラメータに従ってフライウェイト オブジェクトを取得するメソッドを提供します。直接返されます。何もない場合は、リターンが作成されます。

次に、iphone クラスから変更されたクライアント クラスを作成します。

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

その後、以前と同様に複数の iPhone を生成します

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);

ここで重要なのは、Iphone this.flyweight = flyweightFactory.getコンストラクター内の (モデル、画面、メモリ)。このコードは、flyweight ファクトリを通じて flyweight データを取得します。flyweight ファクトリでは、同じデータを持つオブジェクトがすでに存在する場合、そのオブジェクトは同じデータのこの部分を共有するため、元の類似したデータが返されます。メモリ使用量が大幅に削減されました。

DOM におけるフライウェイト パターンのアプリケーション

フライウェイト パターンの典型的なアプリケーションは、DOM イベント操作です。DOM イベント メカニズムは、イベント バブリングとイベント キャプチャに分かれています。 2 つについて簡単に紹介します。

イベント バブリング: バインドされたイベントは最も内側の要素からトリガーを開始し、次に最も外側のレイヤーにバブリングします。 イベント キャプチャ: バインドされたイベントは最も外側の要素からトリガーを開始し、その後、最も内側の要素に渡されます。レイヤー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>

メニュー項目をクリックして、対応する操作を実行します。通常、jQuery を通じてイベントをバインドします。

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

イベントをバインドします。各リスト項目に入力し、クリックして対応するテキストを出力します。当面はこの方法で問題ありませんが、非常に長いリスト、特にモバイル端末上の非常に長いリストの場合、各項目がイベントにバインドされており、時間がかかるため、パフォーマンスの問題が発生します。メモリアップ。ただし、これらのイベント ハンドラーは実際には非常に似ているため、最適化する必要があります。

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

この方法でイベントをバインドすると、イベント ハンドラーの数を減らすことができます。この方法はイベント デリゲーションと呼ばれ、フライウェイト パターンの原理も使用されます。イベント ハンドラーは共通の内部部分であり、各メニュー項目のそれぞれのテキストは外部部分です。イベント委任の原理について簡単に説明します。メニュー項目をクリックすると、イベントが li 要素から ul 要素にバブルアップします。イベントを ul にバインドするとき、実際にはイベントをバインドしてから、ターゲットを使用します。イベント パラメーターのeventでは、どの要素がクリックされたかを判断します。たとえば、最初の下位レベルの li 要素、event.target は li であるため、特定のクリックされた要素を取得し、さまざまな要素に応じてさまざまな処理を実行できます。

概要

フライウェイト モードは、共通データを共有してプログラムを最適化することでオブジェクトの数を削減します。フライウェイト モードは、類似したオブジェクトが多数あり、高いパフォーマンスが要求されるシナリオに適しています。フライウェイト モードでは内部データと外部データを分離する必要があり、プログラムの論理的な複雑さが増すため、パフォーマンスが必要な場合にのみフライウェイト モードを使用することをお勧めします。

フライング ダラー モデルの利点:
Web ページのリソース要件を数桁削減できます。フライウェイト モードを適用してもインスタンスの数を 1 つに減らすことができなかったとしても、それでも大きなメリットを得ることができます。

この種の保存には、元のコードを大幅に変更する必要はありません。マネージャー、ファクトリー、およびフライウェイトを作成した後、コードに行う必要がある唯一の変更は、ターゲット クラスの直接インスタンス化からマネージャー オブジェクトのメソッドの呼び出しに変更することです。

フライウェイト モードの欠点:
不必要な場所で使用すると、コードの効率に悪影響を及ぼします。このモードではコードが最適化されますが、複雑さも増すため、デバッグやメンテナンスが困難になります。

これがデバッグを妨げる理由は、マネージャー、ファクトリー、フライウェイトの 3 つの場所で問題が発生する可能性があるためです。

この最適化により、メンテナンスもより困難になります。データをカプセル化するオブジェクトで構成される明確な構造の代わりに、現在直面しているのは、断片化された乱雑なものの束です。データは少なくとも 2 か所に保存されます。内部データと外部データに注釈を付けることが最善です。

この最適化は、必要な場合にのみ実行してください。運用効率と保守性の間でトレードオフを行う必要があります。フライウェイト モードを使用する必要があるかどうかわからない場合は、おそらくその必要はありません。 Flyweight モードは、システム リソースがほぼ完全に使用されており、何らかの最適化が明らかに必要な状況に適しています。

このパターンは、Web ページで使用される DOM 要素が大量のメモリを消費することがわかっているため、これらの要素の数を減らすために使用できるため、JavaScript プログラマーにとって特に便利です。このパターンを複合パターンなどの組織パターンと組み合わせると、最新の Javascript 環境でスムーズに実行できる複雑で機能豊富な Web アプリケーションを開発できます。

フライウェイト モードに適用される機会:
Web ページでは、リソースを大量に消費するオブジェクトを多数使用する必要があります。このようなオブジェクトが少数しか使用されない場合、この最適化は費用対効果が高くありません。

オブジェクトに保存されているデータの少なくとも一部を外部データに変換できます。さらに、このデータをオブジェクトの外部に保存することは比較的安価でなければなりません。そうしないと、このアプローチによるパフォーマンスへの影響は事実上無意味になります。基本的なコードと HTML コンテンツを多く含むオブジェクトは、この最適化により適している可能性があります。

外部データを分離した後、一意のオブジェクトの数は比較的少なくなります。

上記は私があなたのためにまとめたものです。

関連記事:

javascript配列定義のいくつかの方法 (グラフィックチュートリアル)

javascriptフロー制御文のコレクションについて (グラフィックチュートリアル)

javascript関数について深さ関数の理解と実践（コード添付）

以上がJavaScript デザインパターンプログラミングにおけるフライウェイトパターンの詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。