정의
이름에서 알 수 있듯이 조합은 여러 구성 요소가 포함 된 객체가있는 단일 엔터티를 작성하는 것을 말합니다. 이 단일 엔티티는 이러한 모든 구성 요소의 액세스 포인트 역할을하며 작업을 크게 단순화하지만 조합에 포함 된 구성 요소를 명확하게 표시하는 암시적인 방법이 없기 때문에 매우 기만적 일 수도 있습니다.
조합 모드의 목표는 클라이언트 프로그램이 모든 자식 요소를 동일하게 취급하도록 클라이언트 프로그램을 복잡한 요소의 내부 아키텍처에서 분리하는 것입니다.
각 어린이 노드는 복잡한 존재를 만들 수 있습니다. 상위 노드의 경우, 하위 노드의 복잡성을 알거나 하위 노드의 복잡성을 구현할 필요는 없습니다. 하위 노드를 사용할 수 있도록 하위 노드의 특정 방법에만주의를 기울여야합니다. 아버지와 아들의 관계를 단순화합니다.
어린이 노드에서도 마찬가지입니다. 과도한 인터페이스 노출은 때때로 남용이며 외부 요인에 대한 의존도를 줄입니다.
예
환상 조합을 사용하는 것이 좋습니다. 다음 이미지에서는 두 가지 유형의 객체를 볼 수 있습니다. 컨테이너와 라이브러리는 조합이며 이미지는 블레이드입니다. 조합은 어린이를 운반 할 수 있지만 일반적으로 더 많은 행동을 수행하지는 않습니다. 이 블레이드에는 대부분의 행동이 포함되어 있지만 적어도 전통적인 조합 예에서는 어린이를 운반 할 수 없습니다.
이 예제는 사진 라이브러리를 조합 패턴 예제로 만듭니다. 앨범, 도서관 및 이미지의 세 가지 레벨 만 있습니다. 앨범과 라이브러리가 결합되고 이미지는 위의 이미지와 같이 블레이드입니다. 이것은 조합 자체가 요구하는 것보다 더 명백한 구조이지만이 예에서는 이러한 레벨을 조합 또는 블레이드로만 제한하는 것이 합리적입니다. 표준 조합은 어떤 구조 레벨에 블레이드를 가질 수 있는지 제한하지 않으며 블레이드 수를 제한하지 않습니다.
처음에는 먼저 앨범과 라이브러리에 대해 갤러리 컴포지 사이트 "클래스"를 만들어야합니다. jQuery를 사용하여 DOM 작업을 수행하여 프로세스를 단순화합니다.
var gallerycomposite = function (heading, id) {this.children = []; this.element = $ ( '<div id = "' + id + '"> </div>') .append ( '<h2>' + heading + '</h2>');} mallerycomposite.prototype = {child (child) {this.children.push (child); this.element.append (child.getElement ()); }, 제거 : function (child) {for (var node, i = 0; node = this.getchild (i); i ++) {if (node == child) {this.children.splice (i, 1); this.element.detach (child.getElement ()); 진실을 반환하십시오. } if (node.remove (child)) {return true; }} 거짓을 반환합니다. }, getchild : function (i) {return this.children [i]; }, hide : function () {for (var node, i = 0; node = this.getchild (i); i ++) {node.hide (); } this.element.hide (0); }, show : function () {for (var node, i = 0; node = this.getchild (i); i ++) {node.show (); } this.element.show (0); }, getElement : function () {return this.element; }}이 위치는 약간 까다 롭습니다. 더 자세히 설명 할 수 있습니까? ADD, Remove 및 GetChild GetChild 메서드를 모두 사용 하여이 조합을 구축합니다. 이 예제는 실제로 제거 및 getchild를 사용하지 않지만 동적 조합을 만드는 데 매우 유용합니다. Hide, Show 및 GetElement 방법은 DOM을 조작하는 데 사용됩니다. 이 조합은 라이브러리 표현으로 페이지의 사용자에게 제공되도록 고안되었습니다. 이 조합은 Hide and Show를 통해 이러한 라이브러리 요소를 제어 할 수 있습니다. 앨범 Hide에서 전화를 걸면 전체 앨범이 사라지거나 단일 이미지로 호출하여 해당 이미지 만 사라질 수 있습니다.
이제 GalleryImage 클래스를 만듭니다. gallerycomposite와 정확히 동일한 방법을 사용합니다. 다시 말해, 이미지가 블레이드라는 점을 제외하고는 동일한 인터페이스를 구현하므로 마치 어린이가없는 것처럼 어린이 관련 방법에 대해 실제로 수행되지 않습니다. 조합 요소가 자체적으로 추가되는 다른 조합 요소 또는 블레이드인지 알지 못하므로 조합은 동일한 인터페이스로 실행해야하므로 어린이에게 이러한 방법을 호출하려고하면 오류없이 완전히 잘 실행해야합니다.
var malleryimage = function (src, id) {this.children = []; this.element = $ ( '<img />') .attr ( 'id', id) .attr ( 'src', src);} malleryimage.prototype = {//이 잎이기 때문에이 방법을 사용하지 않기 때문에 // composite interface를 구현하기 위해 그것들을 구현해야합니다. 숨기기 : function () {this.element.hide (0); }, show : function () {this.element.show (0); }, getElement : function () {return this.element; }}객체 프로토 타입을 구축했다면 이제 사용할 수 있습니다. 아래에서 실제로 이미지 라이브러리를 구축하기위한 코드를 볼 수 있습니다.
var 컨테이너 = 새로운 GalleryComposite ( '', 'AllGalleries'); var Gallery1 = New Gallerycomposite ( 'Gallery 1', 'Galleries1'); var Gallery2 = New Gallerycomposite ( 'Gallery 2', 'Gallery2'); var image1 = new GalleryImage ( 'image1.jpg', 'Img1'); var gallerymage ( 'image2.jpg', ''); = new GalleryAmage ( 'image3.jpg', 'img3'); var image4 = new GalleryMage ( 'image4.jpg', 'img4'); Gallery1.add (image1); gallery1.add (image2); gallery3); Gallery2.Add (indime4); container.add (gallery 2); body, // 그렇지 않으면 그것은 결코 나타나지 않습니다 .container.getElement (). 부록 ( 'body'); container.show ();
조합 모드의 이점 :
간단한 작업은 복잡한 결과를 얻을 수 있습니다. 최상위 객체에서의 작업 만 수행하고 각 어린이 객체 가이 작업을 자체적으로 전달하도록해야합니다. 이것은 반복되는 작업에 특히 유용합니다.
조합 모드에서는 개별 물체 사이의 커플 링이 매우 느슨합니다. 그들이 동일한 인터페이스를 구현하는 한, 위치를 변경하거나 교체하는 것은 약간의 도움이됩니다. 코드 재사용을 촉진하고 코드 재구성에도 도움이됩니다.
최상위 수준 결합 객체에서 작업이 수행 될 때마다 실제로는 전체 구조를 최초로 검색하여 노드를 찾는 것이며, 결합 된 객체를 만든 프로그래머는 이러한 세부 사항을 무지합니다. 이 계층 구조에서 노드를 추가, 삭제 및 찾기가 매우 쉽습니다.
조합 모드의 단점 :
결합 된 객체의 사용 편의성으로 인해 지원하는 모든 작업의 비용이 마두 릴 수 있습니다. 결합 된 객체가 호출하는 모든 작업은 모든 하위 관점에 전달됩니다. 이 계층 구조가 크면 시스템의 성능에 영향을 미칩니다. 조합 모드의 정상 작동에는 어떤 형태의 인터페이스가 필요합니다.
객체와 노드 클래스를 결합하면 HTML 요소의 랩핑 도구로 사용되면 결합 된 객체는 HTML 사용 규칙을 준수해야합니다. 예를 들어, 테이블은 결합 된 객체로 변환하기가 어렵습니다.
인터페이스 검사가 엄격할수록 결합 된 객체 클래스가 더 안정적입니다.