JavaScript 디자인 패턴 어댑터 패턴에 대한 간략한 소개

어댑터 패턴(Adapter)

어댑터 패턴은 주로 기존 두 인터페이스 간의 불일치 문제를 해결하는 데 사용됩니다. 이러한 인터페이스가 어떻게 구현되는지, 향후 어떻게 발전할지 고려하지 않습니다. 어댑터 패턴을 사용하면 기존 인터페이스를 변경하지 않고도 함께 작동할 수 있습니다.

어댑터의 별칭은 비교적 간단한 패턴인 래퍼(wrapper)입니다. 프로그램 개발에는 다양한 시나리오가 있습니다. 모듈이나 개체의 인터페이스를 호출하려고 하면 이 인터페이스의 형식이 현재 요구 사항을 충족하지 않는다는 것을 알게 됩니다. 현재로서는 두 가지 해결책이 있습니다. 첫 번째는 원래 인터페이스 구현을 수정하는 것입니다. 그러나 원래 모듈이 매우 복잡하거나 우리가 얻는 모듈이 다른 사람이 작성한 압축 코드인 경우 원래 인터페이스를 수정하는 것은 현실적이지 않습니다. . 두 번째 방법은 어댑터를 만들어 원래 인터페이스를 고객이 원하는 다른 인터페이스로 변환하는 것입니다. wrapper），这是一个相对简单的模式。在程序开发中有许多这样的场景：当我们试图调用模块或者对象的某个接口时，却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法，第一种是修改原来的接口实现，但如果原来的模块很复杂，或者我们拿到的模块是一段别人编写的经过压缩的代码，修改原接口就显得不太现实了。第二种办法是创建一个适配器，将原接口转换为客户希望的另一个接口，客户只需要和适配器打交道。

现实中也有很多适配器的例子：电源插座，usb适配器等等；例如iPhone7以后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的 lightning接口。许多人以前的圆孔耳机就需要下面的一个适配器，才能够在自个儿新买的iPhone上面听歌。

2. 适配器模式使用场景

2.1 接口适配

当我们向googleMap 和baiduMap都发出“显示”请求时，googleMap和baiduMap` 分别以各自的方式在页面中展现了地图

const googleMap = {
  show: function () {
    console.log('开始渲染谷歌地图');
  }
};const baiduMap = {
  show: function () {
    console.log('开始渲染百度地图');
  }
};const renderMap = function (map) {
  if (map.show instanceof Function) {
    map.show();
  }
};

renderMap(googleMap); // 输出：开始渲染谷歌地图renderMap(baiduMap);  // 输出：开始渲染百度地图

这段程序得以顺利运行的关键是googleMap 和baiduMap 提供了一致的show 方法，但第三方的接口方法并不在我们自己的控制范围之内，假如baiduMap 提供的显示地图的方法不叫show 而叫display 呢？

baiduMap 这个对象来源于第三方，正常情况下我们都不应该去改动它,而且有时候我们也改不了它。此时我们可以通过增加baiduMapAdapter 来解决问题：

const googleMap = {
  show: function () {
    console.log('开始渲染谷歌地图');
  }
};const baiduMap = {
  display: function () {
    console.log('开始渲染百度地图');
  }
};const baiduMapAdapter = {
  show: function(){
    return baiduMap.display();
  }
};

renderMap(googleMap);       // 输出：开始渲染谷歌地图renderMap(baiduMapAdapter); // 输出：开始渲染百度地图

2.2 参数的适配

有的情况下一个方法可能需要传入多个参数，例如在做一些监控上报的SDK时，可能采集的数据比较多，这个类中有一个systemInfo，需要传入五个参数用于接收手机的相关信息：

class SDK {
  systemInf(brand, os, carrier, language, network) {    //dosomething.....
  }
}

通常在传入的参数大于3的时候，我们就可以考虑将参数合并为一个对象的形式，就像我们$.ajax的做法一样。下面我们可以将systemInfo的参数接口定义如下（String代表参数类型，?:

실제로는 전원 소켓, USB 어댑터 등 어댑터의 예가 많이 있습니다. 예를 들어 iPhone 7 이후의 헤드폰 잭은 3.5mm 둥근 구멍 인터페이스에서 Apple의 독점적인 라이트닝 인터페이스로 변경되었습니다. 많은 사람들이 새로 구입한 iPhone에서 음악을 들으려면 이전 둥근 구멍 헤드폰에 아래 어댑터가 필요합니다.

2. 패턴 사용 시나리오

2.1 인터페이스 적응

googleMap 및 baiduMap, googleMap 및 </code >baiduMap 모두에 "표시" 요청을 발행하는 경우 ` 페이지에 지도를 고유한 방식으로 표시합니다<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">{ brand: String os: String carrier:? String language:? String network:? String}</pre><div class="contentsignin">로그인 후 복사</div></div></p> 이 프로그램의 원활한 실행의 핵심은 <code>googleMap과 baiduMap이 일관된 표시</code를 제공한다는 것입니다. code> 메소드를 호출했지만 타사 인터페이스 메소드가 우리의 통제 범위 내에 있지 않습니다. <code>baiduMap에서 제공하는 지도 표시 메소드가 show가 아닌 호출되는 경우 어떻게 될까요? 디스플레이?

baiduMap 이 개체는 제3자에서 가져온 것입니다. 일반적인 상황에서는 변경해서는 안 되며 때로는 변경할 수 없는 경우도 있습니다. 이 시점에서 baiduMapAdapter를 추가하여 문제를 해결할 수 있습니다.

class SDK {
  systemInf(config) {    let defaultConfig = {
      brand: null,  //手机品牌
      os: null, //系统类型： Andoird或 iOS
      carrier: 'china-mobile', //运营商，默认中国移动
      language: 'zh', //语言类型，默认中文
      network: 'wifi', //网络类型，默认wifi
    }    //参数适配
    for( let i in config) {
      defaultConfig[i] = config[i] || defaultConfig[i];
    }    //dosomething.....
  }
}

2.2 매개변수 적응

어떤 경우에는 모니터링 및 보고 SDK를 수행할 때와 같이 메서드가 여러 매개변수를 전달해야 할 수도 있습니다. 때가 되면 더 많은 데이터가 수집될 수 있습니다. 이 클래스에는 systemInfo가 있으며 휴대폰에 대한 관련 정보를 받으려면 5개의 매개변수를 전달해야 합니다.

[
  {    "day": "周一",    "uv": 6300
  },
  {    "day": "周二",    "uv": 7100
  },  {    "day": "周三",    "uv": 4300
  },  {    "day": "周四",    "uv": 3300
  },  {    "day": "周五",    "uv": 8300
  },  {    "day": "周六",    "uv": 9300
  }, {    "day": "周日",    "uv": 11300
  }
]

보통 매개변수가 전달된 값이 3보다 큰 경우 $.ajax에서 수행한 것과 마찬가지로 매개변수를 객체로 병합하는 것을 고려할 수 있습니다. 아래에서 systemInfo의 매개변수 인터페이스를 다음과 같이 정의할 수 있습니다(문자열은 매개변수 유형을 나타내고, ?:는 선택적 옵션을 나타냄)

["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //x轴的数据[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐标点的数据

통신사, 언어 및 네트워크를 볼 수 있습니다 세 가지 속성은 전달될 필요가 없으며 메소드 내부에서 일부 기본값으로 설정될 수 있습니다. 따라서 현재 이 매개변수 개체에 적응하기 위해 메서드 내부의 어댑터를 사용할 수 있습니다. 이 방법은 플러그인 또는 npm 패키지에서 일반적입니다.

//x轴适配器function echartXAxisAdapter(res) {
  return res.map(item => item.day);
}//坐标点适配器function echartDataAdapter(res) {
  return res.map(item => item.uv);
}

2.3 데이터 적응

데이터 적응은 프런트 엔드에서 가장 일반적인 시나리오입니다. 이때 어댑터는 데이터 종속성을 해결하는 데 중요한 역할을 합니다. 프론트엔드와 백엔드의 의미. 일반적으로 서버에서 전달되는 데이터는 프런트 엔드에서 사용해야 하는 데이터 형식과 일치하지 않습니다. 특히 일부 UI 프레임워크를 사용할 때 프레임워크에서 지정하는 데이터는 고정된 형식을 갖습니다. 따라서 현재로서는 백엔드 데이터 형식을 조정해야 합니다.

예를 들어 Echarts 꺾은선형 차트를 사용하는 웹사이트에는 주간 uv가 있습니다. 일반적으로 백엔드에서 반환되는 데이터 형식은 다음과 같습니다. 🎜rrreee🎜그러나 Echarts에서 요구하는 x축 데이터 형식과 좌표점 데이터는 다음과 같습니다. of:🎜rrreee🎜이것은 어댑터를 사용하여 백엔드의 반환 데이터를 조정할 수 있는 방법입니다:🎜rrreee🎜3 요약🎜🎜어댑터 패턴은 비교적 간단한 패턴의 쌍입니다. 그러나 어댑터 패턴은 JS에서 많은 사용 시나리오를 가지고 있으며, 많은 라이브러리와 프레임워크는 프런트엔드 및 백엔드 데이터 종속성을 해결하는 데 매우 중요합니다. 우리가 깨달아야 할 것은 어댑터 모드가 본질적으로 "보충" 모드라는 것입니다. 이는 두 기존 인터페이스 간의 비호환성 문제를 해결합니다. 디자인 초기에는 인터페이스의 일관성을 전체적으로 계획할 수 있으므로 어댑터의 사용을 최소화하는 것이 좋습니다. 🎜🎜JavaScript에서는 객체 사이에 어댑터를 더 많이 사용합니다. 객체를 사용 가능하게 만들기 위해서는 일반적으로 객체를 분할하고 다시 조립하므로 적응 객체의 내부 구조를 이해해야 합니다. 물론 할당 모델은 객체 간의 결합도 해결하며 패키지된 적응 코드는 일부 리소스 소비를 증가시키지만 이는 최소화됩니다. 🎜🎜관련 기사: 🎜🎜🎜디자인 패턴(어댑터) 🎜🎜

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

위 내용은 JavaScript 디자인 패턴 어댑터 패턴에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!