자바스크립트 디자인 패턴

원문: JavaScript Design Patterns

이 기사에서는 유지보수하기 더 좋은 JavaScript 코드를 작성하는 데 사용할 수있는 디자인 패턴에 대해 설명합니다. JavaScript의 클래스와 객체, 프로토타입 상속, 클로저 등과 같은 개념을 기본적으로 이해하고 있다고 가정한다.

이 기사는 주제의 특성으로 인해 전체적으로 오랫동안 읽혀졌으므로 섹션을 독립적으로 유지하려고 노력했다. 따라서 특정 부분 (또는 이 경우 특정 패턴)을 골라 선택하고 관심이 없거나 잘 모르는 부분을 무시하면 된다.

참고 : 여기에 설명 된 모든 디자인 패턴을 구현하기위한 소스 코드는 GitHub 에 있다.

소개

우리는 문제를 해결하기 위한 코드를 작성한다. 이러한 문제는 일반적으로 많은 유사점을 가지고 있으며, 이를 해결하려고 할 때 몇 가지 공통적인 패턴이 있다. 디자인 패턴이 등장하는 이유이다.

디자인 패턴은 소프트웨어 설계에서 일반적으로 발생하는 문제에 대한 일반적인 재사용 솔루션 소프트웨어 공학에서 사용되는 용어이다.

디자인 패턴의 기본 개념은 처음부터 소프트웨어 엔지니어링 산업에서 사용되어 왔지만 실제로 공식화되지는 않았다. Erich Gamma, Richard Helm, Ralph Johnson, 그리고 John Vlissides의해 작성 된 디자인 패턴 : 재사용 가능한 객체 지향 소프트웨어의 요소 소프트웨어 엔지니어링에서 공식화 된 디자인 패턴 개념을 추진하는 데 중요한 역할을 했다. 이제 디자인 패턴은 소프트웨어 개발의 필수 요소이며 오랫동안 사용되어 왔다.

원본 책에는 23 개의 디자인 패턴이 도입되었다.

디자인 패턴은 여러 가지 이유로 유용하다. 디자인 패턴은 업계에서 입증 된 해결 방법을 제시한다. 널리 알려진 방식으로 문제를 해결하고 이를 정의하는 데 도움이 된 업계 최고의 개발자의 경험과 통찰력을 반영하는, 견고한 접근 방식이다. 패턴은 또한 개발 프로세스의 속도를 크게 높이는 동시에 코드를보다 재사용 가능하고 읽기 쉽게 만든다.

그러나 디자인 패턴은 결코 완성 된 솔루션이 아니다. 이것들은 단지 문제를 해결하는 방법이나 기법을 우리에게 제공할 뿐이다.

참고 : 이 기사에서는 주로 객체 지향 관점과 현대 JavaScript에서의 유용성에 관한 디자인 패턴에 대해 설명한다. 그렇기 때문에 GoF의 많은 클래식 패턴이 생략 될 수 있으며 Addy Osmani의 Learn JavaScript Design Patterns 와 같은 소스의 일부 최신 패턴 이 포함됩니다. 예제는 이해하기 쉽도록 단순하게 유지되므로 각 디자인 패턴의 최적화 된 구현이 아니다.

디자인 패턴의 범주

디자인 패턴은 일반적으로 세 가지 주요 그룹으로 분류됩니다.

창조 디자인 패턴

이름에서 알 수 있듯이 이러한 패턴은 객체 생성 메커니즘을 처리하기위한 것이다. 창조 디자인 패턴은 기본적으로 객체의 생성 과정을 제어함으로써 문제를 해결한다.

생성자 패턴, 팩토리 패턴, 프로토타입 패턴 및 싱글톤 패턴 과 같은 패턴에 대해 자세히 설명한다.

구조 설계 패턴

이러한 패턴은 클래스 및 객체 구성과 관련이 있다. 전체 시스템에 영향을주지 않고 하나 이상의 부품을 구조화하거나 재구성 할 수 있다. 즉, 기존 기능을 변경하지 않고도 새로운 기능을 얻을 수 있다.

어댑터 패턴, 복합 패턴, 데코레이터 패턴, 퍼사드 패턴, 플라이웨이트 패턴 및 프록시 패턴 과 같은 패턴에 대해 자세히 설명한다.

행동 디자인 패턴

이러한 패턴은 이 기종 객체 간의 통신을 개선하는 데 관련된다.

책임 사슬 패턴, 커맨드 패턴, 이터레이터 패턴, 중재자 패턴, 관찰자 ​​패턴, 상태 패턴, 전략 패턴 및 템플릿 패턴 과 같은 패턴에 대해 자세히 설명한다.

생성자 패턴 (Factory Pattern)

클래스 기반의 디자인 패턴이다. 생성자는 해당 함수로 정의된 메서드 및 속성으로 새 객체를 인스턴스화하는 데 사용할 수 있는 특수 함수이다.

고전적인 디자인 패턴은 아니다. 실제로, 대부분의 객체 지향 언어의 패턴이라기 보단 기본적인 언어 구성에 가깝다. 그러나 JavaScript에서는 생성자 함수나 "class" 정의 없이도 객체를 즉석에서 만들 수 있다. 따라서 이 단순한 하나의 패턴이 다른 패턴들의 기반이 된다고 생각한다.

생성자 패턴은 주어진 종류의 새 객체를 생성하기 위해 JavaScript에서 가장 일반적으로 사용되는 패턴 중 하나이다.

이 예제에서, name와 specialAbility와 같은 속성과 getDetails와 같은 메서드를 가진 Hero 클래스를 정의한다. 그런 다음 각 속성의 값을 인수로 전달하는 new 키워드로 생성자 메서드를 호출하여 객체 IronMan을 인스턴스화한다.

// traditional Function-based syntax
function Hero(name, specialAbility) {
  // setting property values
  this.name = name;
  this.specialAbility = specialAbility;

  // declaring a method on the object
  this.getDetails = function() {
    return this.name + ' can ' + this.specialAbility;
  };
}

// ES6 Class syntax
class Hero {
  constructor(name, specialAbility) {
    // setting property values
    this._name = name;
    this._specialAbility = specialAbility;

    // declaring a method on the object
    this.getDetails = function() {
      return `${this._name} can ${this._specialAbility}`;
    };
  }
}

// creating new instances of Hero
const IronMan = new Hero('Iron Man', 'fly');

console.log(IronMan.getDetails()); // Iron Man can fly

팩토리 패턴 (Factory Pattern)

팩토리 패턴은 또 다른 클래스 기반 생성 패턴이다. 객체 인스턴스화의 책임을 하위 클래스에 위임하는 범용 인터페이스를 제공한다.

이 패턴은 서로 다르지만 비슷한 특성이 많은 개체 컬렉션을 관리하거나 조작해야 할 때 자주 사용된다.

이 예에서는 매개변수를 취하는 메서드를 가진 BallFactory라는 팩토리 클래스를 만들고, 매개변수에 따라 객체 인스턴스화 책임을 각 클래스에 위임한다. 타입 매개변수가 "football" 또는 "soccer"인 경우, 객체 인스턴스화는 Football 클래스에서 처리하지만, "basketball" 객체 인스턴스화는 Basketball 클래스에서 처리한다.

class BallFactory {
  constructor() {
    this.createBall = function(type) {
      let ball;
      if (type === 'football' || type === 'soccer') ball = new Football();
      else if (type === 'basketball') ball = new Basketball();
      ball.roll = function() {
        return `The ${this._type} is rolling.`;
      };

      return ball;
    };
  }
}

class Football {
  constructor() {
    this._type = 'football';
    this.kick = function() {
      return 'You kicked the football.';
    };
  }
}

class Basketball {
  constructor() {
    this._type = 'basketball';
    this.bounce = function() {
      return 'You bounced the basketball.';
    };
  }
}

// creating objects
const factory = new BallFactory();

const myFootball = factory.createBall('football');
const myBasketball = factory.createBall('basketball');

console.log(myFootball.roll()); // The football is rolling.
console.log(myBasketball.roll()); // The basketball is rolling.
console.log(myFootball.kick()); // You kicked the football.
console.log(myBasketball.bounce()); // You bounced the basketball.

프로토타입 패턴 (Prototype Pattern)

이 패턴은 고전적인 객체지향 상속 대신 프로토타입 상속을 사용하므로 JavaScript에 특히 중요하다. 따라서 JavaScript의 강점을 따르며 기본 지원을 제공한다.

이 예제에는 JavaScript의 Object.create 기능을 사용하여 다른 객체 myCar를 생성하고 새 객체에 추가 속성 owner를 정의하기 위해 프로토타입으로 사용하는 car 객체가 있다.

// using Object.create as was recommended by ES5 standard
const car = {
  noOfWheels: 4,
  start() {
    return 'started';
  },
  stop() {
    return 'stopped';
  },
};

// Object.create(proto[, propertiesObject])

const myCar = Object.create(car, { owner: { value: 'John' } });

console.log(myCar.__proto__ === car); // true

싱글톤 패턴 (Singleton Pattern)

싱글톤은 하나의 클래스에 인스턴스만 존재할 수 있는 특별한 디자인 패턴이다. 싱글톤 클래스의 인스턴스가 없으면 새 인스턴스가 만들어지고 반환되지만 인스턴스가 이미 존재하면 기존 인스턴스에 대한 참조가 반환된다.

완벽한 실제 사례는 MongoDB의 유명한 Node.js ODM 라이브러리인 mongoose이다. mongoose는 싱글 톤 패턴을 사용한다.

이 예제에는 싱글톤 클래스인 Database가 있다. 먼저 new 연산자를 사용하여 Database 클래스 생성자를 호출해 객체 mongo를 만든다. 이번에는 객체가 없기 때문에 객체가 인스턴스화 된다. 두 번째로 mysql 객체를 만들 땐, 새 객체가 인스턴스화되지 않고 이전에 인스턴스화 된 객체, 즉 mongo 객체에 대한 참조가 반환된다.

class Database {
  constructor(data) {
    if (Database.exists) {
      return Database.instance;
    }
    this._data = data;
    Database.instance = this;
    Database.exists = true;
    return this;
  }

  getData() {
    return this._data;
  }

  setData(data) {
    this._data = data;
  }
}

// usage
const mongo = new Database('mongo');
console.log(mongo.getData()); // mongo

const mysql = new Database('mysql');
console.log(mysql.getData()); // mongo

어댑터 패턴 (Adapter Pattern)

어댑터 패턴은 한 클래스의 인터페이스가 다른 클래스의 인터페이스로 변환되는 구조적 패턴이다. 이 패턴을 사용하면 호환되지 않는 인터페이스 때문에 다른 방법으로는 불가능했던 클래스가 함께 작동하도록 한다.

이 패턴은 종종 기존의 다른 오래된 API가 여전히 작동 할 수 있도록, 새로운 리팩토링 된 API에 대한 wrapper를 작성하는 데 사용된다. 이는 일반적으로 새로운 구현 또는 코드 리팩토링 (성능 향상과 같은 이유로 수행)으로 인해 다른 공용 API가 생성되는 반면, 시스템의 다른 부분은 여전히 ​​기존 API를 사용하고 함께 작동하도록 조정되어야하는 경우에 수행된다.

이 예제에는 이전 API (OldCalculator 클래스)와 새 API (NewCalculator 클래스)가 있다. OldCalculator 클래스는 덧셈과 뺄셈을위한 operation 메서드를 제공하는 반면 NewCalculator는 덧셈과 뺄셈을 위한 별도의 메서드를 제공한다. Adapter 클래스 CalcAdapter는 NewCalculator를 감싸서(wrap) operation 메소드를 공용 API에 추가하는 동시에 자체 덧셈 및 뺄셈 구현을 사용한다.

// old interface
class OldCalculator {
  constructor() {
    this.operations = function(term1, term2, operation) {
      switch (operation) {
        case 'add':
          return term1 + term2;
        case 'sub':
          return term1 - term2;
        default:
          return NaN;
      }
    };
  }
}

// new interface
class NewCalculator {
  constructor() {
    this.add = function(term1, term2) {
      return term1 + term2;
    };
    this.sub = function(term1, term2) {
      return term1 - term2;
    };
  }
}

// Adapter Class
class CalcAdapter {
  constructor() {
    const newCalc = new NewCalculator();

    this.operations = function(term1, term2, operation) {
      switch (operation) {
        case 'add':
          // using the new implementation under the hood
          return newCalc.add(term1, term2);
        case 'sub':
          return newCalc.sub(term1, term2);
        default:
          return NaN;
      }
    };
  }
}

// usage
const oldCalc = new OldCalculator();
console.log(oldCalc.operations(10, 5, 'add')); // 15

const newCalc = new NewCalculator();
console.log(newCalc.add(10, 5)); // 15

const adaptedCalc = new CalcAdapter();
console.log(adaptedCalc.operations(10, 5, 'add')); // 15;

복합 패턴 (Composite pattern)

트리와 같은 구조로 객체를 구성하여, 전체 부분의 계층 구조를 나타내는 구조 설계 패턴이다. 이 패턴에서 트리와 같은 구조의 각 노드는 개별 객체이거나 구성된 객체 모음 일 수 있다. 어쨌든 각 노드는 균일하게 처리된다.

이 패턴을 시각화하는 것은 약간 복잡하다. 이것을 이해하는 가장 쉬운 방법은 다단계 메뉴의 예를 보는 것이다. 각 노드는 자식으로 여러 옵션이 있는 별개의 옵션 일 수도 있고 메뉴 자체일 수 있다. 자식이 있는 노드 컴포넌트는 복합 컴포넌트(composite component)이고 자식이 없는 노드 컴포넌트는 리프 컴포넌트(leaft component)이다.

이 예제에서는 필요한 공통 기능만을 구현하고 다른 메서드를 추상화하는 Component의 기본 클래스를 작성한다. 기본 클래스에는 재귀를 사용하여 하위 클래스로 만든 복합 트리 구조를 통과하는 static 메서드도 있다. 그런 다음 기본 클래스를 확장하는 두 개의 서브 클래스인 자식이 없는 Leaf와 자식을 가질 수 있는 Composite를 만든다. 두 개의 서브 클래스는 복합 구조 (이 경우 트리)를 작성하는 데 사용된다.

class Component {
  constructor(name) {
    this._name = name;
  }

  getNodeName() {
    return this._name;
  }

  // abstract methods that need to be overridden
  getType() {}

  addChild(component) {}

  removeChildByName(componentName) {}

  removeChildByIndex(index) {}

  getChildByName(componentName) {}

  getChildByIndex(index) {}

  noOfChildren() {}

  static logTreeStructure(root) {
    let treeStructure = '';
    function traverse(node, indent = 0) {
      treeStructure += `${'--'.repeat(indent)}${node.getNodeName()}\n`;
      indent++;
      for (let i = 0, length = node.noOfChildren(); i < length; i++) {
        traverse(node.getChildByIndex(i), indent);
      }
    }

    traverse(root);
    return treeStructure;
  }
}

class Leaf extends Component {
  constructor(name) {
    super(name);
    this._type = 'Leaf Node';
  }

  getType() {
    return this._type;
  }

  noOfChildren() {
    return 0;
  }
}

class Composite extends Component {
  constructor(name) {
    super(name);
    this._type = 'Composite Node';
    this._children = [];
  }

  getType() {
    return this._type;
  }

  addChild(component) {
    this._children = [...this._children, component];
  }

  removeChildByName(componentName) {
    this._children = [...this._children].filter(component => component.getNodeName() !== componentName);
  }

  removeChildByIndex(index) {
    this._children = [...this._children.slice(0, index), ...this._children.slice(index + 1)];
  }

  getChildByName(componentName) {
    return this._children.find(component => component.name === componentName);
  }

  getChildByIndex(index) {
    return this._children[index];
  }

  noOfChildren() {
    return this._children.length;
  }
}

// usage
const tree = new Composite('root');
tree.addChild(new Leaf('left'));
const right = new Composite('right');
tree.addChild(right);
right.addChild(new Leaf('right-left'));
const rightMid = new Composite('right-middle');
right.addChild(rightMid);
right.addChild(new Leaf('right-right'));
rightMid.addChild(new Leaf('left-end'));
rightMid.addChild(new Leaf('right-end'));

// log
console.log(Component.logTreeStructure(tree));
/*
root
--left
--right
----right-left
----right-middle
------left-end
------right-end
----right-right
*/

데코레이터 패턴 (Decorator Pattern)

이 패턴은 기존 클래스에 동작 또는 기능을 동적으로 추가하는 것에 초점을 둔 구조 설계 패턴이다. 클래스 상속의 또다른 대안이다.

JavaScript를 사용하면 객체에 메서드와 속성을 동적으로 추가할 수 있기 때문에, JavaScript에서 데코레이터 유형 동작은 매우 쉽게 구현할 수 있다. 가장 간단한 접근방식은 객체의 속성을 추가하는 것이지만, 재사용 할 수는 없을 것이다.

실제로, JavaScript 언어에 데코레이터를 추가하라는 제안이 있다. JavaScript의 데코레이터에 대한 Addy Osmani의 게시물 을 살펴보자 .

제안서 자체 에 대해 읽으려면 여기.

이 예에서는 Book 클래스를 만든다. 또한 book 객체를 인자로 받고 "꾸며진(decorated)" book 객체를 반환하는 두 개의 데코레이터 함수를 추가로 만든다. 하나의 새로운 속성과 하나의 새로운 함수를 추가하는 giftWrap과 하나의 새로운 속성을 추가하고 하나의 기존 속성의 값을 편집하는 hardbindBook이다.

class Book {
  constructor(title, author, price) {
    this._title = title;
    this._author = author;
    this.price = price;
  }

  getDetails() {
    return `${this._title} by ${this._author}`;
  }
}

// decorator 1
function giftWrap(book) {
  book.isGiftWrapped = true;
  book.unwrap = function() {
    return `Unwrapped ${book.getDetails()}`;
  };

  return book;
}

// decorator 2
function hardbindBook(book) {
  book.isHardbound = true;
  book.price += 5;
  return book;
}

// usage
const alchemist = giftWrap(new Book('The Alchemist', 'Paulo Coelho', 10));

console.log(alchemist.isGiftWrapped); // true
console.log(alchemist.unwrap()); // 'Unwrapped The Alchemist by Paulo Coelho'

const inferno = hardbindBook(new Book('Inferno', 'Dan Brown', 15));

console.log(inferno.isHardbound); // true
console.log(inferno.price); // 20

퍼사드 패턴 (Facade Pattern)

퍼사드 패턴은 JavaScript 라이브러리에서 널리 사용되는 구조 설계 패턴이다. 퍼사드 패턴은 하위 시스템이나 하위 클래스의 복잡성으로부터 벗어나 사용 편의성을 위해 통합되고 단순한 공공 지향 인터페이스를 제공하기 위해 사용된다.

이 패턴의 사용은 jQuery와 같은 라이브러리에서 매우 일반적이다.

이 예에서는 ComplaintRegistry 클래스를 사용하여 공개 API를 만든다. 클라이언트가 사용할 하나의 메소드, 즉 registerComplaint 만 노출한다. registerComplaint는 내부적으로 type 인수에 따라 ProductComplaint 또는 ServiceComplaint 중 하나의 필요한 객체를 인스턴스화 처리한다. 또한 고유 ID 생성, 불만 사항을 메모리에 저장하는 등의 다른 모든 복잡한 기능도 처리한다. 그러나 이러한 모든 복잡성은 퍼사드 패턴을 사용하여 숨겨져 있다.

let currentId = 0;

class ComplaintRegistry {
  registerComplaint(customer, type, details) {
    const id = ComplaintRegistry._uniqueIdGenerator();
    let registry;
    if (type === 'service') {
      registry = new ServiceComplaints();
    } else {
      registry = new ProductComplaints();
    }
    return registry.addComplaint({ id, customer, details });
  }

  static _uniqueIdGenerator() {
    return ++currentId;
  }
}

class Complaints {
  constructor() {
    this.complaints = [];
  }

  addComplaint(complaint) {
    this.complaints.push(complaint);
    return this.replyMessage(complaint);
  }

  getComplaint(id) {
    return this.complaints.find(complaint => complaint.id === id);
  }

  replyMessage(complaint) {}
}

class ProductComplaints extends Complaints {
  constructor() {
    super();
    if (ProductComplaints.exists) {
      return ProductComplaints.instance;
    }
    ProductComplaints.instance = this;
    ProductComplaints.exists = true;
    return this;
  }

  replyMessage({ id, customer, details }) {
    return `Complaint No. ${id} reported by ${customer} regarding ${details} have been filed with the Products Complaint Department. Replacement/Repairment of the product as per terms and conditions will be carried out soon.`;
  }
}

class ServiceComplaints extends Complaints {
  constructor() {
    super();
    if (ServiceComplaints.exists) {
      return ServiceComplaints.instance;
    }
    ServiceComplaints.instance = this;
    ServiceComplaints.exists = true;
    return this;
  }

  replyMessage({ id, customer, details }) {
    return `Complaint No. ${id} reported by ${customer} regarding ${details} have been filed with the Service Complaint Department. The issue will be resolved or the purchase will be refunded as per terms and conditions.`;
  }
}

// usage
const registry = new ComplaintRegistry();

const reportService = registry.registerComplaint('Martha', 'service', 'availability');
// 'Complaint No. 1 reported by Martha regarding availability have been filed with the Service Complaint Department. The issue will be resolved or the purchase will be refunded as per terms and conditions.'

const reportProduct = registry.registerComplaint('Jane', 'product', 'faded color');
// 'Complaint No. 2 reported by Jane regarding faded color have been filed with the Products Complaint Department. Replacement/Repairment of the product as per terms and conditions will be carried out soon.'

플라이웨이트 패턴 (Flyweight Pattern)

플라이웨이트 패턴은 세밀한 객체(fine-grained objects)를 통해효율적인 데이터 공유에 중점을 둔 구조 설계 패턴입니다. 효율성 및 메모리 절약 목적으로 사용된다.

이 패턴은 모든 종류의 캐싱 목적으로 사용할 수 있다. 실제로 최신 브라우저는 플라이웨이트 패턴의 변형을 사용하여 동일한 이미지를 두 번로드하지 못하게 한다.

이 예에서는 아이스크림 맛에 관한 데이터를 공유하기위한 세밀한 플라이급 클래스 와 IcecreamFactory해당 플라이급 객체를 만드는 팩토리 클래스 를 만듭니다. 메모리 절약을 위해 동일한 객체가 두 번 인스턴스화되면 객체가 재활용됩니다. 플라이급 구현의 간단한 예입니다.

이 예에서는 아이스크림 맛에 관한 데이터를 공유하기위한 세밀한 플라이웨이트 클래스 Icecream과 해당 플라이웨이트 객체를 만들기위한 팩토리 클래스 IcecreamFactory를 만든다. 메모리 절약을 위해 동일한 객체가 두 번 인스턴스화되면 객체가 재활용된다. 플라이웨이트 패턴 구현의 간단한 예이다.

// flyweight class
class Icecream {
  constructor(flavour, price) {
    this.flavour = flavour;
    this.price = price;
  }
}

// factory for flyweight objects
class IcecreamFactory {
  constructor() {
    this._icecreams = [];
  }

  createIcecream(flavour, price) {
    let icecream = this.getIcecream(flavour);
    if (icecream) {
      return icecream;
    } else {
      const newIcecream = new Icecream(flavour, price);
      this._icecreams.push(newIcecream);
      return newIcecream;
    }
  }

  getIcecream(flavour) {
    return this._icecreams.find(icecream => icecream.flavour === flavour);
  }
}

// usage
const factory = new IcecreamFactory();

const chocoVanilla = factory.createIcecream('chocolate and vanilla', 15);
const vanillaChoco = factory.createIcecream('chocolate and vanilla', 15);

// reference to the same object
console.log(chocoVanilla === vanillaChoco); // true

프록시 패턴 (Proxy Pattern)

프록시 패턴는 이름처럼 동작하는 구조적 디자인 패턴입니다. 대상 객체를 또다른 객체가 접근할 때, 접근을 통제하는 대리자 역할을 한다.

일반적으로 대상 개체가 제약을 받고 모든 책임을 효율적으로 처리하지 못할 수있는 상황에서 사용된다. 이 경우 프록시는 일반적으로 클라이언트에 동일한 인터페이스를 제공하고 과도한 압력을 피하기 위해 대상 객체에 대한 제어된 접근을 지원하는 간접적인 수준을 추가한다.

프록시 패턴은 네트워크 요청이 많은 애플리케이션으로 작업 할 때 불필요하거나 중복 된 네트워크 요청을 피하는 데 매우 유용하다.

이 예에서는 Proxy 및 Reflect의 두 가지 새로운 ES6 기능을 사용 합니다. Proxy 객체는 JavaScript 객체의 기본 작업에 대한 사용자 지정 동작을 정의하는 데 사용됩니다 (함수 및 배열도 JavaScript의 객체 임). Proxy 객체는 Proxy 객체 를 만드는 데 사용할 수있는 생성자 메서드이고, 프록시를 할 target 객체와 필요한 사용자 지정을 정의할 handler 객체를 인수로 받는다. handler 객체는 사용자 정의 동작을 추가하는 데 사용되는 get, set, has, apply 같은 일부 트랩 기능을 정의 할 수 있다. 반면에, Reflect는 Proxy의 handler 객체가 지원하는 유사한 메서드를 스스로 static 메서드로 제공하는 내장 객체이다. 생성자가 아니다. static 메서드는 가로채기 가능한 자바스크립트 작업에 사용된다.

이제 네트워크 요청 같은 함수를 만든다. 우리는 그것을 networkFetch로 명명했다. url을 인수로 받아 그에 따라 응답한다. 캐시를 사용할 수없는 경우에만 네트워크에서 응답을 받는 프록시를 구현하려고한다. 그렇지 않으면 캐시에서 응답을 반환한다.

캐시 전역 변수는 캐시 된 응답을 저장합니다. target으로 원래 networkFetch를 사용하여 proxiedNetworkFetch라는 프록시를 작성하고 handler 객체에서 apply 메서드를 사용하여 함수 호출을 프록시 한다. apply 메서드는 target 객체 자체에 전달된다. thisArg값과 args는 배열과 같은 구조로 전달된다.

전달 된 url 인수가 캐시에 있는지 확인한다. 캐시에 존재하면 원래 대상 함수를 호출하지 않고 응답을 반환한다. 그렇지 않으면, 우리는 Reflect.apply 메서드를 사용하여 thisArg와 args를 전달하며 target 함수를 호출한다.

// Target
function networkFetch(url) {
  return `${url} - Response from network`;
}

// Proxy
// ES6 Proxy API = new Proxy(target, handler);
const cache = [];
const proxiedNetworkFetch = new Proxy(networkFetch, {
  apply(target, thisArg, args) {
    const urlParam = args[0];
    if (cache.includes(urlParam)) {
      return `${urlParam} - Response from cache`;
    } else {
      cache.push(urlParam);
      return Reflect.apply(target, thisArg, args);
    }
  },
});

// usage
console.log(proxiedNetworkFetch('dogPic.jpg')); // 'dogPic.jpg - Response from network'
console.log(proxiedNetworkFetch('dogPic.jpg')); // 'dogPic.jpg - Response from cache'

책임 사슬 패턴 (Chain of Responsibility Pattern)

이것은 느슨하게 연결된 객체 체인을 제공하는 행동 디자인 패턴이다. 이러한 각 객체는 클라이언트 요청에 따라 작동하거나 처리하도록 선택할 수 있다.

책임 사슬 패턴의 좋은 예는 이벤트가 일련의 중첩 된 DOM 요소를 통해 전파되는 DOM에서의 이벤트 버블링(bubbling)인데, 그 중 하나는 이벤트를 수신하고 이벤트에 대해 수행하기 위해 "이벤트 리스너"가 첨부되어있을 수 있다.

이 예제에서, 우리는 CumulativeSum 클래스를 생성하는데, 이 클래스는 옵션으로 initialValue를 받아 인스턴스화 할 수 있다. 전달 된 값을 객체의 sum 속성에 추가하고 add 메소드 호출의 체인을 허용하기 위해 object 자체를 반환하는 add 메서드가 있다.

책임 사슬 패턴은 jQuery에서도 볼 수있는 일반적인 패턴으로, jQuery 객체에 대한 거의 모든 메소드 호출이 jQuery 객체를 반환하므로 메소드 호출을 함께 연결할 수 있습니다.

class CumulativeSum {
  constructor(intialValue = 0) {
    this.sum = intialValue;
  }

  add(value) {
    this.sum += value;
    return this;
  }
}

// usage
const sum1 = new CumulativeSum();
console.log(sum1.add(10).add(2).add(50).sum); // 62


const sum2 = new CumulativeSum(10);
console.log(sum2.add(10).add(20).add(5).sum); // 45

커맨드 패턴 (Command Pattern)

커맨드 패턴은 동작 또는 동작을 객체로 캡슐화하는 것을 목표로하는 행동 디자인 패턴이다. 이 패턴을 사용하면 작업을 요청하거나 실제 구현을 처리하거나 처리하는 객체에서 메소드를 호출하는 객체를 분리하여 시스템과 클래스를 느슨하게 연결할 수 있다.

클립 보드 API가 커맨드 패턴과 유사합니다. Redux 사용자인 경우, 이미 커맨드 패턴을 사용해본 것이다. 멋진 시간 여행 디버깅 기능을 허용하는 작업은, 작업을 다시 실행하거나 실행 취소하도록 추적 할 수있는 캡슐화 된 작업일 뿐이다. 따라서 시간 여행이 가능해졌다.

이 예제에는 여러 메서드가있는 SpecialMath 클래스와 해당 주제에서 실행될 명령, 즉 SpecialMath 클래스의 객체를 캡슐화하는 Command 클래스가 있다. Command 클래스는 실행 된 모든 명령을 추적하여 실행 취소 및 재실행행 유형 작업을 포함하도록 기능을 확장하는 데 사용할 수 있다.

class SpecialMath {
  constructor(num) {
    this._num = num;
  }

  square() {
    return this._num ** 2;
  }

  cube() {
    return this._num ** 3;
  }

  squareRoot() {
    return Math.sqrt(this._num);
  }
}

class Command {
  constructor(subject) {
    this._subject = subject;
    this.commandsExecuted = [];
  }
  execute(command) {
    this.commandsExecuted.push(command);
    return this._subject[command]();
  }
}

// usage
const x = new Command(new SpecialMath(5));
x.execute('square');
x.execute('cube');

console.log(x.commandsExecuted); // ['square', 'cube']

이터레이터 패턴 (Iterator Pattern)

이터레이터 패턴은 기본 표현을 노출시키지 않고 집계 객체 요소에 순차적으로 액세스하는 방법을 제공하는 행동 설계 패턴이다.

이터레이터들은 우리가 끝에 도달할 때까지 next()를 호출하여 한 번에 하나씩 순서가 정해진 일련의 가치들을 밟아 나가는 특별한 종류의 행동을 한다. ES6에서 Iterator와 Generator의 도입으로 인해 이터레이터 패턴의 구현이 매우 간단해졌다.

아래에 두 가지 예가 있습니다. 첫째, 하나 IteratorClass는 Iterator 스펙을 사용하고, 다른 하나 iteratorUsingGenerator는 Generator 함수를 사용한다.

Symbol.iterator( Symbol은 기본 데이터 타입의 새로운 종류의) 객체에 대한 기본 반복자를 지정하는 데 사용된다. 컬렉션이 for...of 루핑 구성을 사용할 수 있도록 Symbol.iterator는 정의해야한다. 첫 번째 예에서는 생성자를 정의하여 일부 데이터 모음을 저장 한 다음 반복을 위한 next 메소드가 포함 된 객체를 반환하는 Symbol.iterator를 정의했다.

두 번째 경우, 두 번째 경우에는 Generator 함수를 정의하여 데이터 배열을 전달하고 next 및 yield를 사용하여 해당 요소를 반복적으로 반환한다. 제너레이터 함수는 이터레이터의 팩토리로 작동하는 특수한 유형의 함수이며, 자체 내부 상태를 명시 적으로 유지하고 반복적으로 값을 산출 할 수 있다. 자체 실행주기를 일시중지했다가 다시 시작할 수 있다.

// using Iterator
class IteratorClass {
  constructor(data) {
    this.index = 0;
    this.data = data;
  }

  [Symbol.iterator]() {
    return {
      next: () => {
        if (this.index < this.data.length) {
          return { value: this.data[this.index++], done: false };
        } else {
          this.index = 0; // to reset iteration status
          return { done: true };
        }
      },
    };
  }
}

// using Generator
function* iteratorUsingGenerator(collection) {
  var nextIndex = 0;

  while (nextIndex < collection.length) {
    yield collection[nextIndex++];
  }
}

// usage
const gen = iteratorUsingGenerator(['Hi', 'Hello', 'Bye']);

console.log(gen.next().value); // 'Hi'
console.log(gen.next().value); // 'Hello'
console.log(gen.next().value); // 'Bye'

중재자 패턴 (Mediator Pattern)

중재자 패턴은 일련의 객체가 서로 상호 작용하는 방식을 캡슐화하는 행동 디자인 패턴입니다. 느슨한 결합을 촉진하여 객체가 서로 명시적으로 참조되지 않도록하여 객체 그룹에 대한 중앙 권한을 제공합니다.

이 예에서는 Airplane 객체가 서로 상호 작용하는 방식을 제어하는 ​​중재자로 TrafficTower가 있습니다. 모든 Airplane 객체는 TrafficTower 객체에 등록되며, Airplane 객체가 다른 모든 Airplane 객체의 좌표 데이터를받는 방법을 처리하는 중재자 클래스 객체이다.

class TrafficTower {
  constructor() {
    this._airplanes = [];
  }

  register(airplane) {
    this._airplanes.push(airplane);
    airplane.register(this);
  }

  requestCoordinates(airplane) {
    return this._airplanes.filter(plane => airplane !== plane).map(plane => plane.coordinates);
  }
}

class Airplane {
  constructor(coordinates) {
    this.coordinates = coordinates;
    this.trafficTower = null;
  }

  register(trafficTower) {
    this.trafficTower = trafficTower;
  }

  requestCoordinates() {
    if (this.trafficTower) return this.trafficTower.requestCoordinates(this);
    return null;
  }
}

// usage
const tower = new TrafficTower();

const airplanes = [new Airplane(10), new Airplane(20), new Airplane(30)];
airplanes.forEach(airplane => {
  tower.register(airplane);
});

console.log(airplanes.map(airplane => airplane.requestCoordinates())) 
// [20, 30], [10, 30], [10, 20](/Lee-hyuna/33-js-concepts-kr/wiki/20,-30],-[10,-30],-[10,-20)

관찰자 패턴 (Observer Pattern)

하나의 객체(publisher)가 상태를 변경할 때 다른 모든 종속 개체(subscribers)에게 자동으로 알리고 업데이트 되도록 객체 간의 일대다 종속성을 정의하는 중요한 동작 디자인 패턴이다. 이것을 PubSub (publisher / subscribers) 또는 이벤트 디스패처 / 리스너 패턴이라고도 한다. publishers는 때때로 주제라고하며 subscribers는 때때로 관찰자라고합니다.

addEventListener또는 jQuery를 사용했다면 이미이 패턴에 어느 정도 익숙 할 것이다.

이 예에서는 subscriber 컬렉션에서 Observer 클래스의 객체를 추가하고 제거하는 메서드가 있는 간단한 Subject 클래스를 만든다. 또한 Subject 클래스 객체의 변경 사항을 구독 한Observer에 전파하는 fire 메서드가 있다. 반면, Observer 클래스는 내부 상태와 구독한 Subject에서 전파된 변경에 따라 내부 상태를 업데이트하는 메서드를 갖는다.

class Subject {
  constructor() {
    this._observers = [];
  }

  subscribe(observer) {
    this._observers.push(observer);
  }

  unsubscribe(observer) {
    this._observers = this._observers.filter(obs => observer !== obs);
  }

  fire(change) {
    this._observers.forEach(observer => {
      observer.update(change);
    });
  }
}

class Observer {
  constructor(state) {
    this.state = state;
    this.initialState = state;
  }

  update(change) {
    let state = this.state;
    switch (change) {
      case 'INC':
        this.state = ++state;
        break;
      case 'DEC':
        this.state = --state;
        break;
      default:
        this.state = this.initialState;
    }
  }
}

// usage
const sub = new Subject();

const obs1 = new Observer(1);
const obs2 = new Observer(19);

sub.subscribe(obs1);
sub.subscribe(obs2);

sub.fire('INC');

console.log(obs1.state); // 2
console.log(obs2.state); // 20

상태 패턴 (State Pattern)

내부 상태 변경에 따라 객체의 동작을 변경할 수 있는 행동 디자인 패턴아다. 상태 패턴 클래스가 반환 한 객체는 클래스를 변경하는 것으로 인다. 각 객체 유형이 특정 상태를 나타내는 제한된 객체 세트에 상태 별 로직을 제공한다.

이 패턴을 이해하기 위해 신호등의 간단한 예를 들어보자. TrafficLight 클래스는 내부 상태 (Red, Yellow 또는 Green 클래스의 객체)를 기준으로 반환하는 객체를 변경한다.

class TrafficLight {
  constructor() {
    this.states = [new GreenLight(), new RedLight(), new YellowLight()];
    this.current = this.states[0];
  }

  change() {
    const totalStates = this.states.length;
    let currentIndex = this.states.findIndex(light => light === this.current);
    if (currentIndex + 1 < totalStates) this.current = this.states[currentIndex + 1];
    else this.current = this.states[0];
  }

  sign() {
    return this.current.sign();
  }
}

class Light {
  constructor(light) {
    this.light = light;
  }
}

class RedLight extends Light {
  constructor() {
    super('red');
  }

  sign() {
    return 'STOP';
  }
}

class YellowLight extends Light {
  constructor() {
    super('yellow');
  }

  sign() {
    return 'STEADY';
  }
}

class GreenLight extends Light {
	constructor() {
		super('green');
	}

	sign() {
		return 'GO';
	}
}

// usage
const trafficLight = new TrafficLight();

console.log(trafficLight.sign()); // 'GO'
trafficLight.change();

console.log(trafficLight.sign()); // 'STOP'
trafficLight.change();

console.log(trafficLight.sign()); // 'STEADY'
trafficLight.change();

console.log(trafficLight.sign()); // 'GO'
trafficLight.change();

console.log(trafficLight.sign()); // 'STOP'

전략 패턴 (Strategy Pattern)

특정 작업에 대한 대체 알고리즘을 캡슐화 할 수 있는 행동 설계 패턴이다. 또한 알고리즘 제품군을 정의하고 클라이언트 간섭이나 지식없이 런타임에 상호 교환 할 수있는 방식으로 알고리즘을 캡슐화한다.

아래 예에서는 출근을 위한 모든 전략을 캡슐화하기 위해 Commute 클래스를 만든다. 그런 다음 Bus , PersonalCar 및 Taxi의 세 가지 전략을 정의한다. 이 패턴을 사용하여 런타임에 Commute 객체의 trave 메서드에 사용하도록 구현을 바꿀 수 있다.

// encapsulation
class Commute {
  travel(transport) {
    return transport.travelTime();
  }
}

class Vehicle {
  travelTime() {
    return this._timeTaken;
  }
}

// strategy 1
class Bus extends Vehicle {
  constructor() {
    super();
    this._timeTaken = 10;
  }
}

// strategy 2
class Taxi extends Vehicle {
  constructor() {
    super();
    this._timeTaken = 5;
  }
}

// strategy 3
class PersonalCar extends Vehicle {
  constructor() {
    super();
    this._timeTaken = 3;
  }
}

// usage
const commute = new Commute();

console.log(commute.travel(new Taxi())); // 5
console.log(commute.travel(new Bus())); // 10

템플릿 패턴 (Template Pattern)

이는 알고리즘의 골격 또는 작업 구현을 정의하지만 일부 단계를 서브 클래스로 연기하는 동작 기반 디자인 패턴이다. 서브 클래스는 알고리즘의 외부 구조를 변경하지 않고 알고리즘의 특정 단계를 재정의 할 수 있다.

이 예제에는 work 메서드를 부분적으로 구현하는 Template 클래스 Employee가 있다. 서브 클래스가 전체적으로 작동하도록 메서드를 구현해야한다. 그런 다음 템플릿 클래스를 확장하고 구현 격차를 메우기 위해 필요한 메소드를 구현하는 두 개의 서브 클래스 인 Developer및 Tester를 만든다.

class Employee {
  constructor(name, salary) {
    this._name = name;
    this._salary = salary;
  }

  work() {
    return `${this._name} handles ${this.responsibilities() /* gap to be filled by subclass */}`;
  }

  getPaid() {
    return `${this._name} got paid ${this._salary}`;
  }
}

class Developer extends Employee {
  constructor(name, salary) {
    super(name, salary);
  }

  // details handled by subclass
  responsibilities() {
    return 'application development';
  }
}

class Tester extends Employee {
  constructor(name, salary) {
    super(name, salary);
  }

  // details handled by subclass
  responsibilities() {
    return 'testing';
  }
}

// usage
const dev = new Developer('Nathan', 100000);
console.log(dev.getPaid()); // 'Nathan got paid 100000'
console.log(dev.work()); // 'Nathan handles application development'

const tester = new Tester('Brian', 90000);
console.log(tester.getPaid()); // 'Brian got paid 90000'
console.log(tester.work()); // 'Brian handles testing'

결론

디자인 패턴은 소프트웨어 엔지니어링에 중요하며 일반적인 문제를 해결하는 데 매우 도움이 될 수 있다. 그러나 이것은 매우 광범위한 주제이며, 디자인 패턴에 관한 모든 것을 이 글에 포함시키는 것은 불가능했다. 따라서 모던 JavaScript를 작성하는 데 실제로 도움이 될 수있는 항목에 대해 짧고 간결하게 이야기하도록 골랐다. 더 자세히 알아 보려면 아래의 책들을 살펴보길 바란다.

1. 디자인 패턴 : 재사용 가능한 객체 지향 소프트웨어의 요소 by Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides (Gang of Four)
2. 자바 스크립트 디자인 패턴 알아보기 by Addy Osmani
3. 자바 스크립트 패턴 by Stoyan Stefanov