Detaillierte Interpretation des Brückenmusters in der Entwicklung von JavaScript-Entwurfsmustern (fortgeschritten)

Der Bridge-Modus ist auf eine Vielzahl von Situationen anwendbar. Zusätzlich zur Überbrückung zwischen Ereignis-Callback-Funktionen und Schnittstellen kann der Bridge-Modus auch zum Verbinden von öffentlichem API-Code und privatem Implementierungscode verwendet werden Detail. Das Brückenmuster in der Entwicklung verwendet das

Brückenmuster, um den abstrakten Teil vom Implementierungsteil zu trennen, sodass sich beide unabhängig voneinander ändern und harmonisch zusammenarbeiten können. Sowohl der abstrakte Teil als auch der Implementierungsteil können unabhängig voneinander geändert werden, ohne sich gegenseitig zu beeinflussen, was die Kopplung des Codes verringert und die Skalierbarkeit des Codes verbessert.
Gemäß der Definition von GoF besteht die Rolle des Brückenmusters darin, „die Abstraktion von ihrer Implementierung zu isolieren, damit sich beide unabhängig voneinander ändern können.“ Dieses Muster ist für die in Javascript übliche ereignisgesteuerte Programmierung von großem Nutzen.

Eine der häufigsten und praktischsten Anwendungen des Bridge-Musters ist die Rückruffunktion des Event-Listeners. Beispiel: Der Ereignis-Listener kapselt Ereignisverarbeitungsanweisungen in Rückruffunktionen und führt die Programmierung über Schnittstellen statt über Implementierungen durch.

Grundlegende Theorie

Definition des Brückenmusters: Trennen Sie den abstrakten Teil von seinem Implementierungsteil, sodass beide unabhängig voneinander geändert werden können.
Der Bridge-Modus besteht hauptsächlich aus 4 Rollen:
(1) Abstrakte Klasse
(2) Erweiterte abstrakte Klasse
(3) Implementierungsklassenschnittstelle
(4) Konkrete Implementierungsklasse
Entsprechend den Merkmalen der JavaScript-Sprache vereinfachen wir sie in zwei Rollen:
(1) Erweiterte abstrakte Klasse
(2) Konkrete Implementierungsklasse
Wie ist der Bridge-Modus zu verstehen? Als nächstes geben wir ein Beispiel für die

Implementierung des Bridge-Modus

Um die Idee des Bridge-Modus zu verstehen, ist es wichtig, seine Idee zu verstehen ​Trennung des abstrakten Teils und des Implementierungsteils. Lassen Sie uns anhand eines Beispiels veranschaulichen

Der einfachste Bridge-Modus

Tatsächlich ist jede Funktion von jQuery, die wir am häufigsten verwenden, ein typischer Bridge-Modus. Wir simulieren seine Implementierung wie folgt:

var each = function (arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    var val = arr[i];
    if (fn.call(val, i, val, arr)) {
      return false;
    }
  }
}
var arr = [1, 2, 3, 4];
each(arr, function (i, v) {
  arr[i] = v * 2;
})

In diesem Beispiel durchlaufen wir das arr-Array durch die Each-Funktion. Obwohl dieses Beispiel sehr häufig vorkommt, enthält es den typischen Bridge-Modus.
In diesem Beispiel ist der abstrakte Teil die Funktion every, also die oben erwähnte erweiterte abstrakte Klasse, und der Implementierungsteil ist fn, die konkrete Implementierungsklasse. Der abstrakte Teil und der Implementierungsteil können unabhängig voneinander geändert werden. Obwohl dieses Beispiel einfach ist, handelt es sich um eine typische Bridge-Modus-Anwendung.

Bridge-Modus in der Plug-in-Entwicklung

Ein anwendbares Szenario für den Bridge-Modus ist die Komponentenentwicklung. Normalerweise entwickeln wir Komponenten, um sie an unterschiedliche Anlässe anzupassen, und die Komponenten ändern sich entsprechend in vielen verschiedenen Dimensionen. Hier kann das Brückenmuster angewendet werden, das seine Abstraktion und Implementierung trennt und so die Komponente skalierbarer macht.
Angenommen, wir möchten ein Popup-Fenster-Plugin entwickeln. Es gibt verschiedene Arten von Popup-Fenstern: normale Nachrichtenerinnerungen und Fehlererinnerungen. Jede Erinnerung wird auf unterschiedliche Weise angezeigt. Dies ist ein typisches mehrdimensionales Veränderungsszenario. Zuerst definieren wir zwei Klassen: normales Nachrichten-Popup-Fenster und Fehlermeldungs-Popup-Fenster.

function MessageDialog(animation) {
  this.animation = animation;
}
MessageDialog.prototype.show = function () {
  this.animation.show();
}
function ErrorDialog(animation) {
  this.animation = animation;
}
ErrorDialog.prototype.show = function () {
  this.animation.show();
}

Diese beiden Klassen sind die zuvor erwähnten abstrakten Teile, also erweiterte abstrakte Klassen. Sie enthalten beide eine Mitgliedsanimation.
Die beiden Popup-Fenster werden über die Show-Methode angezeigt, die angezeigten Animationseffekte sind jedoch unterschiedlich. Wir definieren zwei Anzeigeeffektklassen wie folgt:

function LinerAnimation() {
}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {
}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

Diese beiden Klassen sind spezifische Implementierungsklassen, die spezifische Anzeigeeffekte implementieren. Wie nennen wir es also?

var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

Wenn wir einen Animationseffekt hinzufügen möchten, können wir eine andere Effektklasse definieren und diese übergeben.

Zusammenfassung

Der Schlüssel zum Erlernen des Brückenmusters besteht darin, die Trennung des abstrakten Teils und des Implementierungsteils zu verstehen, sodass sich die beiden unabhängig voneinander ändern können, ohne starr zu sein an das Formular gebunden. Die flexiblen Änderungen von JS-Plug-Ins und die sich ändernden anwendbaren Szenarien eignen sich sehr gut für die Implementierung dieses Modus. Das Wichtigste bei der Verwendung des Brückenmusters besteht darin, die verschiedenen Dimensionen der Veränderung im System zu identifizieren.
(1) Vorteile des Bridge-Modus: Die Isolierung der Abstraktion von der Implementierung hilft dabei, jede Komponente der Software unabhängig zu verwalten.
(2) Nachteile des Bridge-Modus: Bei jeder Verwendung eines Bridge-Elements wird ein Funktionsaufruf hinzugefügt, der sich negativ auf die Leistung der Anwendung auswirkt. Erhöhte Systemkomplexität. Wenn eine Brückenfunktion zum Verbinden zweier Funktionen verwendet wird und eine der Funktionen niemals außerhalb der Brückenfunktion aufgerufen wird, ist die Brückenfunktion zu diesem Zeitpunkt nicht erforderlich.
Das Brückenmuster „isoliert die Abstraktion von der Implementierung, sodass sie sich unabhängig voneinander ändern können.“ Es fördert die Codemodularität, ermöglicht sauberere Implementierungen und erhöht die Abstraktionsflexibilität. Es kann verwendet werden, um eine Gruppe von Klassen und Funktionen miteinander zu verbinden und bietet die Möglichkeit, mithilfe privilegierter Funktionen auf private Daten zuzugreifen.

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

Verwandte Artikel:

Die Verwendung von Kombinationsmustern in Entwurfsmustern bei der Erstellung von JavaScript-Programmen (fortgeschritten)

Detaillierte Erklärung unter How to Implementieren Sie das Adaptermuster in Entwurfsmustern in JavaScript (grafisches Tutorial)

Tutorial zur Verwendung des Kombinationsmusters in der Entwicklung von JavaScript-Entwurfsmustern (fortgeschritten)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des Brückenmusters in der Entwicklung von JavaScript-Entwurfsmustern (fortgeschritten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!