Ausführliche Erklärung zur Implementierung des Adaptermusters in Entwurfsmuster in JavaScript (grafisches Tutorial)

Das Adaptermuster kann eine Schnittstelle je nach Bedarf konvertieren (oder anpassen), ein anderes Objekt erstellen, das die von Ihnen benötigte Schnittstelle enthält, und es mit dem Objekt verbinden, dessen Schnittstelle Sie ändern möchten, um diese Konvertierung abzuschließen Methoden zur Implementierung des Adaptermusters in Entwurfsmustern

Manchmal stellen wir während des Entwicklungsprozesses fest, dass die vom Client benötigte Schnittstelle nicht mit der bereitgestellten Schnittstelle kompatibel ist. Aus besonderen Gründen können wir die Client-Schnittstelle nicht ändern. In diesem Fall müssen wir vorhandene Schnittstellen und inkompatible Klassen anpassen, was uns zum Adaptermuster bringt. Durch Adapter können wir sie verwenden, ohne den alten Code zu ändern. Das ist die Stärke von Adaptern.
Der Anpassungsmodus kann zur Anpassung zwischen vorhandenen Schnittstellen und inkompatiblen Klassen verwendet werden. Objekte, die diesen Modus verwenden, werden auch Wrapper genannt, da sie ein anderes Objekt mit einer neuen Schnittstelle umschließen.
Oberflächlich betrachtet ähnelt das Adaptermuster stark dem Fassadenmuster. Sie alle umschließen andere Objekte und ändern die Schnittstelle, die sie darstellen. Der Unterschied zwischen den beiden besteht darin, wie sie die Schnittstelle ändern. Fassadenelemente stellen eine vereinfachte Schnittstelle dar, die keine zusätzlichen Optionen bietet und manchmal Annahmen trifft, um die Erledigung allgemeiner Aufgaben zu erleichtern. Der Adapter wandelt eine Schnittstelle in eine andere um. Er filtert nicht bestimmte Funktionen heraus und vereinfacht die Schnittstelle nicht. Wenn die Clientsystem-API nicht verfügbar ist, ist ein Adapter erforderlich.

Grundlegende Theorie

Adaptermuster: Konvertieren Sie eine Schnittstelle in die vom Client benötigte Schnittstelle, ohne den Clientcode zu ändern, sodass inkompatible Codes zusammenarbeiten können.

Der Adapter besteht hauptsächlich aus drei Rollen:
(1) Client: die Klasse, die die Schnittstelle aufruft
(2) Adapter: die Klasse, die zum Verbinden der Client-Schnittstelle und der Schnittstelle, die Dienste bereitstellt, verwendet wird
(3) Adapter: Stellt Dienste bereit, aber die Dienstklasse ist nicht mit den Anforderungen der Clientschnittstelle kompatibel.

Implementierung des Adaptermusters

1. Der einfachste Adapter

Das Adaptermuster hinterlässt keine Vorstellungskraft Es ist so kompliziert, nehmen wir das einfachste Beispiel.
Der Client ruft eine Methode zur Additionsberechnung auf:

var result = add(1,2);

Wir stellen jedoch nicht die Additionsmethode, sondern die Summenmethode mit derselben Funktion bereit:

function sum(v1,v2){
  return v1 + v2;
}

Um dies zu vermeiden Indem wir die Client- und Dienstseite ändern, fügen wir eine Wrapper-Funktion hinzu:

function add (v1,v2){
  reutrn sum(v1,v2);
}

Dies ist das einfachste Adaptermuster. Wir fügen eine Wrapper-Methode zwischen zwei inkompatiblen Schnittstellen hinzu und verwenden diese Methode, um die beiden zu verbinden, damit sie zusammenarbeiten. .

2. Praktische Anwendung

Mit der Entwicklung von Front-End-Frameworks beginnen immer mehr Entwickler, das MVVM-Framework für die Entwicklung zu verwenden, das nur betrieben werden muss Daten ohne Bei der Manipulation von DOM-Elementen wird jQuery immer weniger nützlich. Viele Projekte verweisen immer noch auf die jQuery-Bibliothek als Toolklasse, da wir den von jQuery bereitgestellten Ajax verwenden müssen, um Daten vom Server anzufordern. Wenn die Rolle von jQuery im Projekt nur darin besteht, eine Ajax-Tool-Bibliothek zu sein, fühlt es sich an, als würde man ein Huhn mit einem leistungsstarken Tool töten, was zu einer Verschwendung von Ressourcen führt. Zu diesem Zeitpunkt können wir unsere eigene Ajax-Bibliothek vollständig kapseln.
Angenommen, der von uns gekapselte Ajax wird über eine Funktion verwendet:

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

Mit Ausnahme des Unterschieds zwischen dem Ajax der aufrufenden Schnittstelle und $.ajax von jQuery ist alles andere genau gleich.
Es muss viele Stellen im Projekt geben, die Ajax anfordern, und es ist unmöglich, $.ajax einzeln zu ändern. Was können wir zu diesem Zeitpunkt tun?

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

Auf diese Weise kann es mit altem Code und neuen Schnittstellen kompatibel sein und eine Änderung des vorhandenen Codes vermeiden.

Zusammenfassung

Das Prinzip des Adaptermusters ist sehr einfach: Es wird eine neue Verpackungsklasse hinzugefügt, um die neue Schnittstelle so zu verpacken, dass sie sich an den Aufruf der alten anpasst Code und vermeiden Sie die Änderung der Schnittstelle und des Aufrufcodes.

Anwendbare Szenarien: Es gibt viele Codeaufrufe alter Schnittstellen. Um zu vermeiden, dass alte Codes geändert und neue Schnittstellen ersetzt werden, wirken sich die Anwendungsszenarien nicht auf die vorhandenen Implementierungsmethoden aus.

1. Anwendbare Anlässe des Adaptermodus: Der Adapter eignet sich für Situationen, in denen die vom Kundensystem erwartete Schnittstelle nicht mit der von der vorhandenen API bereitgestellten Schnittstelle kompatibel ist. Die beiden vom Adapter angepassten Methoden sollten ähnliche Aufgaben erfüllen, sonst wird das Problem nicht gelöst. Genau wie bei Brückenelementen und Fassadenelementen können Sie durch die Erstellung eines Adapters eine Abstraktion von ihrer Implementierung isolieren, sodass sich beide unabhängig voneinander ändern können.

2. Vorteile des Adaptermusters: Umschließen Sie die Schnittstelle einer vorhandenen Klasse mit einer neuen Schnittstelle, sodass das Clientprogramm diese Klasse verwenden kann, die nicht darauf zugeschnitten ist. Hierfür ist kein größerer chirurgischer Eingriff erforderlich.

3. Nachteile des Adaptermodells: Manche Leute denken, dass Adapter unnötigen Overhead verursachen und durch Umschreiben von vorhandenem Code vermieden werden können. Darüber hinaus führt das Adaptermuster auch eine Reihe neuer Tools ein, die unterstützt werden müssen. Wenn die vorhandene API noch nicht finalisiert ist oder die neue Schnittstelle noch nicht finalisiert ist, funktioniert der Adapter möglicherweise nicht immer. Bei großen Systemen und Legacy-Frameworks überwiegen die Vorteile oft die Nachteile.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Implementierung der Zusammensetzung von JavaScript (detaillierte Interpretation von BOM und DOM)

Eine Zusammenfassung der Anwendung des Adapter-Adaptermusters in der JavaScript-Entwurfsmusterprogrammierung (grafisches Tutorial)

Die Verwendung und der Unterschied zwischen some() und filter() in JavaScript-Arrays (Code beigefügt)

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung des Adaptermusters in Entwurfsmuster in JavaScript (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!