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

어댑터 패턴은 필요에 따라 인터페이스를 변환(또는 조정)하고, 필요한 인터페이스가 포함된 다른 객체를 생성한 다음, 인터페이스를 변경하려는 객체에 연결하여 이 변환을 완료할 수 있습니다. JavaScript 구현 설계를 자세히 설명하겠습니다. 아래 패턴의 어댑터 패턴 방법

개발 과정에서 클라이언트가 요구하는 인터페이스가 제공된 인터페이스와 호환되지 않는 경우가 가끔 있습니다. 특별한 이유로 인해 클라이언트 인터페이스를 수정할 수 없습니다. 이 경우 기존 인터페이스와 호환되지 않는 클래스를 조정해야 하므로 어댑터 패턴이 필요합니다. 어댑터를 통해 기존 코드를 수정하지 않고도 사용할 수 있습니다. 이것이 바로 어댑터의 힘입니다.
적응 모드는 기존 인터페이스와 호환되지 않는 클래스 사이를 조정하는 데 사용할 수 있습니다. 이 모드를 사용하는 개체는 다른 개체를 새 인터페이스로 래핑하기 때문에 래퍼라고도 합니다.
표면적으로 어댑터 모드는 모양 모드와 매우 비슷해 보입니다. 그들은 모두 다른 객체를 래핑하고 그들이 제시하는 인터페이스를 변경합니다. 둘의 차이점은 인터페이스를 변경하는 방법입니다. Facade 요소는 추가 옵션을 제공하지 않고 때로는 일반적인 작업 완료를 용이하게 하기 위해 가정을 하는 단순화된 인터페이스를 제공합니다. 어댑터는 하나의 인터페이스를 다른 인터페이스로 변환하거나 특정 기능을 필터링하거나 인터페이스를 단순화하지 않습니다. 클라이언트 시스템 API를 사용할 수 없는 경우 어댑터가 필요합니다.

기본 이론

Adapter 패턴: 호환되지 않는 코드가 함께 작동할 수 있도록 클라이언트 코드를 수정하지 않고 인터페이스를 클라이언트가 요구하는 인터페이스로 변환합니다.

어댑터는 크게 3가지 역할로 구성됩니다.
(1) 클라이언트: 인터페이스를 호출하는 클래스
(2) 어댑터: 클라이언트 인터페이스와 서비스를 제공하는 인터페이스를 연결하는 데 사용되는 클래스
(3) 어댑터: 서비스 제공 , 그러나 서비스 클래스가 클라이언트 인터페이스 요구 사항과 호환되지 않습니다.

어댑터 패턴 구현

1. 가장 간단한 어댑터

어댑터 패턴은 생각보다 복잡하지 않습니다.
클라이언트는 덧셈 계산을 수행하는 메소드를 호출합니다:

var result = add(1,2);

그러나 우리는 add 메소드를 제공하지 않습니다. 우리는 동일한 기능을 가진 sum 메소드를 제공합니다:

function sum(v1,v2){
  return v1 + v2;
}

클라이언트와 서버 수정을 방지하기 위해 다음을 추가합니다. 래퍼 기능:

function add (v1,v2){
  reutrn sum(v1,v2);
}

이것은 가장 간단한 어댑터 패턴입니다. 호환되지 않는 두 인터페이스 사이에 래핑 방법을 추가하고 이 방법을 사용하여 두 인터페이스가 함께 작동할 수 있도록 연결합니다.

2. 실용적인 응용

프론트엔드 프레임워크가 개발되면서 점점 더 많은 개발자들이 DOM 요소를 조작하지 않고 데이터만 조작하면 되며, jQuery의 플레이는 점점 줄어들고 있습니다. 역할. 서버에서 데이터를 요청하려면 jQuery에서 제공하는 ajax를 사용해야 하기 때문에 많은 프로젝트에서 여전히 jQuery 라이브러리를 도구 클래스로 참조합니다. 프로젝트에서 jQuery의 역할이 Ajax 도구 라이브러리일 뿐이라면 강력한 도구로 닭을 죽이는 것처럼 느껴지고 결과적으로 리소스가 낭비됩니다. 현재 우리는 우리 자신의 Ajax 라이브러리를 완전히 캡슐화할 수 있습니다.
우리가 캡슐화한 ajax가 다음 함수를 통해 사용된다고 가정해 보세요:

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

호출 인터페이스 ajax와 jQuery의 $.ajax 간의 차이점을 제외하면 다른 모든 것은 완전히 동일합니다.
프로젝트에서 ajax를 요청하는 곳이 많을 텐데요. jQuery를 교체할 때 $.ajax를 하나씩 수정하는 것은 불가능합니다. 그러면 이때 어댑터를 추가하면 됩니다.

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

이렇게 됩니다. 기존 코드 수정을 피하기 위해 이전 코드 및 새 인터페이스와 호환되어야 합니다.

요약

어댑터 패턴의 원리는 매우 간단합니다. 즉, 이전 코드 호출에 적응하고 인터페이스 및 호출 코드 수정을 방지하기 위해 새 인터페이스를 래핑하는 새 래퍼 클래스를 추가하는 것입니다.
적용 가능한 시나리오: 기존 인터페이스를 호출하는 코드가 많이 있습니다. 기존 코드를 수정하고 새 인터페이스를 교체하는 것을 방지하기 위해 애플리케이션 시나리오는 기존 구현 방법에 영향을 미치지 않습니다.

1. 어댑터 모드가 적용되는 경우: Adapter는 고객 시스템에서 기대하는 인터페이스가 기존 API에서 제공하는 인터페이스와 호환되지 않는 상황에 적합합니다. 어댑터가 적용한 두 가지 방법은 유사한 작업을 수행해야 하며, 그렇지 않으면 문제가 해결되지 않습니다. 브리지 요소 및 파사드 요소와 마찬가지로 어댑터를 생성하면 구현에서 추상화를 분리하여 둘 다 독립적으로 변경할 수 있습니다.

2. 어댑터 패턴의 장점: 기존 클래스의 인터페이스를 새로운 인터페이스로 래핑하여 클라이언트 프로그램이 큰 수술을 받지 않고 이 클래스를 사용할 수 있도록 합니다.

3. 어댑터 패턴의 단점: 어떤 사람들은 어댑터가 기존 코드를 다시 작성하면 완전히 피할 수 있는 불필요한 오버헤드라고 생각합니다. 또한 어댑터 패턴에는 지원이 필요한 여러 가지 새로운 도구도 도입됩니다. 기존 API가 아직 완료되지 않았거나 새 인터페이스가 아직 완료되지 않은 경우 어댑터가 작동하지 않을 수도 있습니다.
대규모 시스템과 레거시 프레임워크가 관련된 경우 장점이 단점보다 더 큰 경우가 많습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript 구성 구현(BOM 및 DOM의 상세 해석)

JavaScript 디자인 패턴 프로그래밍에서 어댑터 어댑터 패턴 적용 요약(그림 및 텍스트 자습서)

JavaScript 배열의 some()과 filter() 사용 및 차이점(코드 포함)

위 내용은 JavaScript의 디자인 패턴에서 어댑터 패턴을 구현하는 방법에 대한 자세한 설명(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!