JavaScript 디자인 패턴 학습, 제 2판

7장. JavaScript 디자인 패턴

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이전 장에서는 세 가지 범주의 디자인 패턴에 대한 예를 제공했습니다. 이러한 디자인 패턴 중 일부는 웹 개발 맥락에서 관련성이 있거나 필수적입니다. JavaScript에 적용할 때 도움이 될 수 있는 몇 가지 시대를 초월한 패턴을 확인했습니다. 이 장에서는 다양한 클래식 및 모던 디자인 패턴의 JavaScript 구현을 살펴봅니다. 모든 섹션은창조적, 구조적, 행동적 세 가지범주 중 하나에 대해 다룹니다. 먼저 생성패턴부터 살펴보겠습니다.

패턴 선택

개발자들은 흔히 워크플로에 사용해야 하는 이상적인 패턴이나 패턴 집합이 있는지 궁금해합니다. 이 질문에 대한 정답은 하나도 없으며, 우리가 작업하는 각 스크립트와 웹 애플리케이션마다 개별적인 요구 사항이 다를 수 있습니다. 패턴이 구현에 실질적인 가치를 제공할 수 있는지 여부를 고려해야 합니다.

예를 들어, 일부 프로젝트는 옵저버 패턴이 제공하는 디커플링(애플리케이션의 일부가 서로 의존하는 정도를 줄이는 것)의 이점을 누릴 수 있습니다. 동시에 다른 프로젝트는 규모가 너무 작아 디커플링을 걱정할 필요가 없을 수도 있습니다.

즉, 디자인 패턴과 디자인 패턴이 가장 적합한 특정 문제를 확실히 파악하고 나면 애플리케이션 아키텍처에 통합하기가 훨씬 쉬워집니다.

크리에이티브 패턴

생성 패턴은 객체를 생성하는 메커니즘을 제공합니다. 다음 패턴을 다룰 것입니다:

• "생성자 패턴"

• "모듈 패턴"

• "드러나는 모듈 패턴"

• "싱글톤 패턴"

• "프로토타입 패턴"

• "공장 패턴"

생성자 패턴

생성자는 메모리가 할당된 후 새로 생성된 객체를 초기화하는 데 사용되는 특수 메서드 입니다. ES2015+에서는 생성자를 사용하여 클래스를 생성하는 구문이 JavaScript에 도입되었습니다. 이를 통해 기본 생성자를 사용하여 클래스의 인스턴스로 객체를 생성할 수 있습니다.

JavaScript에서는 거의 모든 것이 객체이며, 클래스는 상속을 위한 JavaScript의 프로토타입 접근 방식을 위한 구문 설탕입니다. 클래식 JavaScript에서는 객체 생성자에 가장 많은 관심을 가졌습니다. 그림 7-1은 이 패턴을 보여줍니다.

참고

객체 생성자는 특정 유형의 객체를 생성하는 데 사용되며, 객체가 처음 생성될 때 객체를 사용할 준비를 하고 멤버 속성 및 메서드의 값을 설정하는 인수를 받습니다.

그림 7-1. 생성자 패턴

개체 생성

JavaScript에서 새 객체를 만드는 세 가지 일반적인 방법은 다음과 같습니다:

// Each of the following options will create a new empty object
const newObject ...