Designmuster in JavaScript verstehen

Funktion Person (config) this.name = config.name; this.age = config.age;  Person.prototype.getAge = function () return this.age; ; var tilo = neue Person (Name: "Tilo", Alter: 23); console.log (tilo.getAge ());

var retinaMacbook = (function () // Private Variablen var RAM, addRAM; RAM = 4; // Private Methode addRAM = Funktion (additionalRAM) RAM + = additionalRAM;; return // Öffentliche Variablen und Methoden USB: undefined , insertUSB: function (device) this.USB = device;, removeUSB: function () var device = this.USB; this.USB = undefined; Gerät zurückgeben;;) ();

retinaMacbook.insertUSB ("myUSB"); console.log (retinaMacbook.USB); // Abmelden von "myUSB" console.log (retinaMacbook.RAM) // Abmelden undefiniert

var myDiv = $ ('
Das ist ein div.
'); // myDiv stellt jetzt ein jQuery-Objekt dar, das auf einen DOM-Knoten verweist. var someText = $ ('
'); // someText ist ein jQuery-Objekt, das auf ein HTMLParagraphElement verweist. var input = $ ('');

Element mit etwas Inhalt. Im zweiten passierten wir einen leeren Platz

Etikett. In der letzten haben wir einen Element. Das Ergebnis aller drei war das gleiche: Es wurde ein jQuery-Objekt zurückgegeben, das auf einen DOM-Knoten verweist.

Das $ Variable nimmt das Builder-Pattern in jQuery an. In jedem Beispiel wurde uns ein jQuery-DOM-Objekt zurückgegeben, und wir hatten Zugriff auf alle von der jQuery-Bibliothek bereitgestellten Methoden, aber zu keinem Zeitpunkt haben wir explizit aufgerufen document.createElement. Die JS-Bibliothek hat all das unter der Haube erledigt.

Stellen Sie sich vor, wie viel Arbeit es wäre, wenn wir das DOM-Element explizit erstellen und Inhalte einfügen müssten! Durch die Nutzung des Builder-Musters können wir uns auf den Typ und den Inhalt des Objekts konzentrieren, anstatt es explizit zu erstellen.

Prototypmuster

Zuvor haben wir durch Definition von Datentypen in JavaScript durch Funktionen und Hinzufügen von Methoden zu den Objekten des Objekts gesprochen Prototyp. Das Prototypmuster ermöglicht, dass Objekte über ihre Prototypen von anderen Objekten erben können.

Das Prototypmuster ist ein Muster, bei dem Objekte basierend auf einer Vorlage eines vorhandenen Objekts durch Klonen erstellt werden.

Dies ist eine einfache und natürliche Möglichkeit, Vererbung in JavaScript zu implementieren. Zum Beispiel:

var Person = numFeet: 2, numHeads: 1, numHands: 2; //Object.create verwendet sein erstes Argument und wendet es auf den Prototyp Ihres neuen Objekts an. var tilo = Object.create (Person); console.log (tilo.numHeads); // gibt 1 aus tilo.numHeads = 2; console.log (tilo.numHeads) // Ausgaben 2

Die Eigenschaften (und Methoden) im Person Objekt wird auf den Prototyp der Version angewendet Tilo Objekt. Wir können die Eigenschaften auf dem neu definieren Tilo Objekt, wenn wir wollen, dass sie anders sind.

Im obigen Beispiel haben wir verwendet Object.create (). Internet Explorer 8 unterstützt jedoch nicht die neuere Methode. In diesen Fällen können wir das Verhalten simulieren:

var vehiclePrototype = init: function (carModel) this.model = carModel; , getModel: function () console.log ("Das Modell dieses Fahrzeugs ist" + this.model); ; Funktionsfahrzeug (Modell) Funktion F () ; F.prototype = vehiclePrototype; var f = new F (); f.init (Modell); return f;  var car = Fahrzeug ("Ford Escort"); car.getModel ();

Der einzige Nachteil dieser Methode besteht darin, dass Sie keine schreibgeschützten Eigenschaften angeben können, die bei der Verwendung angegeben werden können Object.create (). Nichtsdestotrotz zeigt das Prototypmuster, wie Objekte von anderen Objekten erben können.

---

Strukturelle Entwurfsmuster

Strukturelle Entwurfsmuster sind wirklich hilfreich, um herauszufinden, wie ein System funktionieren sollte. Sie ermöglichen unseren Anwendungen eine einfache Skalierbarkeit und Wartungsfreundlichkeit. Wir werden uns die folgenden Muster in dieser Gruppe ansehen: Composite und Facade.

Zusammengesetztes Muster

Das zusammengesetzte Muster ist ein anderes Muster, das Sie wahrscheinlich zuvor ohne weitere Verwendung verwendet haben.

Das zusammengesetzte Muster besagt, dass eine Gruppe von Objekten auf dieselbe Weise wie ein einzelnes Objekt der Gruppe behandelt werden kann.

Was bedeutet das? Betrachten Sie dieses Beispiel in jQuery (die meisten JS-Bibliotheken haben ein Äquivalent dazu):

$ ('. myList'). addClass ('selected'); $ ('# myItem'). addClass ('selected'); // Tun Sie dies nicht für große Tabellen, es ist nur ein Beispiel. $ ("# dataTable tbody tr"). on ("click", function (event) alert ($ (this) .text ());); $ ('# myButton'). on ("click", Funktion (Ereignis) alert ("Clicked."););

Die meisten JavaScript-Bibliotheken bieten eine konsistente API, unabhängig davon, ob es sich um ein einzelnes DOM-Element oder um ein Array von DOM-Elementen handelt. Im ersten Beispiel können wir das hinzufügen ausgewählt Klasse für alle von der .meine Liste Selector, aber wir können dieselbe Methode verwenden, wenn Sie ein einzelnes DOM-Element verwenden, #myItem. In ähnlicher Weise können wir Event-Handler mithilfe von verknüpfen auf() Methode auf mehreren Knoten oder auf einem einzelnen Knoten über dieselbe API.

Durch die Nutzung des Composite-Musters erhalten Sie mit jQuery (und vielen anderen Bibliotheken) eine vereinfachte API.

Das zusammengesetzte Muster kann manchmal auch Probleme verursachen. In einer locker typisierten Sprache wie JavaScript kann es oft hilfreich sein, zu wissen, ob es sich um ein einzelnes Element oder um mehrere Elemente handelt. Da das zusammengesetzte Muster für beide die gleiche API verwendet, können wir oft eine für die andere verwechseln und unerwartete Fehler verursachen. Einige Bibliotheken wie YUI3 bieten zwei verschiedene Methoden zum Abrufen von Elementen (Y.one () vs Ihr()).

Fassadenmuster

Hier ist ein weiteres gemeinsames Muster, das wir als selbstverständlich betrachten. In der Tat ist dies einer meiner Favoriten, weil es einfach ist, und ich habe gesehen, dass es überall verwendet wird, um bei Inkonsistenzen des Browsers zu helfen. Hier ist, worum es beim Fassadenmuster geht:

Das Fassadenmuster bietet dem Benutzer eine einfache Benutzeroberfläche, während die darunter liegende Komplexität ausgeblendet wird.

Das Fassadenmuster verbessert fast immer die Benutzerfreundlichkeit einer Software. Wieder mit jQuery als Beispiel, ist die populärste Methode der Bibliothek die bereit() Methode:

$ (document) .ready (function () // Ihr ganzer Code geht hier hin ...);

Das bereit() Methode implementiert tatsächlich eine Fassade. Wenn Sie sich die Quelle ansehen, finden Sie Folgendes:

ready: (function () … // Mozilla, Opera und Webkit if (document.addEventListener) document.addEventListener ("DOMContentLoaded", idempotent_fn, false);… // IE-Ereignismodell else if (document.attachEvent) // das Auslösen vor Onload sicherstellen; möglicherweise zu spät, aber auch sicher für iframes document.attachEvent ("onreadystatechange", idempotent_fn); // Ein Fallback auf window.onload, das immer funktioniert window.attachEvent ("onload", idempotent_fn); …)

Unter der Haube die bereit() Methode ist nicht so einfach. jQuery normalisiert die Browserinkonsistenzen, um dies sicherzustellen bereit() wird zur richtigen Zeit abgefeuert. Als Entwickler wird Ihnen jedoch eine einfache Benutzeroberfläche angezeigt.

Die meisten Beispiele des Fassadenmusters folgen diesem Prinzip. Bei der Implementierung einer davon verlassen wir uns in der Regel auf bedingte Anweisungen unter der Haube, stellen sie dem Benutzer jedoch als einfache Schnittstelle dar. Andere Methoden, die dieses Muster implementieren, umfassen animieren() und css (). Können Sie sich vorstellen, warum diese Fassadenmuster verwendet werden??

---

Verhaltensmuster

Jedes objektorientierte Softwaresystem hat eine Kommunikation zwischen Objekten. Wenn diese Kommunikation nicht organisiert wird, kann es zu Fehlern kommen, die schwer zu finden und zu beheben sind. Verhaltensmuster schreiben verschiedene Methoden vor, um die Kommunikation zwischen Objekten zu organisieren. In diesem Abschnitt werden die Observer- und Mediator-Muster betrachtet.

Beobachtermuster

Das Observer-Muster ist das erste der beiden Verhaltensmuster, die wir durchmachen werden. Folgendes sagt es:

Im Observer Pattern kann ein Subjekt eine Liste von Beobachtern enthalten, die an seinem Lebenszyklus interessiert sind. Immer wenn das Subjekt etwas Interessantes tut, sendet es eine Benachrichtigung an seine Beobachter. Wenn ein Beobachter das Motiv nicht mehr hören möchte, kann das Motiv es aus seiner Liste entfernen.

Klingt ziemlich einfach, oder? Wir benötigen drei Methoden, um dieses Muster zu beschreiben:

• veröffentlichen (Daten): Wird vom Betreff aufgerufen, wenn eine Benachrichtigung erfolgen soll. Einige Daten können von dieser Methode übergeben werden.
• abonnieren (beobachter): Wird vom Betreff aufgerufen, um einen Beobachter zur Liste der Beobachter hinzuzufügen.
• abbestellen (Beobachter): Vom Subjekt aufgerufen, um einen Beobachter aus seiner Liste der Beobachter zu entfernen.

Nun, es stellt sich heraus, dass die meisten modernen JavaScript-Bibliotheken diese drei Methoden als Teil ihrer benutzerdefinierten Ereignisinfrastruktur unterstützen. Normalerweise gibt es eine auf() oder anfügen() Methode, a auslösen() oder Feuer() Methode und ein aus() oder ablösen() Methode. Betrachten Sie den folgenden Ausschnitt:

// Wir erstellen einfach eine Zuordnung zwischen den jQuery-Ereignismethoden

// und die vom Observer Pattern vorgeschriebenen, aber Sie müssen nicht. var o = $ (); $ .subscribe = o.on.bind (o); $ .unsubscribe = o.off.bind (o); $ .publish = o.trigger.bind (o); // Verwendung document.on ('tweetsReceived', function (tweets) // führt einige Aktionen aus und löst dann ein Ereignis aus $ .publish ('tweetsShow', tweets);); // Wir können diese Veranstaltung abonnieren und dann unsere eigene Veranstaltung auslösen. $ .subscribe ('tweetsShow', function () // Die Tweets irgendwie anzeigen ... // // Eine Aktion veröffentlichen, nachdem sie angezeigt wurde. $ .publish ('tweetsDisplayed);); $ .subscribe ('tweetsDisplayed, function () …);

Das Observer-Muster ist eines der einfacheren zu implementierenden Muster, aber es ist sehr mächtig. JavaScript eignet sich gut, um dieses Muster zu übernehmen, da es natürlich ereignisbasiert ist. Wenn Sie das nächste Mal Webanwendungen entwickeln, denken Sie darüber nach, Module zu entwickeln, die lose miteinander gekoppelt sind, und verwenden das Observer-Muster als Kommunikationsmittel. Das Beobachtermuster kann problematisch werden, wenn zu viele Personen und Beobachter beteiligt sind. Dies kann in großen Systemen der Fall sein, und das nächste Muster, das wir betrachten, versucht, dieses Problem zu lösen.

Mediator-Muster

Das letzte Muster, das wir betrachten werden, ist das Mediator-Muster. Es ähnelt dem Observer-Muster, weist jedoch einige bemerkenswerte Unterschiede auf.

Das Mediator-Muster fördert die Verwendung eines einzigen gemeinsamen Betreffs, der die Kommunikation mit mehreren Objekten übernimmt. Alle Objekte kommunizieren über den Vermittler miteinander.

Eine gute reale Analogie wäre ein Air Traffic Tower, der die Kommunikation zwischen dem Flughafen und den Flügen übernimmt. In der Welt der Softwareentwicklung wird das Mediator-Muster häufig verwendet, da das System zu kompliziert wird. Durch das Platzieren von Vermittlern kann die Kommunikation über ein einzelnes Objekt abgewickelt werden, anstatt mehrere Objekte miteinander kommunizieren zu lassen. In diesem Sinne kann ein Vermittlermuster verwendet werden, um ein System zu ersetzen, das das Beobachtermuster implementiert.

Es gibt eine vereinfachte Implementierung des Mediator-Musters von Addy Osmani in diesem Kern. Lassen Sie uns darüber sprechen, wie Sie es verwenden können. Stellen Sie sich vor, Sie haben eine Web-App, mit der Benutzer auf ein Album klicken und Musik daraus abspielen können. Sie könnten einen Vermittler wie folgt einrichten:

$ ('# album'). on ('click', Funktion (e) e.preventDefault (); var albumId = $ (this) .id (); mediator.publish ("playAlbum", albumId);) ; var playAlbum = function (id) … mediator.publish ("albumStartedPlaying", songList: […], currentSong: "Without You"); ; var logAlbumPlayed = function (id) // Das Album im Backend protokollieren; var updateUserInterface = function (album) // Aktualisieren Sie die Benutzeroberfläche, um das Gespielte wiederzugeben; // Vermittlerabonnements mediator.subscribe ("playAlbum", playAlbum); mediator.subscribe ("playAlbum", logAlbumPlayed); mediator.subscribe ("albumStartedPlaying", updateUserInterface);

Der Vorteil dieses Musters gegenüber dem Observer-Muster besteht darin, dass ein einzelnes Objekt für die Kommunikation verantwortlich ist, wohingegen im Observer-Muster mehrere Objekte zuhören und sich gegenseitig abonnieren könnten.

Im Observer-Muster gibt es kein einzelnes Objekt, das eine Einschränkung kapselt. Stattdessen müssen der Beobachter und das Subjekt zusammenarbeiten, um die Einschränkung aufrechtzuerhalten. Kommunikationsmuster werden durch die Art und Weise bestimmt, in der Betrachter und Subjekte miteinander verbunden sind: Ein einzelnes Subjekt hat normalerweise viele Beobachter, und manchmal ist der Beobachter eines Subjekts ein Subjekt eines anderen Beobachters.

---

Fazit

Jemand hat es bereits in der Vergangenheit erfolgreich angewendet.

Das Tolle an Design Patterns ist, dass jemand es bereits in der Vergangenheit erfolgreich angewendet hat. Es gibt eine Menge Open-Source-Code, der verschiedene Muster in JavaScript implementiert. Als Entwickler müssen wir wissen, welche Muster verfügbar sind und wann sie angewendet werden. Ich hoffe, dieses Tutorial hat Ihnen geholfen, diese Fragen noch weiter zu beantworten.

---

Zusätzliche Lesung

Ein Großteil des Inhalts dieses Artikels ist in dem ausgezeichneten Buch Learning JavaScript Design Patterns von Addy Osmani zu finden. Es ist ein Online-Buch, das unter einer Creative Commons-Lizenz kostenlos veröffentlicht wurde. Das Buch behandelt ausführlich die Theorie und Implementierung vieler verschiedener Muster, sowohl in Vanilla JavaScript als auch in verschiedenen JS-Bibliotheken. Ich empfehle Ihnen, sich beim Start Ihres nächsten Projekts als Referenz zu informieren.