JavaScript -Designmuster: Das Beobachtermuster

Schlüsselpunkte des JavaScript -Beobachtermusters

• Observer-Muster in JavaScript ermöglicht die Eins-zu-Viele-Datenbindung zwischen Elementen, was insbesondere nützlich ist, um mehrere Elemente mit denselben Daten synchronisiert zu halten.
• Observer -Muster enthält drei Hauptmethoden: subscribe (neue beobachtbare Ereignisse hinzufügen), unsubscribe (alle Ereignisse mit gebundenen Daten entfernen). broadcast
Verwenden von ES6 -Funktionen wie Klassen, Pfeilfunktionen und Konstanten können Beobachtermuster effektiv implementieren, wodurch der Code einfacher und einfacher zuverwendet wird.
Der Beobachtermodus kann verwendet werden, um praktische Probleme in JavaScript zu lösen, z. B. die Aktualisierung der Wortzahlen in Blog -Posts bei jedem Tastenanschlag und kann weiter verbessert werden, um neue Funktionen zu erstellen.

In JavaScript gibt es häufig ein Problem: Eine Methode ist erforderlich, um einen Teil der Seite als Antwort auf bestimmte Ereignisse zu aktualisieren und die von diesen Ereignissen bereitgestellten Daten zu verwenden. Zum Beispiel tritt der Benutzer ein und projiziert es dann in eine oder mehrere Komponenten. Dies führt zu viel Druck- und Zugvorgänge im Code, um alles synchron zu halten. Hier kann das Beobachter-Designmuster helfen-es implementiert eins-zu-viele-Datenbindung zwischen den Elementen. Diese Einweg-Datenbindung kann ereignisgetrieben werden. Mit diesem Muster können Sie wiederverwendbaren Code erstellen, um Ihre spezifischen Anforderungen zu befriedigen. In diesem Artikel möchte ich das Beobachter -Designmuster untersuchen. Es wird Ihnen helfen, ein gemeinsames Problem zu lösen, auf das Sie häufig in Client -Skripten stoßen. Das ist eins-zu-Viele, Einweg- und ereignisgesteuerte Bindung. Dieses Problem tritt häufig auf, wenn Sie viele Elemente haben, die synchronisiert werden müssen. Ich werde ECMascript 6 verwenden, um dieses Muster zu veranschaulichen. Ja, es wird Klassen, Pfeilfunktionen und Konstanten geben. Wenn Sie damit nicht vertraut sind, können Sie diese Themen selbst erkunden. Ich werde nur den Teil verwenden, der syntaktischen Zucker in ES6 einführt, sodass er bei Bedarf auch mit ES5 funktionieren kann. Ich werde die testgetriebene Entwicklung (TDD) verwenden, um dieses Muster zu bewältigen. Auf diese Weise können Sie wissen, wie jede Komponente verwendet wird. Neue Sprachfunktionen in ES6 machen den Code präzise. Also fangen wir an.

Ereignisbeobachter

Die erweiterte Ansicht dieses Modus lautet wie folgt:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Nachdem ich im Beobachtermodus ausgearbeitet wurde, werde ich eine Word -Zählfunktion hinzufügen, die sie verwendet. Die Wortzahlkomponente verwendet diesen Beobachter und integriert alles zusammen. Um

zu initialisieren, machen Sie Folgendes: EventObserver

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

Beginnen Sie mit einer leeren Liste von Beobachtungsereignissen, und jede neue Instanz tut dies. Fügen wir von nun an weitere Möglichkeiten hinzu, das Designmuster in

zu perfektionieren. EventObserver

Abonnieren Sie die Methode

Um ein neues Ereignis hinzuzufügen, machen Sie Folgendes:

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

Holen Sie sich die Liste der Beobachtungsereignisse und schieben Sie neue Elemente in das Array. Die Ereignisliste ist eine Rückruffunktionsliste. Eine Möglichkeit, diese Methode in reinem JavaScript zu testen, ist wie folgt:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Ich verwende den Knotenbehauptung, um diese Komponente im Knoten zu testen. Genau die gleiche Behauptung gibt es auch in der Chai -Behauptung. Beachten Sie, dass die Liste der Beobachtungsereignisse aus einfachen Rückrufen besteht. Wir überprüfen dann die Länge der Liste und behaupten, dass sich der Rückruf in der Liste befindet.

met weder

Um ein Ereignis zu entfernen, machen Sie Folgendes:

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

Filtern Sie alles heraus, was mit der Rückruffunktion aus der Liste übereinstimmt. Wenn es keine Übereinstimmung gibt, bleibt der Rückruf in der Liste. Der Filter gibt eine neue Liste zurück und zeichnet die Observer -Liste neu zu. Um diese gute Methode zu testen, machen Sie Folgendes:

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

Der Rückruf muss derselben Funktion in der Liste übereinstimmen. Wenn eine Übereinstimmung vorhanden ist, entfernt die unsubscribe -Methode sie aus der Liste. Beachten Sie, dass der Test Funktionsreferenz verwendet, um ihn hinzuzufügen und zu entfernen.

Broadcast -Methode

Um alle Ereignisse anzurufen, machen Sie Folgendes:

<code class="language-javascript">// Arrange
const observer = new EventObserver();
const fn = () => {};

// Act
observer.subscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 1);</code>

Dies wird die Liste der Beobachtungsereignisse iteriert und alle Rückrufe ausführen. Damit können Sie die Eins-zu-Viele-Beziehung erhalten, die Sie für Ereignisse abonnieren müssen. Sie können den Parameter data übergeben, wodurch die Rückrufdatenbindung führt. ES6 verwendet Pfeilfunktionen, um den Code effizienter zu gestalten. Beachten Sie, dass die (subscriber) => subscriber(data) -Funktion den größten Teil der Arbeit erledigt. Diese Einzelpfeilfunktion profitiert von dieser kurzen ES6-Syntax. Dies ist eine signifikante Verbesserung der JavaScript -Programmiersprache. Um diese broadcast Methode zu testen:

<code class="language-javascript">unsubscribe(fn) {
  this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}</code>

Verwenden Sie let statt const, damit wir den Wert der Variablen ändern können. Dies macht die Variable veränderbar und ermöglicht es mir, ihren Wert im Rückruf neu zuzuweisen. Verwenden Sie let in Ihrem Code, um anderen Programmierern zu signalisieren, dass sich die Variable irgendwann ändert. Dies erhöht die Lesbarkeit und Klarheit des JavaScript -Code. Dieser Test gibt mir genug Vertrauen, um sicherzustellen, dass der Beobachter wie erwartet funktioniert. Bei TDD geht es darum, wiederverwendbaren Code in reinem JavaScript zu erstellen. Das Schreiben von Testable Code in reinem JavaScript hat viele Vorteile. Testen Sie alles und behalten Sie das, was für die Wiederverwendung von Code vorteilhaft ist. Damit haben wir es perfektioniert. Die Frage ist, was können Sie damit aufbauen? EventObserver

Praktische Anwendung des Beobachtermodus: Blog -Wortzahl Demonstration

Für die Demo ist es Zeit, einen Blog -Beitrag zu erstellen, der die Wortzahl für Sie hält. Jeder Tastenanschlag, den Sie eingeben, wird vom Beobachter -Entwurfsmuster synchronisiert. Stellen Sie sich das als kostenlose Texteingabe vor, bei der jedes Ereignis ein Update dazu löst, wohin Sie es benötigen. Um die Wortanzahl von kostenlosen Texteingaben zu erhalten, können Sie Folgendes tun:

<code class="language-javascript">// Arrange
const observer = new EventObserver();
const fn = () => {};

observer.subscribe(fn);

// Act
observer.unsubscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 0);</code>

fertig! In dieser scheinbar einfachen reinen Funktion gibt es viele Inhalte. Wie wäre es also mit einem einfachen Unit -Test? Auf diese Weise sind meine Absichten klar:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Bitte beachten Sie die etwas seltsame Eingangszeichenfolge in blogPost. Mein Ziel ist es, diese Funktion so viele Kantenfälle wie möglich abzudecken. Solange es mir eine korrekte Wortzahl gibt, gehen wir in die richtige Richtung. Dies ist übrigens die wahre Kraft von TDD. Diese Implementierung kann iteriert werden und deckt so viele Anwendungsfälle wie möglich ab. Unit -Tests sagen Ihnen, wie ich es erwarte, dass es sich verhalten wird. Wenn das Verhalten fehlerhaft ist, ist es aus irgendeinem Grund leicht zu iterieren und anzupassen. Lassen Sie durch Testen genügend Beweise für andere, um die Änderungen vorzunehmen. Es ist Zeit, diese wiederverwendbaren Komponenten mit dem DOM zu verbinden. Dies ist der Teil, den Sie reines JavaScript nehmen und ihn in Ihren Browser löten. Eine Möglichkeit besteht darin, die folgende HTML auf der Seite zu verwenden:

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

Dann gibt es das folgende JavaScript:

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

Holen Sie sich alle wiederverwendbaren Code und setzen Sie den Beobachter -Design -Modus. Dadurch werden Änderungen im Textbereich verfolgt und Ihnen eine Wortanzahl darunter verfolgen. Ich verwende body.appendChild() in der DOM -API, um dieses neue Element hinzuzufügen. Dann ist ein Event -Hörer verbunden, um ihn zum Leben zu erwecken. Beachten Sie, dass die Verwendung von Pfeilfunktionen eine einzelne Ereigniszeile verbinden kann. Tatsächlich können Sie es verwenden, um Veranstaltungsänderungen an allen Abonnenten zu übertragen. () => blogObserver.broadcast() Der größte Teil der Arbeit wurde hier erledigt. Es gibt sogar die neuesten Änderungen des Textbereichs direkt in die Rückruffunktion über. Ja, Client -Skripte sind ziemlich cool. Keiner der Demos, die Sie berühren und anpassen können, ist abgeschlossen. Hier ist der CodePen: (Der Codepen -Link sollte hier eingefügt werden, was aufgrund der Unfähigkeit, auf externe Websites zuzugreifen zu können, nicht bereitgestellt werden)

Jetzt werde ich diese Funktion nicht als vollständige Funktion nennen. Dies ist jedoch nur der Ausgangspunkt für das Designmuster des Beobachters. Die Frage in meinem Kopf ist, wie weit sind Sie bereit zu gehen.

Ich freue mich nach vorne

Sie können diese Idee weiter entwickeln. Sie können das Observer -Designmuster verwenden, um viele neue Funktionen zu erstellen. Sie können die Demo mit den folgenden Methoden verbessern:

• Eine andere Komponente berechnet die Anzahl der Absätze
• Eine andere Komponente zeigt eine Vorschau des Eingabetxtes
an
• Verbesserte Vorschau mit Markdown -Unterstützung, z

Dies sind nur einige Ideen, in die Sie graben können. Die oben genannten Verbesserungen fordern Ihre Programmierfunktionen in Frage.

Schlussfolgerung

Beobachter -Designmuster können Ihnen helfen, praktische Probleme in JavaScript zu lösen. Dies löst das langfristige Problem, eine Reihe von Elementen synchron mit denselben Daten zu führen. Normalerweise, wenn der Browser ein bestimmtes Ereignis auslöst. Ich glaube, die meisten von Ihnen hatten dieses Problem jetzt und haben sich an Tools und Abhängigkeiten von Drittanbietern zugewandt. Mit diesem Entwurfsmuster können Sie so weit wie möglich gehen. In der Programmierung abstrakt Sie die Lösung in Muster und erstellen wiederverwendbare Code. Die Vorteile, die Sie für Sie bringen werden, sind endlos. Ich hoffe, Sie können sehen, wie viel Arbeit Sie in reinem JavaScript mit nur ein wenig Disziplin und Anstrengung leisten können. Neue Funktionen in der Sprache wie ES6 können Ihnen helfen, einen präzisen und wiederverwendbaren Code zu schreiben.

(Die FAQ für JavaScript -Beobachtermuster sollten hier enthalten sein, aber aufgrund von Platzbeschränkungen wurde es weggelassen.)

Das obige ist der detaillierte Inhalt vonJavaScript -Designmuster: Das Beobachtermuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!