프록시 디자인 패턴

이전 블로그에서는 객체 생성 메커니즘을 다루는 다양한 창의적 디자인 패턴을 살펴봤습니다. 이제 구조적 디자인 패턴을 살펴볼 시간입니다. 객체와 클래스를 구성하여 유연성과 효율성을 유지하면서 더 큰 구조를 형성하는 방법에 중점을 둡니다. 프록시 디자인 패턴부터 시작해보자

JavaScript의 프록시 디자인 패턴

프록시 디자인 패턴은 다른 객체를 나타내는 객체를 제공하는 구조적 디자인 패턴입니다. 원본 개체의 코드를 변경하지 않고 지연 초기화, 로깅, 액세스 제어, 캐싱 등의 추가 동작을 추가하여 실제 개체에 대한 액세스를 제어하는 ​​중개자 역할을 합니다.

JavaScript에서 프록시는 프록시 객체가 제공하는 내장 기능입니다. 이를 통해 속성 액세스, 할당, 함수 호출 등과 같은 기본 작업에 대한 사용자 정의 동작을 정의할 수 있습니다.

언제 프록시 패턴이 필요합니까?

프록시 패턴은 다음과 같은 경우에 특히 유용합니다.

• 지연 초기화: 필요할 때까지 리소스를 많이 사용하는 객체 생성을 지연하려고 합니다.
• 액세스 제어: 무단 액세스를 제한하거나 조건에 따라 작업을 제한하는 등 객체에 대한 액세스를 제어해야 합니다.
• 로깅: 개체에 대한 작업(예: 속성 액세스 또는 메서드 호출)을 기록하려고 합니다.
• 캐싱: 중복 계산을 피하기 위해 비용이 많이 드는 작업의 결과를 캐시하려고 합니다.

프록시 패턴의 구성요소

1. 제목: 실제 객체와 프록시 모두에 대한 공통 작업을 정의하는 인터페이스입니다.
2. RealSubject: 실제 작업을 수행하는 실제 객체입니다.
3. 프록시: RealSubject에 대한 액세스를 제어하는 ​​중개자입니다.

유추:

손님에게 보여주고 싶은 큰 그림이 있는데 창고에서 꺼내는 데 시간이 많이 걸린다고 상상해 보세요. (무거워서 옮기는 데 시간이 걸리기 때문입니다.) 매번 기다리는 대신 그림이 담긴 작은 엽서 이미지를 사용하여 실제 그림을 가져오기를 기다리는 동안 빠르게 보여 주기로 결정했습니다.

이 비유에서:

• 큰 그림이 실물입니다(이미지 로딩에 시간이 걸리는 것처럼).
• 엽서는 프록시(실물이 준비될 때까지 대기하는 경량 대체물)입니다.
• 실제 그림이 준비되면 손님에게 실제 그림을 보여줍니다.

실제 비유:

부동산 중개인을 대리인으로 생각해보세요. 집을 사고 싶을 때 즉시 모든 집을 방문하지 않습니다(실물 로딩). 대신 부동산 중개업자(대리인)가 먼저 사진과 설명을 보여줍니다. 구매할 준비가 되었을 때만(즉, display()를 호출하는 경우) 에이전트가 집 방문을 주선합니다(실물 로드).

실제 사례: 이미지 로딩(가상 프록시)

사용자가 요청할 때까지 이미지 로드를 지연하려는 웹 애플리케이션의 이미지 로드 예를 사용해 보겠습니다(지연 로드). 프록시는 실제 이미지가 로드될 때까지 자리 표시자 역할을 할 수 있습니다.

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메서드에서 표시).
• 로드되면 디스플레이 방법을 사용하여 이미지를 표시합니다.

2). 프록시 이미지:

• ProxyImage 클래스는 RealImage의 대체 역할을 합니다. 실제 이미지가 바로 로딩되지는 않습니다.
• 실제 이미지에 대한 참조를 보유합니다(그러나 실제 이미지가 아직 로드되지 않았기 때문에 처음에는 null입니다).
• 프록시에서 디스플레이 메소드를 호출하면 실제 이미지가 로드되었는지 확인합니다. 그렇지 않은 경우 먼저 로드한 다음 표시합니다.

3). 사용법:

• ProxyImage 인스턴스를 생성할 때 실제 이미지는 아직 로드되지 않습니다(리소스 집약적이기 때문에).
• display가 처음 호출되면 프록시는 RealImage 클래스를 사용하여 이미지를 로드한 다음 표시합니다.
• 두 번째 표시를 호출하면 실제 이미지가 이미 로드되어 있으므로 다시 로드하지 않고 이미지만 표시합니다.

내장 프록시 객체

ES6 프록시는 대상 및 핸들러를 인수로 받아들이는 프록시 생성자로 구성됩니다

const proxy = new Proxy(target, handler)

여기서 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)

이러한 방식으로 프록시를 사용하는 가장 좋은 점은 다음과 같습니다.

• 프록시 객체는 원래 Calculator 클래스의 프로토타입을 상속합니다.
• 프록시의 설정된 트랩을 통해 돌연변이를 방지합니다.

코드 설명

1). 프로토타입 상속:

• 프록시는 **Calculator **클래스의 원래 프로토타입을 방해하지 않습니다.
• 이는 proxiedCalculator.proto === Calculator.prototype인지 확인하여 확인됩니다. 결과는 참입니다.

2). getOperations 처리:

• get 트랩은 프록시 객체의 속성 액세스를 가로챕니다.
• Reflect.get을 사용하여 원본 개체의 속성과 메서드에 안전하게 액세스합니다.

3). 변이 예방:

세트 트랩은 대상 객체의 속성을 수정하려고 할 때마다 오류를 발생시킵니다. 이는 불변성을 보장합니다.

4). 프록시를 통한 프로토타입 방법 사용:

프록시를 사용하면 원본 개체의 프로토타입에 정의된 더하기, 빼기, 곱하기, 나누기와 같은 메서드에 액세스할 수 있습니다.

여기서 관찰해야 할 핵심 사항은 다음과 같습니다.

• 프로토타입 상속 유지: 프록시는 모든 프로토타입 메소드에 대한 액세스를 유지하므로 원래 계산기처럼 작동합니다.
• 변이 방지: 설정된 트랩은 계산기 개체의 내부 상태가 예기치 않게 변경될 수 없도록 보장합니다.
• 속성 및 메서드에 대한 안전한 액세스: get 트랩은 유효한 속성에만 액세스하도록 보장하여 견고성을 향상시킵니다.

여기까지 오셨다면 좋아요를 누르시고 질문이나 생각이 있으시면 아래에 댓글을 남겨주세요. 귀하의 피드백은 저에게 큰 의미가 있습니다. 귀하의 의견을 듣고 싶습니다!

위 내용은 프록시 디자인 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!