プロキシ設計パターン-jsチュートリアル-php.cn

Proxy Design Pattern

以前のブログでは、オブジェクト作成メカニズムを扱うさまざまな作成デザインパターンを検討しました。ここで、構造設計パターンについて詳しく見ていきましょう。これは、オブジェクトとクラスを柔軟かつ効率的に保ちながら、より大きな構造を形成する方法に焦点を当てています。プロキシ設計パターンから始めましょう

JavaScript のプロキシ設計パターン

プロキシデザインパターンは、別のオブジェクトを表すオブジェクトを提供する構造的なデザインパターンです。これは、実際のオブジェクトへのアクセスを制御する仲介者として機能し、元のオブジェクトのコードを変更せずに、遅延初期化、ロギング、アクセス制御、キャッシュなどの追加の動作を追加します。

JavaScript では、プロキシは Proxy オブジェクトによって提供される組み込み機能であり、プロパティアクセス、割り当て、関数呼び出しなどの基本的な操作のカスタム動作を定義できます。

プロキシパターンが必要になるのはどのような場合ですか?

プロキシパターンは、次の場合に特に役立ちます。

遅延初期化: リソースを大量に使用するオブジェクトの作成を、必要になるまで遅らせたいとします。
アクセス制御: たとえば、無許可のアクセスを制限したり、条件に基づいて操作を制限したりするために、オブジェクトへのアクセスを制御する必要があります。
ログ: オブジェクトに対するアクション (プロパティアクセスやメソッド呼び出しなど) をログに記録します。
キャッシュ: 冗長な計算を避けるために、負荷の高い操作の結果をキャッシュしたいとします。

プロキシパターンのコンポーネント

件名: 実際のオブジェクトとプロキシの両方に共通の操作を定義するインターフェイス。
RealSubject: 実際の作業を実行する実際のオブジェクト。
プロキシ: RealSubject へのアクセスを制御する仲介者。

類推：

ゲストに見せたい大きな絵画があると想像してください。しかし、それを倉庫から取り出すのに時間がかかります (重くて運ぶのに時間がかかるため)。毎回それを待つのではなく、実際の絵が取りに来るのを待っている間に、絵の小さなポストカード画像を使用してすぐに見せることにしました。

このたとえでは:

大きな絵は実際のオブジェクトです (読み込みに時間がかかる画像など)。
ポストカードは代理です (実際のオブジェクトの準備ができるまでの代わりとなる軽量の代替品)。
実際の絵画の準備ができたら、実際の絵画をゲストに見せます。

現実世界の例え:

不動産業者を代理人と考えてください。家を購入したいと思ったとき、すぐにすべての家を訪問する（実物を積み込む）わけではありません。代わりに、不動産業者（代理人）が最初に写真と説明を見せます。購入する準備ができたとき (つまり、display() を呼び出したとき) にのみ、エージェントが自宅訪問を手配します (実際のオブジェクトをロードします)。

実際の例: 画像の読み込み (仮想プロキシ)

ユーザーが要求するまで画像の読み込みを遅らせる (遅延読み込み) 必要がある、Web アプリケーションでの画像読み込みの例を使用してみましょう。プロキシは、実際のイメージがロードされるまでプレースホルダーとして機能します。

ここでは、JavaScript でプロキシ設計パターンを実装する方法を説明します。

例: 画像ロードのプロキシ

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

ログイン後にコピー

説明:

1)。実像:

RealImage クラスは実際のイメージを表します。
入力としてファイル名を受け取り、ディスクからイメージをロードする時間のかかるプロセス (loadImageFromDisk メソッドで示される) をシミュレートします。
ロードされると、display メソッドを使用して画像が表示されます。

2)。プロキシ画像:

ProxyImage クラスは、RealImage の代わりとして機能します。実際のイメージはすぐにはロードされません。
実際のイメージへの参照を保持します (ただし、実際のイメージはまだロードされていないため、最初は null です)。
プロキシ上で display メソッドを呼び出すと、実際のイメージがロードされているかどうかがチェックされます。そうでない場合は、最初にロードしてから表示します。

3)。使用法:

ProxyImage のインスタンスを作成するとき、実際のイメージはまだロードされていません (リソースを大量に消費するため)。
最初に display が呼び出されるとき、プロキシは (RealImage クラスを使用して) 画像をロードし、それを表示します。
2 回目の表示呼び出しでは、実際の画像は既にロードされているため、再度ロードせずに画像のみを表示します。

組み込みの Proxy オブジェクト

ES6 プロキシは、ターゲットとハンドラーを引数として受け入れるプロキシコンストラクターで構成されています

const proxy = new Proxy(target, handler)

ログイン後にコピー

ここで、ターゲットはプロキシが適用されるオブジェクトを表し、ハンドラーはプロキシの動作を定義する特別なオブジェクトです。

ハンドラーオブジェクトには、トラップメソッド (apply、get、set、has など) と呼ばれる事前定義された名前を持つ一連のオプションのメソッドが含まれています。これらのメソッドは、対応する操作がプロキシインスタンスで実行されるときに自動的に呼び出されます。

組み込みプロキシを使用して計算機を実装してこれを理解しましょう

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

ログイン後にコピー