JavaScript 디자인 패턴 — 팩토리 패턴

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

디자인 패턴은 좋은 소프트웨어의 기초입니다. JavaScript 프로그램도 예외는 아닙니다.

이 기사에서는 공장 및 관찰자 패턴을 살펴보겠습니다.

공장 패턴

팩토리 패턴은 새로운 객체를 생성하고 깨끗한 방식으로 반환할 수 있는 디자인 패턴입니다.

예를 들어, 유사한 다른 종류의 항목을 반환하고 싶을 수 있습니다.

이를 쉽게 하기 위해 하나의 팩토리 함수로 다양한 종류의 객체를 반환할 수 있는 팩토리 함수를 만들 수 있습니다.

우리는 쓸 수있다:

class Fruit {
  //...
}

class Apple extends Fruit {
  //...
}

class Orange extends Fruit {
  //...
}

const fruitFactory = (type) => {
  if (type === 'apple') {
    return new Apple()
  } else if (type === 'orange') {
    return new Apple()
  }
}

객체의 fruitFactory를 인수로 가져오고 유형에 따라 객체를 반환하는 type 팩토리 함수가 있습니다.
'apple' 값이 type 이면 Apple 인스턴스를 반환합니다.

그리고 type를 'orange'로 설정하면 Orange 인스턴스를 반환합니다.

이제 명시적으로 작성하지 않고 Fruit의 다른 하위 클래스 인스턴스를 반환할 수 있습니다.

클래스를 변경하거나 추가 또는 제거하더라도 여전히 동일한 팩토리 함수를 사용할 수 있으며 아무 것도 중단하지 않습니다.

JavaScript의 일부 팩토리 함수는 표준 라이브러리에 있습니다.

여기에는 String 문자열 생성, Number 다른 엔티티에서 숫자 생성, Boolean 변수를 부울로 변환, Array 배열 생성 등이 포함됩니다.

이제 우리는 Fruit 객체를 생성하기 위해 팩토리 함수를 사용했기 때문에 코드를 엉망으로 만드는 클래스 구조의 변경에 대해 걱정할 필요가 없습니다.

관찰자

관찰자 패턴은 하나의 관찰 가능한 개체를 수신하는 여러 개체가 있는 곳입니다.

이러한 방식으로 주체라고도 하는 관찰 가능한 개체는 방출되는 데이터로 관찰 가능한 개체를 구독한 개체에 알릴 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const observable = {
  observers: {},
  subscribe(obj) {
    const id = Object.keys(this.observers).length + 1;
    this.observers[id] = obj;
    return id;
  },

  notify(data) {
    for (const o of Object.keys(this.observers)) {
      this.observers[o].listen(data);
    }
  }
}

const observer = {
  listen(data) {
    console.log(data);
  }
}
observable.subscribe(observer);
observable.notify({
  a: 1
});

데이터를 수신하는 observable 메서드가 있는 관찰자 개체가 listen 개체의 알림을 구독할 수 있도록 하는 observable 개체가 있습니다.

위에서 했던 것처럼 observable.notify 할 수 있을 때 관찰자 개체의 listen 메서드가 실행됩니다.

이런 식으로 통신은 모두 notify 메서드를 통해 통신하고 다른 곳에서는 이루어지지 않습니다.

구현이 노출되지 않으므로 긴밀한 결합이 없습니다.

메서드가 동일한 작업을 수행하는 한 observable 를 구독하는 관찰자 개체를 깨는 것에 대해 걱정할 필요가 없습니다.
unsubscribe에서 반환된 observable를 사용하여 id 개체에서 관찰자 개체를 제거하는 subscribe 메서드를 observers에 추가할 수도 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const observable = {
  observers: {},
  subscribe(obj) {
    const id = Object.keys(this.observers).length + 1;
    this.observers[id] = obj;
    return id;
  },

  notify(data) {
    for (const o of Object.keys(this.observers)) {
      this.observers[o].listen(data);
    }
  },

  unsubscribe(id) {
    delete this.observers[id];
  }
}

const observer = {
  listen(data) {
    console.log(data);
  }
}
const subscriberId = observable.subscribe(observer);
observable.notify({
  a: 1
});

observable.unsubscribe(subscriberId);

unsubscribe 목록에서 관찰자 개체를 제거할 수 있도록 this.observers 메서드를 추가했습니다.

구독을 취소하면 notify 다시 호출해도 구독하지 않은 관찰자에게 더 이상 알림을 받지 않습니다.

옵저버 패턴의 예는 많은 곳에서 사용됩니다.

관찰자 패턴의 또 다른 좋은 점은 클래스를 통해 아무 것도 통신하지 않는다는 것입니다.

느슨한 결합은 항상 단단한 결합보다 선호되어야 합니다.

우리는 위의 예에서 하나의 채널을 통해서만 통신하므로 관찰자 패턴은 결합이 얻을 수 있는 한 느슨합니다.

여기에는 마우스 클릭 및 키 누름과 같은 GUI 이벤트에 대한 메시지 대기열 및 이벤트 핸들러가 포함됩니다.

결론

관찰자 패턴을 사용하여 가능한 한 객체를 분리할 수 있습니다.

우리가 하는 일은 변경을 원하는 하나의 관찰 가능한 객체로부터 이벤트를 수신하는 것뿐입니다.

옵저버블은 옵저버 객체에 알림을 보냅니다.

팩토리 패턴을 사용하면 팩토리 함수를 생성하여 유사한 유형의 객체를 한 곳에서 생성할 수 있습니다.