JavaScript デザイン パターン アダプター パターンの簡単な紹介

アダプター パターン (アダプター)

アダプター パターンは、主に 2 つの既存のインターフェイス間の不一致の問題を解決するために使用されます。これらのインターフェイスがどのように実装されるか、または将来どのように進化するかは考慮されていません。アダプター パターンを使用すると、既存のインターフェイスを変更せずに連携できます。

アダプターのエイリアスはラッパー (wrapper) であり、これは比較的単純なパターンです。プログラム開発には多くのシナリオがあります。モジュールまたはオブジェクトのインターフェイスを呼び出そうとすると、このインターフェイスの形式が現在のニーズを満たしていないことがわかります。現時点では 2 つの解決策があります。1 つ目は、元のインターフェイスの実装を変更することです。ただし、元のモジュールが非常に複雑である場合、または取得したモジュールが他の人によって書かれた圧縮コードである場合、元のインターフェイスを変更するのは現実的ではありません。 。 2 番目の方法は、元のインターフェイスを顧客が必要とする別のインターフェイスに変換するアダプターを作成することです。顧客はアダプターを扱うだけで済みます。 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.5 mm 丸穴インターフェイスから Apple 独自のライトニング インターフェイスに変更されました。多くの人は、新しく購入した iPhone で音楽を聴くために、以前の丸穴ヘッドフォン用に以下のアダプターを必要とします。

2.パターン使用シナリオ

2.1 インターフェースの適応

googleMap と baiduMap、googleMap と </code >baiduMap の両方に「表示」リクエストを発行する場合` 独自の方法でページ上に地図を表示します<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{ brand: String os: String carrier:? String language:? String network:? String}</pre><div class="contentsignin">ログイン後にコピー</div></div></p> このプログラムのスムーズな動作の鍵は、<code>googleMap と baiduMap が一貫した show</ code> メソッドを使用しますが、サードパーティのインターフェイス メソッドは私たちの制御範囲外です。<code>baiduMap によって提供される地図を表示するメソッドが show と呼ばれるものではなく、どうなるでしょうか。 表示?

baiduMap このオブジェクトはサードパーティから提供されたもので、通常の状況では変更すべきではありませんが、変更できない場合もあります。この時点で、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 つのパラメーターを渡す必要があります。渡された値が 3 より大きい場合は、 $.ajax で行ったのと同じように、パラメータをオブジェクトにマージすることを検討できます。以下では、systemInfo のパラメータ インターフェイスを次のように定義できます (文字列はパラメータのタイプを表し、?: はオプションのオプションを表します)

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

キャリア、言語、ネットワークが示されていることがわかります。属性は渡す必要はなく、メソッド内でいくつかのデフォルト値に設定できます。したがって、現時点では、メソッド内でアダプターを使用して、このパラメーター オブジェクトに適応できます。この方法は、プラグインまたは npm パッケージで一般的です。

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

2.3 データ適応

データ適応は、フロントエンドで最も一般的なシナリオです。現時点では、アダプターはデータの依存関係を解決する上で重要な役割を果たします。フロントエンドとバックエンドの意味。通常、サーバーによって渡されるデータは、フロントエンドで使用する必要があるデータ形式と一致しません。特に、一部の UI フレームワークを使用する場合、フレームワークによって指定されるデータは固定形式です。したがって、現時点ではバックエンドのデータ形式を適応させる必要があります。

たとえば、Echarts の折れ線グラフを使用した Web サイトの週次 UV があります。通常、バックエンドによって返されるデータ形式は次のとおりです。

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

ただし、Echarts で必要な X 軸のデータ形式と座標点データは次のとおりです。の:🎜rrreee🎜 これは、アダプターを使用してバックエンドからの戻りデータを調整する方法です:🎜rrreee🎜3 概要🎜🎜 アダプター パターンは、比較的単純なパターンのペアです。ただし、アダプター パターンには、パラメーターの適応に関して多くの使用シナリオがあり、多くのライブラリとフレームワークがアダプター パターンを使用します。データの適応は、フロントエンドとバックエンドのデータの依存関係を解決する上で非常に重要です。認識する必要があるのは、アダプター モードは本質的に、2 つの既存のインターフェイス間の非互換性の問題を解決するためのモードであるということです。設計の初めに、インターフェース全体の一貫性を計画できるため、アダプターの使用はできるだけ少なくする必要があります。 🎜🎜 JavaScript のアダプターはオブジェクト間で使用されることが多く、オブジェクトを使用可能にするためには、オブジェクトを分割して再構築する必要があります。これも、アダプターの出現パターンとの違いです。もちろん、割り当てモデルはオブジェクト間の結合も解決し、パッケージ化された適応コードによりリソース消費がいくらか増加しますが、これは最小限です。 🎜🎜関連記事: 🎜🎜🎜デザインパターン(アダプター) 🎜🎜

JavaScript デザインパターン シリーズ 5: アダプター パターン

以上がJavaScript デザイン パターン アダプター パターンの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。