Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-05-21 13:59:40
Original
1855 Leute haben es durchsucht

Das Adaptermuster wird verwendet, um das Problem der Schnittstelleninkompatibilität zwischen zwei Software-Entitäten zu lösen. Es wird häufig in JavaScript, insbesondere AJAX, verwendet. Schauen wir uns als Nächstes die Anwendungsanalyse des Adapter-Adaptermusters in der JavaScript-Designmusterprogrammierung an

Definition
Das Adaptermuster (Adapter) dient dazu, die Schnittstelle (Methode oder Attribut) einer Klasse (Objekt) in eine andere Schnittstelle (Methode oder Attribut) umzuwandeln, die der Kunde wünscht Das Adaptermuster sorgt dafür, dass die ursprünglichen Klassen (Objekte), die aufgrund inkompatibler Schnittstellen nicht zusammenarbeiten, einigermaßen funktionieren können. Instant-Wrapper.

Ein Alias ​​für einen Adapter ist 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.

Warum müssen Sie den Adaptermodus verwenden?
Bei der Entwicklung einer Anwendung müssen Sie häufig einen Teil davon ersetzen, beispielsweise eine Bibliothek, die Sie zum Speichern von Protokollen oder Ähnlichem verwenden. Wenn Sie sie durch eine neue Bibliothek ersetzen, ist es unwahrscheinlich, dass die neue Bibliothek genau dieselbe Schnittstelle hat. Von hier aus haben Sie zwei Möglichkeiten:
(1) Gehen Sie Ihren gesamten Code durch und ändern Sie alles, was auf die alte Bibliothek verweist.
(2) Erstellen Sie einen Adapter, damit die neue Bibliothek dieselbe Schnittstelle wie die alte Bibliothek verwenden kann.
Natürlich ist es in manchen Fällen, wenn Ihre Anwendung klein ist oder nur wenige Verweise auf die alte Bibliothek enthält, sinnvoller, den gesamten Code durchzugehen und ihn an die neue Bibliothek anzupassen, anstatt eine neue A-Ebene hinzuzufügen der Abstraktion, die den Code komplexer macht. In den meisten Fällen ist es jedoch praktischer und zeitsparender, einen Adapter zu erstellen.

JavaScript-Codebeispiel

Wenn etwas passieren kann, wird es passieren. Werfen wir zunächst einen Blick auf diese kleine LoggerFactory, mit der wir die von uns verwendete Protokollierungsschnittstelle einfacher ändern können.

var LoggerFactory = {
  getLogger: function() {
    return window.console;
  },
  ...
};

/* 用法示例 */
var logger = LoggerFactory.getLogger();
logger.log("something to log");
Nach dem Login kopieren

Es gibt uns das Konsolenobjekt (Konsole) zurück, wenn wir getLogger aufrufen. Für diese Übung gehen wir davon aus, dass das Konsolenobjekt nur eine Methode, log, hat und nur einen Parameter vom Typ string akzeptieren kann. Als nächstes haben wir eine andere Protokollschnittstelle, die komplizierter sein wird, weil 1) sie in JavaScript implementiert ist und nicht wie die Konsole nativ für den Browser ist, 2) sie das Protokoll über AJAX an den Server sendet, was auch bedeutet Wir müssen die URL-Daten kodieren (der Code implementiert die URL-Kodierung nicht speziell, da sie nichts mit dem Adaptermuster zu tun hat, über das wir sprechen werden). Natürlich wird es eine andere Schnittstelle als die Konsole verwenden.

var AjaxLogger = {
  sendLog: function() {
    var data = this.urlEncode(arguments);

    jQuery.ajax({
      url: "http://example.com/log",
      data: data
    });
  },

  urlEncode: function(arg) {
    ...
    return encodedData;
  },
  ...
};
Nach dem Login kopieren

Wir verwenden die AJAX-Anfrage von jQuery, hauptsächlich um Zeit zu sparen und Dinge zu ignorieren, die wir mit dem Adaptermuster nicht tun möchten. Was wir jetzt tun müssen, ist einen Adapter zu erstellen und die vorherige LoggerFactory so zu ändern, dass dieser Adapter anstelle des Konsolenobjekts zurückgegeben wird.

var AjaxLoggerAdapter = {
  log: function(arg) {
    AjaxLogger.sendLog(arg);
  }
};

/* 调整 LoggerFactory */

var LoggerFactory = {
  getLogger: function() {
    // 改变返回值
    return AjaxLoggerAdapter;
  },
  ...
};
Nach dem Login kopieren

Wir haben nur eine Zeile am vorhandenen Code geändert und das gesamte Programm kann diese neue Protokollierungsschnittstelle verwenden.

Komplexer Adapter

Die Protokollierungsschnittstelle ist ein sehr einfaches Beispiel. Sie hat nur eine Methode und es ist nicht schwierig, sie direkt der alten Methode zuzuordnen. In den meisten Fällen ist dies nicht der Fall. Möglicherweise besteht das Problem, dass die Parameter dieser Funktionen, die einander zugeordnet sind, völlig unterschiedlich sind. Die alte Schnittstelle verfügt möglicherweise überhaupt nicht über diese Parameter und Sie müssen sie selbst verwalten. In manchen Fällen müssen Sie einige Parameter löschen, weil die neue Schnittstelle sie einfach nicht verwendet. Wenn die Schnittstellenzuordnung zwischen zwei Objekten zu schwierig ist, müssen wir uns andere Möglichkeiten überlegen. Ich möchte jedoch nicht Tausende von Zeilen alten Codes finden und ändern.

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

Verwandte Artikel:

Wissen über JavaScript typeof, null und undefiniert

JavaScript Boolean object Verwandte Kenntnisse und Verwendung

JavaScript-Datum (Datum) Verwandte Kenntnisse und Verwendung

Das obige ist der detaillierte Inhalt vonZusammenfassung der Anwendung des Adapter-Adaptermusters in der JavaScript-Entwurfsmusterprogrammierung (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!