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

어댑터 패턴의 역할은 두 소프트웨어 엔터티 간의 인터페이스 비호환성 문제를 해결하는 것입니다. 이는 JavaScript, 특히 AJAX에서 더 일반적으로 사용됩니다. 다음으로 JavaScript 디자인 패턴에서 어댑터 어댑터 패턴의 애플리케이션 분석을 살펴보겠습니다. 프로그래밍

Definition
어댑터 패턴(어댑터)은 클래스(객체)의 인터페이스(메서드 또는 속성)를 고객이 원하는 다른 인터페이스(메서드 또는 속성)로 변환하는 것입니다. 어댑터 패턴은 작동하지 않는 클래스를 만듭니다. 호환되지 않는 인터페이스(객체)로 인해 함께 작동할 수 있습니다. 인스턴트 래퍼.

어댑터의 별칭은 래퍼(Wrapper)로 비교적 단순한 패턴입니다. 프로그램 개발에는 다양한 시나리오가 있습니다. 모듈이나 개체의 인터페이스를 호출하려고 하면 이 인터페이스의 형식이 현재 요구 사항을 충족하지 않는다는 것을 알게 됩니다. 현재로서는 두 가지 해결책이 있습니다. 첫 번째는 원래 인터페이스 구현을 수정하는 것입니다. 그러나 원래 모듈이 매우 복잡하거나 우리가 얻는 모듈이 다른 사람이 작성한 압축 코드인 경우 원래 인터페이스를 수정하는 것은 현실적이지 않습니다. . 두 번째 방법은 어댑터를 만들어 원래 인터페이스를 고객이 원하는 다른 인터페이스로 변환하는 것입니다.

어댑터 모드를 사용해야 하는 이유는 무엇인가요?
애플리케이션을 개발할 때 특정 부분(예: 로그를 저장하는 데 사용하는 라이브러리 등)을 교체해야 하는 경우가 종종 있습니다. 새 라이브러리로 교체하면 새 라이브러리가 정확히 동일한 인터페이스를 가질 가능성은 거의 없습니다. 여기에서는 두 가지 옵션이 있습니다:
(1) 모든 코드를 확인하고 이전 라이브러리를 가리키는 모든 것을 변경합니다.
(2) 새 라이브러리가 이전 라이브러리와 동일한 인터페이스를 사용할 수 있도록 어댑터를 만듭니다.
분명히 어떤 경우에는 애플리케이션이 작거나 이전 라이브러리에 대한 참조가 거의 없다면 새 추상화 레이어를 추가하는 것보다 전체 코드를 살펴보고 새 라이브러리에 맞게 변경하는 것이 더 적절합니다. 코드가 더 복잡해졌습니다. 그러나 대부분의 경우 어댑터를 만드는 것이 더 실용적이고 시간을 절약해 줍니다.

JavaScript 코드 예제

무슨 일이 일어날 수 있으면 일어날 것입니다. 먼저 우리가 사용하는 로깅 인터페이스를 더 쉽게 수정할 수 있는 작은 LoggerFactory를 살펴보겠습니다.

var LoggerFactory = {
  getLogger: function() {
    return window.console;
  },
  ...
};

/* 用法示例 */
var logger = LoggerFactory.getLogger();
logger.log("something to log");

getLogger를 호출하면 콘솔 개체(콘솔)가 반환됩니다. 이 연습의 목적을 위해 콘솔 객체에는 로그라는 하나의 메소드만 있고 문자열 유형의 매개변수 하나만 허용할 수 있다고 가정하겠습니다. 다음으로 또 다른 로그 인터페이스가 있습니다. 이 인터페이스는 1) JavaScript로 구현되고 콘솔과 같은 브라우저에 고유하지 않기 때문에 더 복잡합니다. 2) AJAX를 통해 서버에 로그를 보냅니다. 우리는 URL 데이터를 인코딩해야 합니다(코드는 우리가 이야기할 어댑터 패턴과 아무 관련이 없기 때문에 URL 인코딩을 구체적으로 구현하지 않습니다). 물론 콘솔과는 다른 인터페이스를 사용하게 됩니다.

var AjaxLogger = {
  sendLog: function() {
    var data = this.urlEncode(arguments);

    jQuery.ajax({
      url: "http://example.com/log",
      data: data
    });
  },

  urlEncode: function(arg) {
    ...
    return encodedData;
  },
  ...
};

우리는 주로 시간을 절약하고 어댑터 패턴으로 수행하고 싶지 않은 작업을 무시하기 위해 jQuery의 AJAX 요청을 사용합니다. 지금 해야 할 일은 어댑터를 생성하고 이전 LoggerFactory를 변경하여 콘솔 개체 대신 이 어댑터를 반환하는 것입니다.

var AjaxLoggerAdapter = {
  log: function(arg) {
    AjaxLogger.sendLog(arg);
  }
};

/* 调整 LoggerFactory */

var LoggerFactory = {
  getLogger: function() {
    // 改变返回值
    return AjaxLoggerAdapter;
  },
  ...
};

기존 코드에서 한 줄만 변경했으며 전체 프로그램에서 이 새로운 로깅 인터페이스를 사용할 수 있습니다.

복잡한 어댑터

로깅 인터페이스는 매우 간단한 예입니다. 메서드가 하나뿐이므로 이전 메서드에 직접 매핑하는 것도 어렵지 않습니다. 대부분의 경우에는 그렇지 않습니다. 서로 매핑되는 이러한 함수의 매개변수가 완전히 다른 문제가 발생할 수 있습니다. 이전 인터페이스에는 이러한 매개변수가 전혀 없을 수 있으며 직접 처리해야 합니다. 어떤 경우에는 새 인터페이스에서 해당 매개변수를 사용하지 않기 때문에 일부 매개변수를 삭제해야 합니다. 두 개체 간의 인터페이스 매핑이 너무 어렵다면 다른 방법을 생각해야 합니다. 어쨌든 수천 줄의 오래된 코드를 찾아서 수정하고 싶지 않습니다.

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

관련 글:

JavaScript typeof, null, undefine 관련 지식

JavaScript Boolean(Boolean) 관련 지식 및 객체 사용법

JavaScript Date(날짜) 관련 지식 및 사용법

위 내용은 JavaScript 디자인 패턴 프로그래밍에서 어댑터 어댑터 패턴 적용 요약(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!