자바스크립트 디자인 패턴의 데코레이터 패턴 소개_javascript 기술

데코레이터 패턴 설명

설명: 하나의 클래스를 사용하여 다른 클래스의 기능 개체를 전후에 동적으로 수정하고 여기에 몇 가지 추가 기능을 추가합니다. 이는 클래스 개체의 기능을 장식하는 것이며 장식된 클래스는 장식된 클래스와 관련됩니다. 클래스 클래스는 동일한 액세스 인터페이스 메소드(함수)를 가져야 합니다. 동적 객체 지향 클래스에서 구현은 일반적으로 동일한 인터페이스를 구현함으로써 제한됩니다. 장식 클래스는 해당 클래스에 사용되는 참조를 가져야 합니다. 데코레이팅된 클래스의 메소드는 해당 데코레이팅된 클래스의 메소드를 호출한 후 이를 수정합니다.

시나리오 예:

1> 예를 들어, 우리가 인생에서 입는 옷은 셔츠, 양복 재킷, 바지, 넥타이, 그리고 추가로 입는 아름다운 가죽 신발은 앞부분을 장식하는 것입니다. 아니면 전신 ;

2> 예를 들어, 로그를 작성하거나 사용자 로그인에 사용할 수 있는 함수형 메서드가 있습니다. 로그를 작성하기 전이나 로그인에 성공한 후에 현재 운영자 정보를 얻어야 할 수도 있습니다. 로그를 작성하기 전의 추가 작업은 일반적으로 로그인 성공 후 로그를 작성하는 목적입니다.

따라서 데코레이터 패턴은 두 가지가 유사한 작업을 수행하는 시나리오를 구현하는 데 사용됩니다. 이는 장식된 기능 객체에 대한 데코레이터의 확장이며 본질은 원래 방법과 동일한 기능 범위입니다.

소스 코드 예시

1. 데코레이터 수업

코드 복사 코드는 다음과 같습니다.

함수 Wear() {
 
}
Wear.prototype.Shirt = function() {

//셔츠를 입는다
console.log('셔츠를 입으세요');
}

2. 데코레이터 수업

코드 복사 코드는 다음과 같습니다.

함수 데코레이터(wear) {
this.wear = wear;
}
Decorator.prototype.Shirt = function() {

This.wear.Shirt();
//셔츠를 입은 후 넥타이를 추가했습니다
}

3. 이용방법

코드 복사 코드는 다음과 같습니다.

var wear = new Wear();
var 데코레이터 = 새로운 데코레이터(wear);
decorator.Shirt();

이렇게 하면 Wear 셔츠 기능성 개체의 동적 확장 장식이 구현됩니다. 원래 장식 방법이 어떻게 실행되는지 알 필요가 없으며 그 기능이 무엇인지 알면 됩니다. 추가 기능이 무엇이든 추가하고 싶습니다.

기타 안내

데코레이터 패턴은 객체 지향 접근 방식을 실제로 구현합니다. 확장에는 개방적이고 수정에는 폐쇄적인 원칙이 있으며, [데코레이트된 클래스 Wear]를 수정하고 [데코레이터 클래스] 데코레이터를 확장하지 않고도 원하는 기능 메서드가 모두 구현됩니다. ;

데코레이터 패턴의 주요 특징 중 하나는 데코레이터가 장식된 객체를 참조하여 장식된 객체의 수정되지 않은 장식을 달성한다는 것입니다.

시뮬레이션: 먼저 셔츠를 입고, 그다음 넥타이를 매고, 그 다음 양복을 입습니다. 위의 장식된 인물은 변함없이 그대로 유지됩니다:

2. 데코레이터 클래스:

코드 복사 코드는 다음과 같습니다.

함수 데코레이터(wear) {
this.wear = wear;
}
Decorator.prototype.Shirt = function() {
This.wear.Shirt(); //여기서는 셔츠만 입으세요;
}

3. Decorator 하위 클래스를 상속하는 Tie 클래스와 Suit 클래스를 만듭니다.

코드 복사 코드는 다음과 같습니다.

function Decorator_Tie(데코레이터) {
This.decorator = 데코레이터;
} 
Decorator_Tie.prototype.Shirt = function() {
This. decorator.Shirt(); //셔츠를 입으세요
console.log('넥타이를 다시 매세요');
}

function Decorator_Western(데코레이터) {
This.decorator = 데코레이터;
}
Decorator_Western.prototype.Shirt = function() {
This.decorator.Shirt();
console.log('다시 슈트를 입으세요');
}

사용법:

코드 복사 코드는 다음과 같습니다.

//먼저 셔츠를 입으세요
var wear = new Wear();
var 데코레이터 = 새로운 데코레이터(wear);
//데코레이터.셔츠();
//넥타이를 다시 매세요
var Tie = new Decorator_Tie(데코레이터);
//tie.Shirt();
//다시 슈트를 입으세요
var Western = new Decorator_Western(동점);
Western.Shirt();

의상 착용 및 장식 시뮬레이션 예시입니다.