JavaScript-Entwurfsmuster, Lernadaptermuster

Überblick

Das Adaptermuster ist ein Muster aus der Verhaltensmuster-Familie der Entwurfsmuster;

Definition:

Adapter werden verwendet, um das Problem der Nichtübereinstimmung zwischen zwei vorhandenen Schnittstellen zu lösen. Dabei muss nicht berücksichtigt werden, wie die Schnittstelle implementiert ist oder wie sie in Zukunft geändert werden sollte. Adapter müssen die vorhandenen Schnittstellen nicht ändern, damit sie zusammenarbeiten.

Umgangssprachliche Erklärung:

Sie haben ein Elektrogerät gekauft und wollten es mit nach Hause nehmen, um seinen Charme zu erleben. Als Sie es mit nach Hause nahmen und es anschließen wollten, stellten Sie fest, dass das Gerät nur Zweilochsteckdosen unterstützt, während die Steckdosen in Ihrem Haus alle Dreilochsteckdosen sind. Sie können nicht in den Elektrogeräteladen gehen, um das Produkt zurückzugeben. Plötzlich haben Sie eine Idee und erinnern sich, dass Sie zu Hause eine Multifunktionssteckdose haben, die zufällig drei Löcher hat. Also nehmen Sie Ihre Multifunktionssteckdose heraus und stecken sie in die Steckdose. Dann stecken Sie die Steckdose Ihres Elektrogeräts in die Zweilochsteckdose über der Multifunktionssteckdose und beginnen, ein glückliches Leben zu genießen. Die Multifunktionssteckdose ist hier ein Adapter.

Code-Implementierung

var googleMap = {
    anzeigen: Funktion(){
        console.log('Mit dem Rendern von Google Maps beginnen');
    }
};
var baiduMap = {
    anzeigen: Funktion(){
        console.log('Mit dem Rendern der Baidu-Karte beginnen');
    }
};
var renderMap = Funktion( map ){
    wenn (map.show-Instanz der Funktion) {
        Karte.zeigen();
    }
};

renderMap(googleMap); // Starten Sie das Rendern der Google-Karte renderMap(baiduMap); // Starten Sie das Rendern der Baidu-Karte

Natürlich kann der obige Code normal ausgeführt werden, da die Parameternamen in den beiden Objekten gleich sind, sodass er normal ausgeführt und angezeigt werden kann.

var googleMap = {
    anzeigen: Funktion(){
        console.log('Mit dem Rendern von Google Maps beginnen');
    }
};
var baiduMap = {
    Anzeige: Funktion(){
        console.log('Mit dem Rendern der Baidu-Karte beginnen');
    }
};

Was passiert, wenn sich der Methodenname von BaiduMap eines Tages plötzlich ändert? Wenn wir es dann wie oben ausführen, erhalten wir definitiv einen Fehler, da die Methode show() im BaiduMap-Objekt nicht mehr vorhanden ist.

Verwenden Sie das Adaptermuster, um Folgendes zu ändern:

var googleMap = {
    anzeigen: Funktion(){
        console.log('Mit dem Rendern von Google Maps beginnen');
    }
};
var baiduMap = {
    Anzeige: Funktion(){
        console.log('Mit dem Rendern der Baidu-Karte beginnen');
    }
};
var baiduMapAdapter = {
    anzeigen: Funktion(){
        gibt baiduMap.display() zurück;

    }
};

renderMap(googleMap); // Starten Sie das Rendern der Google-Karte renderMap(baiduMapAdapter); // Starten Sie das Rendern der Baidu-Karte

In diesem Code macht der Adapter etwas sehr Einfaches. Er erstellt ein Objekt, fügt eine gleichnamige show()-Methode hinzu und ruft dann die baiduMap.display()-Methode im Adapter auf. Auf diese Weise müssen wir unseren Adapter nur aufrufen, wenn wir baiduMap aufrufen, um den gewünschten Effekt zu erzielen.

Als Front-End-Entwickler müssen wir ein besseres Verständnis für die auf der Seite erwarteten Daten und Datenformate haben. Im Entwicklungsmodell mit Trennung von Front-End und Back-End stoßen wir jedoch manchmal auf diese peinliche Situation:

Wir alle wissen, dass viele UI-Komponenten oder Tool-Bibliotheken gemäß dem angegebenen Datenformat gerendert werden, aber das Backend weiß dies derzeit nicht. Daher können wir die Daten möglicherweise nicht normal direkt von der Benutzeroberfläche auf der Seite rendern. Zu diesem Zeitpunkt fordert uns der Chef auf, schnell online zu gehen, aber das Backend besteht darauf, dass das Datenformat in Ordnung ist, und weigert sich, es zu ändern. Zu diesem Zeitpunkt können wir den Adaptermodus verwenden, um die Daten auf dem Front-End zu formatieren.

Das vom Backend zurückgegebene JSON-Datenformat ist:

[
  {
    "day": "Montag",
    "uv": 6300
  },
  {
    "day": "Dienstag",
    "uv": 7100
  }, {
    "day": "Mittwoch",
    "uv": 4300
  }, {
    "day": "Donnerstag",
    "uv": 3300
  }, {
    "Tag": "Freitag",
    "uv": 8300
  }, {
    "day": "Samstag",
    "uv": 9300
  }, {
    "day": "Sonntag",
    "uv": 11300
  }
]

Für Echarts-Diagrammgrafiken ist das folgende Datenformat erforderlich:

["Dienstag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"] //x-Achsendaten [6300. 7100, 4300, 3300, 8300, 9300, 11300] //Koordinatenpunktdaten

Auch wenn es wehtut, müssen wir das Problem lösen! Verwenden Sie einen Adapter, um Folgendes zu lösen:

//x-Achsen-Adapterfunktion echartXAxisAdapter(res) {
  gibt res.map zurück (Artikel => Artikel.Tag);
}

//Koordinatenpunkt-Adapterfunktion echartDataAdapter(res) {
  : Gibt die Variable item.uv zurück.
}

Das Problem kann gelöst werden, indem zwei Funktionen erstellt werden, um die Daten entsprechend dem von eCharts benötigten Datenformat zu formatieren. Diese beiden Methoden sind eigentlich ein Adapter. Indem wir die angegebenen Daten hineinwerfen, können wir das erwartete Datenformat gemäß den angegebenen Regeln ausgeben.

Zusammenfassen

Ich persönlich denke, dass das Adaptermuster eigentlich ein Entwurfsmuster ist, das verwendet wird, um den Verlust auszugleichen. Wenn wir zu Beginn der Projektentwicklung das erwartete Datenformat oder den erwarteten Methodennamen kennen, verwenden wir das Adaptermuster möglicherweise nie. Die Iteration des Projekts ist jedoch häufig unvorhersehbar. Wenn sich das Datenformat oder der Methodenname nach der Projektiteration ändert, können wir normalerweise das Adaptermuster verwenden, um es anzupassen und zu lösen. Die beste Lösung besteht natürlich darin, die Codespezifikationen wie Datenformat und Dateinamen während des Projektentwicklungsprozesses zwischen dem Front-End und dem Back-End auszuhandeln und zu diskutieren, was die Entwicklungseffizienz des Projekts erheblich verbessern wird.

Oben sind die Details des Adaptermusters beim Erlernen von JavaScript-Entwurfsmustern aufgeführt. Weitere Informationen zu JavaScript-Entwurfsmustern finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!