javascript에서publisher-subscriber 디자인 모드 적용

문제.
부엉이는 국왕의 수염에 의해 통치된다.최근 부엉이는 빠른 성장을 겪었다.어느 날 밤, 국왕의 수염은 부엉이의 카티슨 사람들의 지식과 기능을 향상시켜 CDP를 높이고 인구 증가를 유지해야 한다고 결정했다.그는 궁전 도서관의 정보를 정기적으로 전파함으로써 이 목표를 실현할 계획이다.
그러나 그는 카티슨이 바쁜 고양이라는 것을 알고 상관없는 소식으로 그들을 압도하고 싶지 않았다.
CATIZEN은 주로 이 업계에 분포되어 있습니다.

쥐잡이자

새사냥꾼

코미디언

Glam Vloggers

겁쟁이

솔루션
이 문제를 보면 우리는 몇 가지 전제를 세울 수 있다.

푸시 필요 정보

Catizens에서 메시지 수신

정보는catizen

과 관련된 취미 주제에 따라 전파된다

Catizens는 여러 가지 관심 주제를 가질 수 있다

Catizens는 취미를 바꾸고 특정 테마의 업데이트를 정지할 수 있음

이 문제에 대해 우리는 발표자/구독자 모델을 연구할 것이다

게시자/구독자 모드
Publisher/Subscriber 모드, 약칭PubSub 모드로 일종의 행위 디자인 모델이다.말 그대로 테마(발표자)가 관찰자(구독자) 목록에 변경을 알리는 디자인 모델이다.
아마도 당신은 이미 RxJS library를 사용했을 것입니다. 관찰자라는 용어는 매우 익숙한 것 같습니다.맞아요. PubSub 디자인 모델은 Observer pattern 의 변체이고 RxJS는 이런 모델을 사용했어요.관찰자 모델의 또 다른 흔한 실현은 Redux의 connect 방법이다.

Observer pattern define by GoF Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. -- Design Patterns: Elements of Reusable Object-Oriented Software

관찰자 모델을 실현하는 장점은 두 대상이 느슨하게 결합되어 대상 간의 상호 의존성을 최소화할 수 있다는 것이다.그러나 결합 해제로 인해 프로그램의 각 부분이 정상적으로 작동하는지 확인하기가 어려울 때가 있다. 왜냐하면 프로그램의 일부분이 붕괴될 수 있고 시스템의 다른 부분에 영향을 주지 않기 때문이다.
이 두 모델 사이에는 약간의 차이가 있다.PubSub 모드의 경우 게시자와 구독자 사이에 주제/이벤트 채널이 있습니다.이 이벤트 시스템은 구독자에게 특정 이벤트를 알릴 수 있습니다.


비밀 번호
현재 우리는 이러한 디자인 모델에 대해 개술하였으며, 우리는 위스키 왕을 위해 코드를 만들 것이다.
우선, 우리는 Publisher 클래스를 만들 것입니다. 이 클래스는 구독자를 등록하고 구독자에게 이벤트를 발표할 것입니다.방법subscribe에 대해 매개 변수event는 구독자가 듣고 있는 키가 됩니다.우리의 예에서 새사냥꾼은 climb trees 사건을 경청해야 한다.
King Whiskers가 climb trees 뉴스를 발표하려고 할 때, 우리는 구독 서버에서 climb trees 키를 찾고, 구독 기간에 리셋 레지스터를 호출할 것입니다.
체크아웃을 간소화하기 위해 unsubscribe 방법을 통해 구독자에게 등록할 것입니다.완벽한 세계에서, 우리는 이벤트와 테마 처리를 통해 취소할 고급 PubSub을 만들 것입니다. 그러나 이것은 더욱 추상적인 코드를 도입할 것입니다.

To understand how to implement a PubSub with nested arguments, check out Jack Lawson's Mediator.js. Read: Mediator.js

PubSub.js

class PubSub {
  constructor() {
    this.subscribers = {};
  }

  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }
    const index = this.subscribers[event].push(callback) - 1;
    const { subscribers } = this;

    return {
      unsubscribe: function() {
        subscribers[event].splice(index, 1);
      },
    };
  }

  publish(event, data) {
    if (!this.subscribers[event]) {
      return;
    }
    this.subscribers[event].forEach(subscriberCallback =>
      subscriberCallback(data)
    );
  }
}

다음에 우리는 Cat류를 만들 것이다.위에서 말한 바와 같이 완벽한 세계에서 우리Cat류는 구독을 처리할 필요가 없습니다.
고양이js

class Cat {
  constructor(name, interests) {
    this.name = name;
    this.interests = interests;
    this.unsubscribe = {};
  }

  addUnsubscription(keyName, method) {
    this.unsubscribe[keyName] = method;
  }
}

그리고 PubSub을 설치하고 위에서 언급한 5가지 전제에 따라 모든 것이 정상인지 테스트할 것입니다.
카트도무바브.js

const catDomPubSub = new PubSub();

const cat1 = new Cat('Midnight', ['climb trees', 'hunt', 'weather']);
const cat2 = new Cat('Bear', ['humour', 'weather', 'camera skills']);
const cat3 = new Cat('Smokey', ['hunt', 'camera skills']);
const allCat = [cat1, cat2, cat3];

allCat.forEach((singleCat, idx) => {
  const { name, interests } = singleCat;
  interests.forEach(interest => {
    const { unsubscribe } = catDomPubSub.subscribe(interest, data =>
      printInterestReceived(name, interest, data)
    );
    allCat[idx].addUnsubscription(interest, unsubscribe);
  });
});

function printInterestReceived(name, interest, data) {
  console.log(`${name} has received information for ${interest}: ${data}`);
}

catDomPubSub.publish('climb trees', 'Learn coordination');
catDomPubSub.publish('weather', 'Might rain tomorrow, stay indoors!');
catDomPubSub.publish(
  'hunt',
  'Predicted migration of house rats tomorrow, stay alert'
);

cat1.unsubscribe.hunt();

catDomPubSub.publish('hunt', 'Sharpen your claws');

만약 우리가 이 코드를 실행한다면, 우리는 아래의 내용을 볼 것이다.

Midnight has received information for climb trees: Learn coordination

Midnight has received information for weather: Might rain tomorrow, stay indoors!
Bear has received information for weather: Might rain tomorrow, stay indoors!

Midnight has received information for hunt: Predicted migration of house rats tomorrow, stay alert
Smokey has received information for hunt: Predicted migration of house rats tomorrow, stay alert

Smokey has received information for hunt: Predicted migration of house rats tomorrow, stay alert

Midnight가 hunt 구독을 취소했기 때문에 hunt의 마지막 발표는 Midnight를 표시하지 않습니다.
마지막으로 우리는 김수에게 우리의 제품을 전시할 수 있다.
PubSub 모델의 간단한 예제 중 하나입니다.
이 일은 완성되었습니까?아니요. 알림을 각 사용자 Cat 에 저장하지 않았기 때문입니다.예를 들어cat는 그들이 받은 출판물에 따라 추적하는 모든 기능 집합의 등급을 나타낼 수 있습니다.매번 갱신 후, 그들은 자신의 경험 수준을 높일 것이다.다음까지 Observer와 PubSub 디자인 모델을 사용하여 더 많은 대체 방안을 모색할 것입니다.