자바스크립트 디자인 패턴의 외형 패턴 소개_자바스크립트 기술

외모 모드 설명

설명: 모양 모드는 하위 시스템이나 프로그램의 복잡한 구성으로 인해 제공되는 고급 인터페이스입니다. 클라이언트를 사용하여 기본 프로그램이나 시스템 인터페이스에 액세스하기가 더 쉽습니다.

외관 모드는 우리가 자주 접하는 모드로, 여러 하위 인터페이스 또는 하위 시스템이 필요할 수 있으며, 기능 중 하나에는 여러 하위 인터페이스 중 하나만 필요할 수 있습니다. 순차적 패키지. 비즈니스 기능이 하위 인터페이스 또는 하위 시스템에 직접적으로 해당하는 경우 개발자는 내부 프로세스를 잘 이해해야 할 수 있으며 비즈니스 프로세스가 어떻게 진행되는지, 순서가 무엇인지 등을 이해해야 할 수도 있습니다. 이를 위해서는 개발자가 비즈니스를 이해해야 하며 클라이언트 프로그래밍도 상당히 복잡해집니다.

여기에 우리가 사용하려는 메서드를 구체적으로 캡슐화하는 레이어나 클래스가 있는 경우 클라이언트 기능은 이 중간 레이어 클래스와만 상호 작용하면 됩니다. 중간 레이어 클래스의 해당 메서드는 이해하는 관련 개발자가 구성합니다. 캡슐화하면 프로그램은 매우 간단해집니다. 프로그래머는 이 기능에 필요한 방법만 알면 되며 내부 논리를 알 필요가 없습니다.

이 중간 계층 클래스를 우리는 외모 클래스라고 부릅니다. 이것이 바로 외모 모드의 아이디어입니다.

시나리오 예:

1> 마스터 스위치를 예로 들어 보겠습니다. 이 마스터 스위치는 집 문에 있는 조명, 복도의 여러 조명을 제어하고 TV, 냉장고 등에 대한 전원 공급 장치를 제어할 수 있습니다. "ON"을 누르면 모든 것이 전기를 공급받거나 직접 빛과 열을 방출할 수도 있습니다. 메인 스위치의 버튼이 어떻게 나오는지, 어떻게 눌러야 하는지 알 필요가 없습니다. 관련 전기 제품입니다. 어쨌든 누르기만 하면 전기가 들어옵니다.

이 조명, TV 등은 우리가 사용하고 싶은 인터페이스이자 작은 시스템입니다. 이 메인 스위치는 우리의 외관 클래스이므로 직접 조작할 수 있습니다.

2> 마치 여러 기능 부서가 있는 회사와 같습니다. 상사가 업무의 다양한 측면에 대한 실행 상태가 필요할 때 각 부서에 가서 직원들에게 이 일이 어떻게 진행되고 있는지 물어볼 것입니다. 맞는 사람이면 상사에게 직접 대답하면 된다. 이 사람이 책임이 없으면 상사에게 '아, 이게 누구 책임이냐'고 말하고, 상사는 가서 그 사람이 얼마나 귀찮은지 물어봐야 할 것이다. .

각 기능부서에 담당자가 있으면 사장님이 직접 찾아가서 상황을 파악하시면 됩니다. 2, 3가지 정도 상황과 진행상황을 따라가시면 됩니다.

소스 코드 예시

이제 두 번째 인스턴스 시나리오에 따라 소스 코드를 구현합니다.

1. 여러 부서 기능:

1부서(사업부):

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

함수 BusinessDept() {
this.manager = '첸 매니저'; //책임자
}
BusinessDept.prototype = {
월판매액: function() {
console.log(this.manager '말씀: 이번 달 매출은 xxx');
},
NextPlan: function() {
console.log(this.manager '말씀: 다음 계획은 이렇습니다, xxxx');
}
}

2부서(R&D 부서):

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

함수 RDdept() {
this.manager = '황 매니저';
}
RDdept.prototype = {
진행: 함수() {
console.log(this.manager '말씀: 현재 프로젝트 상황과 진행상황은 이렇습니다xxx');
},
deptPlan: 함수() {
console.log(this.manager '말씀: 다음 부서 계획은 이렇습니다 xxx');
}
}

위는 각 부서장이 상사에게 대답해야 할 질문입니다.

다음으로 상사가 묻고 싶은 질문을 정리하기 위해 외모 수업을 만듭니다

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

함수 Facade() {
this.business = 새로운 BusinessDept() ;
this.rddept = 새로운 RDdept();
}
Facade.prototype = {
부서 상황: function() {
This.business.MonthSales(); //영업 관리자가 먼저 말을 할 것입니다.
This.rddept.progress();
},
deptPlan: 함수() {
This.business.NextPlan(); //다음 계획 보고;
This.rddept.deptPlan();
}
}

그러자 사장은 앞에 있던 매니저 두 명을 불러 질문을 시작했습니다.

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

var 외관 = new Facade();
console.log('사장님이 물으셨습니다. 이제 부서 상황을 소개하시겠습니까?');
Facade.DeptSituation();
console.log('사장이 물었습니다: 다음 계획은 무엇입니까?');
Facade.deptPlan();

기타 안내

외형 모드를 사용하면 클래스 간 종속성이 필요하지 않도록 인터페이스나 클래스를 분리할 수 있습니다. 필요하지 않은 경우 A는 B를 포함해야 하고 B는 A를 포함해야 합니다. 이는 폐쇄 수정 원칙을 위반합니다. 중간 계층 모양 클래스 패키징을 사용하면 인터페이스 호출이 더 단순해지고 하위 인터페이스 또는 하위 시스템 개체를 사용하는 호출이 더욱 자유롭고 체계화됩니다.

외관 패턴은 우리 프로그래밍에 자주 등장합니다. 우리 시스템은 타사 인터페이스 서비스를 사용하고 종종 사용 가능한 비즈니스 인터페이스를 구성하기 위해 외관 레이어를 추가합니다.