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.
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); // 输出:开始渲染百度地图
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); // 输出:开始渲染百度地图
, 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..... } }
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}
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..... } }
[ { "day": "周一", "uv": 6300 }, { "day": "周二", "uv": 7100 }, { "day": "周三", "uv": 4300 }, { "day": "周四", "uv": 3300 }, { "day": "周五", "uv": 8300 }, { "day": "周六", "uv": 9300 }, { "day": "周日", "uv": 11300 } ]
["周二", "周二", "周三", "周四", "周五", "周六", "周日"] //x轴的数据[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐标点的数据
//x轴适配器function echartXAxisAdapter(res) { return res.map(item => item.day); }//坐标点适配器function echartDataAdapter(res) { return res.map(item => item.uv); }
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!