JavaScript 디자인 패턴 구성 패턴 분석_js 객체지향

어떻게 말하나요? ! 동물(결합 개체)과 마찬가지로 자손(잎 개체)을 낳을 때 그 자손은 특정 기능(예: 구멍 파기, 잘 듣기 등)을 갖게 됩니다. 루트(복합 개체)와 나무에서 바깥쪽으로 자라는 다른 가지(복합 개체)와 해당 가지에서 바깥쪽으로 자라는 잎(잎 개체)이 있습니다. 즉, 조상이 이미 존재하는 경우 이 조상에서 파생된 다른 자식(이 조상 아래에 결합된 다른 개체 포함)이 이미 특정 기능을 갖고 있는 한 상속과 비슷해 보입니다. "컴포지션 패턴"에는 복합 개체 계층 구조에 리프 개체와 복합 개체라는 두 가지 유형의 개체가 있습니다. 결합된 패턴은 많은 수의 개체에서 작동하는 데 적합합니다.
"컴포지션 모드"는 프로젝트 작업 시 프로젝트에 나타날 모든 메서드를 컴포지션 개체(잎 개체의 메서드 포함)에 정의해야 하며 해당 리프 개체가 컴포지션 개체를 상속한다는 의미입니다. 복합 개체가 인스턴스화되면 그에 따라 리프 개체의 메서드도 인스턴스화됩니다. 제가 말한 내용이 다소 혼란스러울 수도 있습니다. 예를 들어 설명하겠습니다.
"구성 모드"는 웹에서 동적 사용자 인터페이스를 만들기 위해 맞춤화된 모드입니다. 이 패턴을 사용하면 단일 명령으로 여러 개체에 대해 복잡하거나 반복적인 동작을 트리거할 수 있습니다.
"결합 모드"를 사용하면 두 가지 주요 이점을 얻을 수 있습니다.
1. 개체 모음과 특정 하위 개체를 동일한 방식으로 처리할 수 있습니다.
2. 하위 개체 배치를 트리 구조로 구성하는 데 사용할 수 있으며 전체 트리를 탐색할 수 있습니다.
조합 모드는 다음 두 가지 조건이 동시에 충족되는 경우에만 적합합니다.
1. 특정 계층 시스템으로 구성된 배치 개체가 있습니다(특정 구조는 개발 중에 알려지지 않을 수 있습니다).
2. 이 개체 배치 또는 그 일부에 대해 작업을 수행하고 싶습니다.
예를 살펴보겠습니다.
구체적인 요구 사항은 사진 갤러리를 만들고 사진 갤러리의 특정 부분을 선택적으로 숨기거나 표시할 수 있어야 한다는 것입니다. 이는 단일 이미지일 수도 있고 이미지 갤러리일 수도 있습니다. 이제 이 기능을 완성하려면 두 개의 클래스가 필요합니다. 그림 라이브러리로 사용되는 복합 개체 클래스와 그림 자체에 사용되는 리프 개체 클래스입니다. 코드는 다음과 같습니다.
위 코드에서 가장 먼저 정의된 것은 복합 객체 클래스 및 리프 객체 클래스가 구현해야 하는 인터페이스입니다. 비전과 페니의 기존 조합 외에도 이러한 유형의 작업에는 숨기기 및 표시만 포함됩니다. 다음으로 리프 객체를 정의합니다. 리프 객체는 hide 및 show를 구현합니다.

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

var Composite = new Interface('Composite', ['add', 'remove', 'getChild']) // 복합 객체 Composite가 가져야 하는 메소드를 확인하세요.
var GalleryItem = new Interface( 'GalleryItem', ['hide', 'show']); // 결합된 객체 GalleryItem이 가져야 할 메소드를 확인하세요
// DynamicGallery Class
var DynamicGallery = function(id){ // 구현 복합, GalleryItem 조합 객체 클래스
this.children =

this.element = document.createElement('div')
this.element.id =
this; .element.className = 'dynamic-gallery';
}
DynamicGallery.prototype = {
// 복합 복합 객체 인터페이스 구현
add: function(child){
Interface.ensureImplements (child, Composite, DynamicGallery);
this.children.push(child);
this.element.appendChild(child.getElement())
},
제거: function(child) {
for (var 노드, i = 0; 노드 = this.getChild(i); i ){
                                                                     >
},
// DynamicGallery 복합 객체 구현 인터페이스
hide: function(){
} for(var node, i = 0; node = this.getChild(i); i ){
             node.hide(); 🎜> for(var node, i = 0; node = getChild(i); i ){
node.show()
}
},
// 도우미 메서드
getElement : function(){
return this.element;
}
}


다음은 리프 개체를 설정하는 해당 메서드입니다.




코드 복사


코드는 다음과 같습니다.


// GalleryImage 클래스
var GalleryImage = function(src){          메소드 구현 Composite 및 GalleryItem 조합 개체에 정의됨

this.element = document.createElement('img');
this.element.className = 'gallery-image'
this.element.src = src;

} GalleryImage.prototype = { // Composite 인터페이스 구현 // 리프 노드이므로 이러한 메서드를 구현할 필요는 없고 정의만 하면 됩니다. add : function(){}, delete : function(){},

getChild : function(){},

// GalleryItem 인터페이스 구현
hide : function(){
this.element.style.display = '없음';
},
show : function(){
this.element.style.display = ''
},
// 도우미 메서드
getElement: function(){
return this.element
}
}


결합 모드의 작동 방식을 보여주는 예시입니다. 각 클래스는 매우 간단하지만 이러한 계층 구조 덕분에 복잡한 작업을 수행할 수 있습니다. GalleryImage 클래스의 생성자는 이미지 요소를 생성합니다. 클래스 정의의 나머지 부분은 빈 복합 개체 메서드(리프 노드이므로)와 GalleryItem에 필요한 작업으로 구성됩니다. 이제 이 두 클래스를 사용하여 이미지를 관리할 수 있습니다.

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

var topGallery = new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'))
topGallery.add(new GalleryImage('/ img/ image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'))
var vacationPhotos = new DyamicGallery('vacation-photos');
for(var i = 0, i < 30; i ){
vacationPhotos.add(new GalleryImage('/img/vac/image-' i '.jpg'))
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();

조합 모드를 사용하면 간단한 조작도 가능합니다. 복잡한 결과를 낳습니다. 배열이나 기타 데이터 구조를 수동으로 순회하는 글루 코드를 작성하는 대신 최상위 개체에 대해 작업을 수행하고 해당 작업을 각 하위 개체 자체에 전달할 수 있습니다. 이는 반복해서 수행되는 작업에 특히 유용합니다. 복합 패턴에서는 개별 개체 간의 결합이 매우 느슨합니다. 최상위 복합 개체에 대해 작업이 수행될 때마다 노드를 찾기 위해 구조 전체에 걸쳐 우선 시도 검색이 수행됩니다.
결합 모드의 단점은 결합 모드에서 호출되는 모든 작업이 모든 하위 개체에 대해 수행된다는 점입니다. 이 계층 구조가 크면 시스템 성능이 영향을 받습니다.