JavaScript 디자인 패턴 개발에서 조합 패턴 사용에 대한 튜토리얼(고급)

조합 모드는 트리 구조로 이해될 수 있으므로, 특히 계층이 명확한 개체를 조작하는 데 적합합니다. -객체지향 자바스크립트 디자인 패턴이라고

us 일반적인 개발 과정에서, 단순한 객체와 단순한 객체로 구성된 복잡한 객체를 동시에 처리하는 상황에 분명히 직면하게 됩니다. 이러한 단순한 객체와 복잡한 객체는 하나의 객체로 결합됩니다. 트리 구조이며 클라이언트가 섹스를 처리할 때 일관성이 있어야 합니다. 예를 들어, 전자 상거래 웹사이트의 제품 주문의 경우 각 제품 주문에는 운영 체제 폴더와 같은 여러 하위 주문 조합이 있을 수 있습니다. 각 폴더에는 사용자로서 복사, 삭제 등이 가능합니다. .작동할 때 폴더든 파일이든 우리 운영자에게는 동일합니다. 이 시나리오에서는 조합 모드를 사용하는 것이 매우 적합합니다.

기본 지식

구성 모드: 개체를 트리 구조로 결합하여 "부분-전체" 계층을 표현하는 조합 모드를 통해 사용자는 단일 개체와 결합된 개체를 일관되게 사용할 수 있습니다.
조합 패턴에는 크게 세 가지 역할이 있습니다.
(1) 추상 컴포넌트(Component): 조합에 참여하는 객체의 공용 인터페이스를 주로 정의하는 추상 클래스
(2) 하위 객체(Leaf): 가장 기본적인 객체 결합된 객체를 구성하는
( 3) 복합 객체(Composite) : 하위 객체로 구성된 복합 객체
결합 모드를 이해하는 데 중요한 것은 결합 모드의 단일 객체 사용과 결합 객체의 일관성을 이해하는 것입니다. 이해를 깊게하기 위해 조합 모드의 구현에 대해 이야기하십시오.
조합 모드는 페이지에서 UI를 동적으로 생성하기 위해 맞춤 제작되었습니다. 하나의 life= 명령만 사용하여 여러 객체에 대한 일부 복잡하거나 재귀적인 작업을 초기화할 수 있습니다. 조합 모드는 두 가지 장점을 제공합니다.
(1) 결합이 가능합니다. 개체 그룹은 특정 개체로 처리됩니다. 복합 개체(복합체)는 이를 구성하는 하위 개체와 동일한 작업을 구현합니다. 따라서 동일한 작업을 수행할 수 있을 뿐만 아니라 단일 개체가 개체 집합으로 원활하게 대체될 수 있으며 그 반대의 경우도 마찬가지입니다.
(2) 조합 모드는 하위 개체 집합을 결합합니다. 개체를 트리 구조로 변환하고 전체 트리를 탐색할 수 있습니다. 이렇게 하면 내부 구현이 숨겨지고 어떤 방식으로든 하위 개체를 구성할 수 있습니다. 이 개체(복합 개체)의 모든 코드는 내부 하위 개체의 구현에 의존하지 않습니다.

구성 패턴의 구현

(1) 가장 간단한 조합 모드

HTML 문서의 DOM 구조는 가장 기본적인 요소가 DOM 트리가 되어 최종적으로 DOM 문서를 형성합니다. , 이는 조합 모드에 매우 적합합니다.
일반적으로 사용되는 jQuery 클래스 라이브러리에서는 결합 모드가 훨씬 더 자주 사용됩니다. 예를 들어 다음 코드가 자주 구현됩니다.

$(".test").addClass("noTest").remove("test");

이 간단한 코드는 클래스에 test가 포함된 요소를 가져온 다음 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 += (&#39; &#39; + className + &#39; &#39;));
    }
  }
  else if (eles instanceof Node) {
    eles.nodeType === 1 && (eles.className += (&#39; &#39; + className + &#39; &#39;));
  }
  else {
    throw "eles is not a html node";
  }
}
addClass(document.getElementById("p3"), "test");
addClass(document.querySelectorAll(".p"), "test");

이 코드는 단순히 addClass 구현을 시뮬레이션합니다(당분간 호환성 및 다양성을 고려하지 않음). 단순히 노드 유형을 먼저 결정한 다음 다양한 유형에 따라 className을 추가합니다. NodeList 또는 Node의 경우 클라이언트 호출은 모두 addClass 인터페이스를 사용합니다. 이는 부분과 전체를 일관되게 사용하는 조합 모드의 가장 기본적인 아이디어입니다.

(2) 일반적인 예

앞서 일반적인 예를 언급했습니다. 제품 주문에는 여러 제품 하위 주문이 포함되어 있고 여러 제품 하위 주문은 복잡한 제품 주문을 형성합니다. 자바스크립트 언어의 특성으로 인해 조합 패턴의 세 가지 역할을 두 가지 역할로 단순화합니다.
(1) 하위 개체: 이 예에서 하위 개체는 제품 하위 주문입니다.
(2) 조합 개체 : 여기에 상품 주문의 총 개수가 있습니다.
항공권과 호텔이라는 두 개의 하위 상품이 포함된 여행 상품 웹사이트를 개발한다고 가정해 보겠습니다. 하위 개체를 다음과 같이 정의합니다.

function FlightOrder() { }
FlightOrder.prototyp.create = function () {
  console.log("flight order created");
}
function HotelOrder() { }
HotelOrder.prototype.create = function () {
  console.log("hotel order created");
}

위 코드는 두 개의 클래스를 정의합니다. 항공권 주문 클래스와 호텔 주문 클래스, 각 클래스마다 고유한 주문 생성 방법이 있습니다.
다음으로 전체 주문 클래스를 만듭니다.

function TotalOrders() {
  this.orderList = [];
}
TotalOrders.prototype.addOrder = function (order) {
  this.orderList.push(order);
}
TotalOrders.prototype.create = function (order) {
  for (var i = 0, length = this.orderList.length; i < length; i++) {
    this.orderList[i].create();
  }
}

이 개체에는 주로 주문 목록, 주문 추가 방법, 주문 생성 방법의 3가지 멤버가 있습니다.
클라이언트 측에서 사용하는 경우는 다음과 같습니다.

var flight = new FlightOrder();
flight.create();

var orders = new TotalOrders();
orders.addOrder(new FlightOrder());
orders.addOrder(new HotelOrder());
orders.create();

클라이언트 호출에서는 단일 티켓 주문을 생성하는 방법과 여러 주문을 생성하는 방법의 두 가지 방법이 표시되지만 결국에는 모두 다음을 통해 생성됩니다. 매우 일반적인 조합 모드 애플리케이션 시나리오인 create 메소드입니다.

요약 조합 패턴은 이해하기 어렵지 않습니다. 주로 단일 객체와 결합 객체 사용의 일관성 문제를 해결합니다. 개체가 명확한 계층 구조를 갖고 있고 균일하게 작업하려는 경우 복합 패턴을 사용하기에 좋은 후보입니다. 웹 개발에서 이러한 계층 구조는 매우 일반적이며 결합 모드를 사용하는 데 매우 적합합니다. 특히 JS의 경우 전통적인 객체 지향 언어의 형식을 고수할 필요가 없으며 JS의 특성도 마찬가지입니다. 언어는 부분적이고 전체적인 일관성을 달성하기 위해 유연하게 사용될 수 있습니다.
(1) 조합 모드 사용 시나리오다음 두 가지 상황에 직면할 때만 조합 모드를 사용하세요
A. 특정 계층 구조를 포함하는 개체 모음(특정 구조는 개발 과정에서 결정할 수 없음)
B. 이러한 객체 또는 그 중 일부는 일종의 작업을 수행합니다.
(2) 조합 패턴의 단점 결합된 객체에 대한 모든 작업은 모든 하위 객체에 대해 동일한 작업을 호출하므로 결합된 구조가 다음과 같은 경우 성능 문제가 발생합니다. 큰 질문입니다. HTML을 캡슐화하기 위해 결합 모드를 사용할 때 적절한 태그를 선택할 필요도 있습니다. 예를 들어 테이블은 결합 모드에서 사용할 수 없으며 리프 노드가 명확하지 않습니다.

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로는 모두에게 도움이 되세요.

관련 기사:

JavaScript 개발의 디자인 패턴에서 외관 패턴의 적용(고급)

JavaScript의 디자인 패턴에서 어댑터 패턴을 구현하는 방법에 대한 자세한 해석(그래픽 튜토리얼)

JavaScript 디자인 패턴 프로그래밍에서 어댑터 어댑터 패턴 적용 요약(그래픽 튜토리얼)

위 내용은 JavaScript 디자인 패턴 개발에서 조합 패턴 사용에 대한 튜토리얼(고급)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!