JS ES6 디자인 패턴: 공장

디자인 패턴을 사용하면 코드를 보다 유연하게 변경하고 더 쉽게 변경할 수 있으며 유지 관리하기 쉽게 만들 수 있습니다. 이 포스트에서는 객체 지향 프로그래밍 방식을 사용하여 바닐라 ES6에서 팩토리 패턴을 사용하는 방법을 배웁니다.

팩토리 패턴이란?
팩토리 패턴은 생성적 디자인 패턴으로, 객체 생성을 다룬다. 팩토리 패턴에는 3가지 유형이 있습니다.

심플 팩토리

팩토리 방식

추상 공장입니다.

그들이 무엇인지 봅시다!

🔨 단순한 공장

인스턴스화 논리를 클라이언트에 노출하지 않고 인스턴스를 생성합니다.

언제 사용합니까?
객체를 생성하기 위해 동일한 코드를 반복하지 않으려면 대신 전용 팩토리에 배치하십시오.

예시
이 예제에서 우리는 private 필드가 있는 Monster를 반환하는 팩토리를 생성할 것입니다:

// Simple factory
class Monster {
  constructor(type, level) {
    this._type = type;
    this._level = level;
  }

  get type() {
    return this._type;
  }

  get level() {
    return this._level;
  }
}

const MonsterFactory = {
  makeMonster: function (type, level) {
    return new Monster(type, level);
  },
};

const dragon = MonsterFactory.makeMonster("Dragon", 17);
console.log(dragon.level);

🏭 공장 공법

인스턴스화 논리를 자식 클래스에 위임하는 방법을 제공합니다.

언제 사용합니까?
클라이언트가 필요한 정확한 하위 클래스가 무엇인지 모를 때.

예시
다음 예제에서는 Warrior 클래스에서 상속하는 Knight 및 Player 두 플레이어를 만듭니다. 각 플레이어에 대해 fightMonster() 클래스에 설명된 Player 메서드를 호출합니다. 생성되는 실제 몬스터는 플레이어 자신의 makeMonster 메서드 구현에 따라 다릅니다. Warrior는 생명력이 50인 Dragon 몬스터를 생성하고 공격 후 10포인트로 드롭합니다.

class Dragon {
  constructor() {
    this.health = 50;
  }

  attack() {
    this.health -= 10;
  }
}

class Snake {
  constructor() {
    this.health = 40;
  }

  attack() {
    this.health -= 20;
  }
}

class Player {
  fightMonster() {
    const monster = this.makeMonster();
    monster.attack();
    return monster;
  }
}

class Warrior extends Player {
  makeMonster() {
    return new Dragon();
  }
}

class Knight extends Player {
  makeMonster() {
    return new Snake();
  }
}

const player1 = new Warrior();
console.log(player1.fightMonster());

const player2 = new Knight();
player2.fightMonster();

추상 공장

공통 목표를 가진 개별 공장 그룹을 캡슐화합니다. 그것은 일반적인 사용법에서 개체 집합 구현의 세부 사항을 분리합니다.

의자와 소파가 있는 가구 가게가 있다고 상상해 보십시오. 예를 들어 다음과 같이 분류하고 싶다고 가정해 봅시다. 빅토리아 시대와 현대 가구. 미래의 공급업체가 카탈로그를 자주 업데이트하므로 기존 클래스를 변경하고 싶지 않습니다.

언제 사용합니까?
코드가 관련 제품의 다양한 제품군과 함께 작동해야 하지만 해당 제품의 구체적인 클래스에 의존하고 싶지 않은 경우, 미리 알 수 없거나 단순히 향후 확장성을 허용하고 싶을 수 있습니다.

예시
아래 예제에서는 팩토리를 사용하는 클래스Application를 설정합니다. 공장 유형에 따라 다릅니다. Windows 공장에서 특정 유형의 Button가 반환됩니다. 우리의 경우 a WinButton는 우리가 제공하는 공장으로 WinFactory 입니다.

class WinFactory {
  createButton() {
    return new WinButton();
  }
}

class MacFactory {
  createButton() {
    return new MacButton();
  }
}

class WinButton {
  paint() {
    console.log("Rendered a Windows button");
  }
}

class MacButton {
  paint() {
    console.log("Rendered a Mac button");
  }
}

class Application {
  factory;
  button;

  constructor(factory) {
    this.factory = factory;
  }

  createUI() {
    this.button = factory.createButton();
  }

  paint() {
    this.button.paint();
  }
}

let factory;
let OS = "Windows";

if (OS === "Windows") {
  factory = new WinFactory();
} else if (OS == "Mac") {
  factory = new MacFactory();
}

const app = new Application(factory);

app.createUI();
app.paint(); // Output: Rendered a Windows button

그리고 그게 다야!

이 튜토리얼을 따라 주셔서 감사합니다. 더 많은 디자인 패턴이 제공됩니다.