집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 디자인 패턴 시리즈 5: 어댑터 패턴

JavaScript 디자인 패턴 시리즈 5: 어댑터 패턴

이 글에서는 JavaScript 디자인 패턴의 다섯 번째 시리즈인 어댑터 패턴을 공유합니다. 관심 있는 친구들은

어댑터 패턴이 무엇인가요?

일명 어댑터 패턴을 살펴보세요. 클래스와 API 간의 불일치를 처리하기 위해 패키징이 수행됩니다. 이 패턴을 사용하는 개체를 래퍼라고도 합니다.
예를 들어, 인터페이스가 있습니다:

function api (x1, x2, x3) {
  console.log(x1 + x2 + x3);  // 用console.log来模拟接口的相关操作
}

그리고 객체 데이터가 있습니다:

var obj = {
  a: '我',
  b: '很',
  c: '帅'
}

데이터가 인터페이스의 매개변수와 일치하지 않는다는 것을 알 수 있으며 API를 호출하기 위해 obj를 직접 입력할 수 없습니다.
이제 무엇을 해야 할까요? 어댑터 함수를 정의할 수 있습니다:

function adapter (o) {
  // 通过适配器函数来调用目的api
  api(o.a, o.b, o.c);
} 

adapter(obj);
// 我很帅

이런 방식으로 어댑터 함수 Adapter()를 통해 obj를 직접 전달하여 API를 호출할 수 있으며 클래스와 API 간의 불일치 문제가 해결됩니다.

어댑터 패턴은 클래스와 API 간의 불일치를 처리하기 위해 기존 인터페이스를 새로운 인터페이스로 래핑하는 것입니다. 이 패턴을 사용하는 개체를 래퍼라고도 합니다.
적용 가능한 상황

기존 개체를 사용하지만 해당 개체의 메서드나 속성 인터페이스가 요구 사항을 충족하지 않습니다.
관련되지 않거나 보이지 않는 다른 개체와 함께 작동할 수 있는 재사용 가능한 개체를 만들고 싶습니다.
사용하려는 개체가 이미 존재하지만 각 개체에 대해 프로토타입 상속을 사용할 수 없습니다. 인터페이스를 일치시킵니다. 개체 어댑터는 상위 개체의 인터페이스 메서드나 속성을 조정할 수 있습니다.

다른 모드와의 차이점

어댑터와 브리지는 유사하지만 브리징의 시작점은 다릅니다. 브리징의 목적은 인터페이스 부분과 구현 부분을 분리하여 더 쉽게 할 수 있도록 하는 것입니다. 그리고 더 독립적으로 변경됩니다.
데코레이터 패턴은 인터페이스를 변경하지 않고도 객체의 기능을 향상시키므로 어댑터보다 프로그램에 더 나은 투명성을 제공합니다.
프록시 모드는 인터페이스를 변경하지 않고 다른 인터페이스에 대한 프록시를 정의합니다.
파사드 모드는 인터페이스를 단순화하기 위한 것으로 추가 옵션을 제공하지 않습니다.
어댑터는 하나의 인터페이스를 다른 인터페이스로 변환하며 특정 기능을 필터링하거나 인터페이스를 단순화하지 않습니다.