TypeScript에서 관찰자 디자인 패턴 구현

디자인 패턴은 소프트웨어 디자인에서 일반적으로 반복되는 문제를 해결하는 템플릿입니다.

발행-구독 패턴이라고도 하는 관찰자 패턴은 행동 패턴입니다. 이를 통해 관찰 중인 개체에 게시된 이벤트에 대해 여러 개체 또는 구독자에게 알릴 수 있습니다.

프로그램 오류로 인해 요청을 완료할 수 없습니다

MAKEUSEOF 오늘의 비디오

여기서는 TypeScript에서 관찰자 디자인 패턴을 구현하는 방법을 배웁니다.

관찰자 패턴

관찰자 패턴은 게시자와 구독자 간의 일대다 관계를 정의하여 작동합니다. 게시자에서 이벤트가 발생하면 해당 이벤트에 대한 모든 구독자에게 알립니다. 이 패턴의 널리 퍼진 예는 다음과 같습니다. 자바스크립트 이벤트 리스너 .

컨텍스트를 위해 매장의 제품 수를 추적하는 재고 추적기를 구축한다고 가정합니다. 이 경우 상점은 주제/발행인이고 인벤토리는 관찰자/구독자입니다. 이러한 상황에서는 관찰자 디자인 패턴을 사용하는 것이 가장 좋습니다.

관찰자 디자인 패턴에서 주제 클래스는 세 가지 방법을 구현해야 합니다.

안 붙이다 방법. 이 방법은 대상에 관찰자를 추가합니다.
ㅏ 분리하다 방법. 이 방법은 대상에서 관찰자를 제거합니다.
ㅏ 알림/업데이트 방법. 이 메서드는 주체의 상태가 변경될 때 주체의 관찰자에게 알립니다.

관찰자 클래스는 하나의 메서드를 구현해야 합니다. 업데이트 방법. 이 메서드는 주체의 상태가 변경될 때 반응합니다.

주제 및 관찰자 클래스 구현

이 패턴을 구현하는 첫 번째 단계는 주제 및 관찰자 클래스에 대한 인터페이스를 만들어 올바른 메서드를 구현하는지 확인하는 것입니다.

// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

위 코드 블록의 인터페이스는 구체적인 클래스가 구현해야 하는 메서드를 정의합니다.

구체적인 주제 클래스

다음 단계는 다음을 구현하는 구체적인 주제 클래스를 구현하는 것입니다. 주제 상호 작용:

// Subject 
class Store implements Subject {}

다음으로 초기화 주제 의 상태 가게 수업. 대상의 관찰자는 이 상태의 변화에 반응합니다.

이 경우 상태는 숫자이고 관찰자는 숫자의 증가에 반응합니다.

전용 비디오 램 nvidia를 늘리는 방법

// Subject state 
private numberOfProducts: number;

다음으로 관찰자 배열을 초기화합니다. 이 배열은 관찰자를 추적하는 방법입니다.

// initializing observers 
private observers: Observer[] = [];