집 > 기사 > 웹 프론트엔드 > js 디자인 패턴: 구성 패턴이란 무엇입니까? JS 조합 모드 소개

js 디자인 패턴: 구성 패턴이란 무엇입니까? JS 조합 모드 소개

不言원래의: 2018-08-17 16:31:443510검색

이 기사에서는 js 디자인 패턴에 대한 내용을 제공합니다. 조합 패턴이란 무엇입니까? js 조합 모드의 도입에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

콤비네이션 모드란 무엇인가요?

정의: 1.객체를 트리 구조로 결합하여 "부분-전체" 계층 구조를 나타냅니다. 2. 조합 모드에서는 단일 개체와 결합된 개체를 일관되게 사용할 수 있습니다. 3. 객체에 몇 개의 레이어가 있는지 신경 쓸 필요가 없으며 호출할 때 루트에서만 호출하면 됩니다.

주요 솔루션: 트리 구조에서 단순한 요소와 복잡한 요소의 개념이 모호해집니다. 문제가 발생하면 클라이언트 프로그램이 이를 처리할 수 있습니다. 복잡한 요소를 단순 요소와 동일하게 처리하여 클라이언트 프로그램을 복잡한 요소의 내부 구조에서 분리합니다.

사용 시기: 1. 개체의 부분-전체 계층 구조(트리 구조)를 표현하려고 합니다. 2. 사용자가 결합된 객체와 단일 객체의 차이를 무시하고 결합된 구조의 모든 객체를 균일하게 사용하기를 원합니다.

해결 방법: 가지와 잎은 통일된 인터페이스를 구현하고, 인터페이스는 가지 내부에서 결합됩니다.

키 코드: 브랜치는 내부적으로 이 인터페이스를 결합하고 Component를 포함하는 내부 속성 List를 포함합니다.

js 조합 모드 적용 예: 1. 산술 표현식에는 피연산자, 연산자 및 다른 피연산자가 포함됩니다. 여기서 다른 연산자는 피연산자, 연산자 및 다른 피연산자일 수도 있습니다. 2. JAVA AWT 및 SWING에서는 Button과 Checkbox가 리프이고, 컨테이너가 브랜치입니다.

js 조합 모드의 장점: 1. 상위 수준 모듈 호출이 간단합니다. 2. 노드는 자유롭게 추가할 수 있습니다.

js 조합 모드의 단점: 조합 모드를 사용할 때 리프와 가지의 선언은 인터페이스가 아닌 구현 클래스이므로 종속성 반전 원칙을 위반합니다.

js 조합 모드 사용 시나리오: 트리 메뉴, 파일 및 폴더 관리와 같은 부분 및 전체 시나리오.

참고: 정의되면 구체적인 클래스입니다.

js 조합 모드 예시 - 매크로 명령

지금 우리 손에 범용 리모콘이 있다고 상상해 보세요. 집에 가서 스위치를 누르면 다음 작업이 실행됩니다.

1. TV에서 소리를 켜세요
3. 에어컨과 컴퓨터를 켜세요

작업을 3가지 범주로 나눕니다. 렌더링은 다음과 같습니다.

그런 다음 명령 모드를 결합한 구체적인 구현을 살펴보겠습니다. 및 조합 모드:

const MacroCommand = function() {
  return {
    lists: [],
    add: function(task) {
      this.lists.push(task)
    },
    excute: function() { // ①：组合对象调用这里的 excute，
      for (let i = 0; i < this.lists.length; i++) {
        this.lists[i].excute()
      }
    },
  }
}

const command1 = MacroCommand() // 基本对象

command1.add({
  excute: () => console.log(&#39;煮咖啡&#39;) // ②：基本对象调用这里的 excute，
})

const command2 = MacroCommand() // 组合对象

command2.add({
  excute: () => console.log(&#39;打开电视&#39;)
})

command2.add({
  excute: () => console.log(&#39;打开音响&#39;)
})

const command3 = MacroCommand()

command3.add({
  excute: () => console.log(&#39;打开空调&#39;)
})

command3.add({
  excute: () => console.log(&#39;打开电脑&#39;)
})

const macroCommand = MacroCommand()
macroCommand.add(command1)
macroCommand.add(command2)
macroCommand.add(command3)

macroCommand.excute()

// 煮咖啡
// 打开电视
// 打开音响
// 打开空调
// 打开电脑

조합에서는 패턴에서 기본 개체와 복합 개체가 일관되게 처리되므로 기본 개체(리프 개체)와 복합 개체가 일관된 메서드를 갖도록 보장해야 함을 알 수 있습니다.

js 조합 모드 예 - 폴더 검색

폴더를 검색할 때 폴더는 다른 폴더일 수도 있고 파일일 수도 있습니다. 이러한 상황은 조합 모드를 사용하는 데 적합합니다.

const Folder = function(folder) {
  this.folder = folder
  this.lists = []
}

Folder.prototype.add = function(resource) {
  this.lists.push(resource)
}

Folder.prototype.scan = function() {
  console.log(&#39;开始扫描文件夹：&#39;, this.folder)
  for (let i = 0, folder; folder = this.lists[i++];) {
    folder.scan()
  }
}

const File = function(file) {
  this.file = file
}

File.prototype.add = function() {
  throw Error(&#39;文件下不能添加其它文件夹或文件&#39;)
}

File.prototype.scan = function() {
  console.log(&#39;开始扫描文件：&#39;, this.file)
}

const folder = new Folder(&#39;根文件夹&#39;)
const folder1 = new Folder(&#39;JS&#39;)
const folder2 = new Folder(&#39;life&#39;)

const file1 = new File(&#39;深入React技术栈.pdf&#39;)
const file2 = new File(&#39;JavaScript权威指南.pdf&#39;)
const file3 = new File(&#39;小王子.pdf&#39;)

folder1.add(file1)
folder1.add(file2)

folder2.add(file3)

folder.add(folder1)
folder.add(folder2)

folder.scan()

// 开始扫描文件夹： 根文件夹
// 开始扫描文件夹： JS
// 开始扫描文件： 深入React技术栈.pdf
// 开始扫描文件： JavaScript权威指南.pdf
// 开始扫描文件夹： life
// 开始扫描文件： 小王子.pdf

js 디자인 패턴: 구성 패턴이란 무엇입니까? JS 조합 모드 소개

콤비네이션 모드란 무엇인가요?

js 조합 모드 예시 - 매크로 명령

관련 기사