Eine kurze Einführung in das JavaScript-Designmuster-Adaptermuster

Adaptermuster (Adapter)

Das Adaptermuster wird hauptsächlich zur Lösung des Problems der Nichtübereinstimmung zwischen zwei vorhandenen Schnittstellen verwendet. Es berücksichtigt nicht, wie diese Schnittstellen implementiert werden. , ohne darüber nachzudenken, wie sie sich in Zukunft entwickeln könnten. Das Adaptermuster ermöglicht die Zusammenarbeit vorhandener Schnittstellen, ohne dass diese geändert werden müssen.

Ein Alias ​​für einen Adapter ist Wrapper (wrapper), ein relativ einfaches Muster. In der Programmentwicklung gibt es viele Szenarien: Wenn wir versuchen, eine Schnittstelle eines Moduls oder Objekts aufzurufen, stellen wir fest, dass das Format dieser Schnittstelle nicht den aktuellen Anforderungen entspricht. Derzeit gibt es zwei Lösungen. Die erste besteht darin, die ursprüngliche Schnittstellenimplementierung zu ändern. Wenn das ursprüngliche Modul jedoch sehr komplex ist oder das Modul, das wir erhalten, ein von jemand anderem geschriebener komprimierter Code ist, ist eine Änderung der ursprünglichen Schnittstelle nicht realistisch. . Die zweite Methode besteht darin, einen Adapter zu erstellen, um die ursprüngliche Schnittstelle in eine andere vom Kunden gewünschte Schnittstelle umzuwandeln. Der Kunde muss sich nur mit dem Adapter befassen.

In der Realität gibt es viele Beispiele für Adapter: Steckdosen, USB-Adapter usw.; zum Beispiel wurde die Kopfhörerbuchse nach dem iPhone 7 von einer 3,5-mm-Rundlochschnittstelle auf die exklusive Lightning-Schnittstelle von Apple umgestellt. Viele Menschen benötigen einen untenstehenden Adapter für ihre bisherigen Rundkopfhörer, um auf ihrem neu gekauften iPhone Musik hören zu können.

2. Adaptermodus-Nutzungsszenarien

2.1 Schnittstellenanpassung

Wenn wir uns auf googleMap 和baiduMap都发出“显示”请求时，googleMapbaiduMap` zeigt die Karte auf der Seite auf seine eigene Weise an 和

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);  // 输出：开始渲染百度地图

Der Schlüssel zum reibungslosen Ablauf dieses Programms liegt darin, dass

und googleMap dieselbe baiduMap-Methode bereitstellen, aber die dritte- Party-Schnittstellenmethoden unterliegen nicht unserer eigenen Kontrolle. Was passiert, wenn die von show bereitgestellte Methode nicht baiduMap, sondern show heißt? display

Dieses Objekt stammt von einem Dritten. Unter normalen Umständen sollten wir es nicht ändern, und manchmal können wir es auch nicht ändern. An dieser Stelle können wir das Problem lösen, indem wir baiduMap hinzufügen: 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 Parameteranpassung

In einigen Fällen muss eine Methode möglicherweise mehrere Parameter übergeben, beispielsweise bei der Überwachung Beim Melden des SDK können viele Daten erfasst werden. In dieser Klasse gibt es ein

, und es müssen fünf Parameter übergeben werden, um relevante Informationen über das Mobiltelefon zu erhalten: systemInfo

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

Normalerweise, wenn die Wenn die übergebenen Parameter größer als 3 sind, können wir erwägen, die Parameter in einem Objekt zusammenzuführen, genau wie wir es mit

gemacht haben. Im Folgenden können wir die Parameterschnittstelle von $.ajax wie folgt definieren (String stellt den Parametertyp dar, systemInfo stellt optional dar) ?:

{
  brand: String
  os: String
  carrier:? String
  language:? String
  network:? String}

Es ist ersichtlich, dass die drei Attribute Träger, Sprache und Netzwerk nicht unbedingt erforderlich sind Wenn sie übergeben werden, sind in der Methode möglicherweise einige Standardwerte festgelegt. Zu diesem Zeitpunkt können wir also einen Adapter innerhalb der Methode verwenden, um uns an dieses Parameterobjekt anzupassen. Diese Methode ist in unseren Plug-Ins oder NPM-Paketen üblich.

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.3 Datenanpassung

Die Datenanpassung ist derzeit das häufigste Szenario im Frontend ist von großer Bedeutung, um die Datenabhängigkeit von Front-End und Back-End zu lösen. Normalerweise stimmen die vom Server übergebenen Daten nicht mit dem Datenformat überein, das wir im Frontend verwenden müssen. Insbesondere bei der Verwendung einiger UI-Frameworks haben die vom Framework angegebenen Daten ein festes Format. Daher müssen wir zu diesem Zeitpunkt das Back-End-Datenformat anpassen.

Zum Beispiel gibt es auf der Website ein wöchentliches UV-Diagramm mit Echarts-Liniendiagramm. Normalerweise ist das vom Backend zurückgegebene Datenformat wie folgt:

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

Echarts erfordert jedoch das x-Achsen-Datenformat und Die Daten des Koordinatenpunkts sehen so aus:

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

Wir können also einen Adapter verwenden, um die Rückgabedaten vom Backend anzupassen:

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

3 Zusammenfassung

Adaptermuster sind ein Paar relativ einfacher Muster. Das Adaptermuster hat jedoch viele Verwendungsszenarien in JS. Im Hinblick auf die Parameteranpassung ist die Adapterdatenanpassung für die Lösung von Front-End- und Back-End-Datenabhängigkeiten sehr wichtig. Wir müssen uns darüber im Klaren sein, dass der Adaptermodus im Wesentlichen ein „Nachholmodus“ ist. Er löst das Problem der Inkompatibilität zwischen den beiden vorhandenen Schnittstellen. Sie sollten diesen Modus nicht in der frühen Entwicklungsphase der Software verwenden Zu Beginn des Entwurfs können wir die Konsistenz der Schnittstelle als Ganzes planen, sodass der Adapter so wenig wie möglich verwendet werden sollte.

Adapter in JavaScript werden eher zwischen Objekten verwendet. Um das Objekt nutzbar zu machen, teilen wir das Objekt normalerweise auf und setzen es wieder zusammen. Daher müssen wir die interne Struktur des adaptierenden Objekts verstehen, was auch der Unterschied zwischen Der Erscheinungsmodus besteht natürlich darin, dass der Zuordnungsmodus auch die Kopplung zwischen Objekten löst. Der gepackte Anpassungscode erhöht den Ressourcenverbrauch, dieser ist jedoch minimal.

Verwandte Artikel:

Entwurfsmuster (Adapter)

JavaScript-Designmuster Serie 5: Adaptermuster

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in das JavaScript-Designmuster-Adaptermuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!