정상적인 개발 과정에서 우리는이 상황을 확실히 만나게 될 것입니다. 우리는 간단한 개체와 간단한 물체로 구성된 복잡한 물체를 동시에 처리합니다. 이러한 간단한 물체와 복잡한 물체는 트리 구조로 결합되며 클라이언트는 처리 할 때 일관성을 유지해야합니다. 예를 들어, 전자 상거래 웹 사이트의 제품 주문의 경우 각 제품 주문은 운영 체제의 폴더와 같은 여러 하위 주문 조합을 가질 수 있으며 각 폴더에는 여러 하위 폴더 또는 파일이 있습니다. 폴더이든 파일이든 복사, 삭제 등을 삭제하면 미국 운영자에게 동일합니다. 이 시나리오에서는 조합 모드를 사용하여 달성하는 것이 매우 적합합니다.
기본 지식
조합 모드 : 객체를 트리 구조로 결합하여 "부분적"계층을 나타냅니다. 조합 모드를 통해 사용자는 개별 객체와 결합 된 객체를 사용하는 데 일관성을 가질 수 있습니다.
조합 모드에는 3 개의 주인공이 있습니다.
(1) 추상 구성 요소 (구성 요소) : 주로 조합에 참여하는 객체의 공개 인터페이스를 정의하는 추상 클래스
(2) Sub-Object (Leaf) : 결합 된 개체를 형성하는 가장 기본적인 객체
(3) 복합재 : 어린이 물체에 의해 결합 된 복잡한 물체
조합 패턴을 이해하는 열쇠는 개별 객체와 결합 된 객체에 대한 조합 패턴의 일관성을 이해하는 것입니다. 우리의 이해를 심화시키기 위해 조합 패턴의 구현에 대해 이야기합시다.
조합 모드는 페이지에서 동적으로 UI를 만들도록 조정됩니다. 하나의 수명 = 명령 만 사용하여 많은 객체에 대해 복잡하거나 재귀적인 작업을 초기화 할 수 있습니다. 조합 모드는 두 가지 점을 제공합니다.
(1) 객체 그룹을 특정 객체로 취급 할 수 있습니다. 복합 객체는 하위 객체와 동일한 작업을 구현합니다. 결합 된 객체에서 특정 작업을 수행하면 해당 객체의 모든 하위 객체가 동일한 작업을 수행하게됩니다. 따라서 단일 객체를 일련의 객체로 원활하게 교체 할뿐만 아니라 차례로 동일하게 교체 할 수 있습니다. 이 독립적 인 물체는 소위 느슨하게 결합되어 있습니다.
(2) 조합 패턴은 하위 객체 세트를 트리 구조로 결합하여 전체 트리의 순회를 허용합니다. 이것은 내부 구현을 숨기고 어떤 식 으로든 하위 객체를 구성 할 수 있습니다. 이 객체 (결합 된 객체)에 대한 모든 코드는 내부 하위 객체의 구현에 의존하지 않습니다.
조합 모드 구현
(1) 가장 간단한 조합 모드
HTML 문서의 DOM 구조는 자연 트리 구조입니다. 가장 기본적인 요소는 DOM 나무가되어 결국 DOM 문서를 형성합니다. 조합 모드에 매우 적합합니다.
우리는 종종 조합 패턴이 더 자주 적용되는 JQuery Class 라이브러리를 사용합니다. 예를 들어 다음 코드가 종종 구현됩니다.
$ ( ". test"). addClass ( "Notest"). 제거 ( "테스트");
이 간단한 코드는 클래스에 테스트가 포함 된 요소를 얻은 다음 AddClass 및 RemoveClass로 처리하는 것입니다. $ ( ". test")가 하나의 요소 또는 여러 요소이든 궁극적으로 통합 AddClass 및 RemoveClass 인터페이스를 통해 호출됩니다.
AddClass의 구현을 간략하게 시뮬레이션하겠습니다.
var addClass = function (eles, className) {if (eles instanceof nodelist) {for (var i = 0, length = eles.length; i <length; i ++) {eles [i] .nodetype == 1 && (eles [i] .className += ( '' +className +''); }} else if (eles instanceof node) {eles.nodeType === 1 && (eles.className + = ( '' + className + '')); } else {Throw "Eles는 HTML 노드가 아닙니다"; }} addClass (document.getElementById ( "div3"), "test"); addClass (document.querySelectorall ( ". div"), "test");이 코드는 단순히 AddClass의 구현을 시뮬레이션하고 (시간에 호환성과 보편성을 고려하지 않음), 먼저 노드 유형을 판단한 다음 다른 유형에 따라 클래스 이름을 추가하는 것은 간단합니다. Nodelist 또는 Node의 경우 클라이언트 호출은 AddClass 인터페이스를 동일한 방식으로 사용합니다. 이것은 조합 모드의 가장 기본적인 아이디어로 부품과 전체를 일관성있게 만듭니다.
(2) 전형적인 예
우리는 전형적인 예를 언급했습니다. 제품 주문에는 여러 제품 하위 주문이 포함되어 있으며 여러 제품 부하 사도가 복잡한 제품 주문을 형성합니다. JavaScript 언어의 특성으로 인해 조합 패턴의 세 가지 역할을 두 가지 역할로 단순화합니다.
(1) 서브 버젝트 :이 예에서, 하위 목체는 제품 하위 순위입니다.
(2) 조합 개체 : 이것은 제품의 총 순서입니다.
에어 티켓과 호텔의 두 가지 하위 제품이 포함 된 관광 제품 웹 사이트를 개발한다고 가정 해 봅시다. 하위 객체를 다음과 같이 정의합니다.
함수 flightOrder () {} flightorder.protoTyp.create = function () {console.log ( "Flight Order ("Flight Order ");} function HotelOrder () {} HotelOrder.Prototype.Create = function () {Console.Log ("Hotel Order ");}위의 코드는 항공권 주문 수업과 호텔 주문 수업의 두 가지 클래스를 정의합니다. 각 클래스에는 자체 주문 생성 방법이 있습니다.
다음으로 우리는 총 주문 클래스를 만듭니다.
function totalorders () {this.orderList = [];} TotalOrders.Protopty.addorder = function (Order) {this.orderList.push (order);} totalders.prototyp.create = function (order) {(var i = 0, longth = this.orderList.length; i <length; i ++) {this. }}이 개체에는 세 개의 주요 멤버가 있습니다 : 주문 목록, 주문을 추가하는 메소드 및 주문을 작성하는 메소드가 있습니다.
클라이언트를 사용하는 경우 다음은 다음과 같습니다.
var flight = new FlightOrder (); flight.create (); var orders = new Totalorders (); Orders.Addorder (new FlightOrder ()); Orders.Addorder (new HotelOrder ()); Orders.Create ();
클라이언트 통화는 두 가지 방법을 보여주고, 하나는 항공권 주문을 작성하고, 다른 하나는 여러 주문을 작성하는 것이지만 결국 생성 메소드를 통해 생성됩니다. 이것은 조합 모드의 매우 일반적인 응용 시나리오입니다.
요약
조합 패턴은 이해하기 어렵지 않습니다. 주로 사용되는 방식으로 단일 객체와 결합 된 객체의 일관성 문제를 해결합니다. 객체에 명백한 계층이 있고 균일하게 사용하려는 경우 조합 패턴을 사용하는 데 좋습니다. 웹 개발 에서이 계층은 매우 일반적이며 조합 패턴을 사용하는 데 매우 적합합니다. 특히 JS의 경우 전통적인 객체 지향 언어 형식을 고수 할 필요는 없으며 JS 언어의 특성을 유연하게 사용하여 부분적으로 일관성과 전반적인 사용을 달성합니다.
(1) 조합 모드를 사용한 시나리오
다음 두 가지 상황이 발생할 때 조합 모드를 사용하십시오
A. 특정 계층 구조를 포함하는 물체 모음 (개발 과정에서 특정 구조를 결정할 수 없습니다)
B.이 개체 또는 그 중 일부에서 일부 작업을 수행하고 싶습니다.
(2) 조합 모드의 단점
결합 된 객체의 작업은 모든 하위 객체에서 동일한 작업을 호출하기 때문에 결합 된 구조가 클 때 성능 문제가 발생합니다. 또한 조합 모드를 사용하여 HTML을 캡슐화 할 때는 적절한 태그를 선택해야합니다. 예를 들어, 테이블은 조합 모드에서 사용할 수 없으며 잎 노드는 분명하지 않습니다.