So implementieren Sie das Beobachtermuster in JavaScript

Überblick

Das Beobachtermuster ist auch als Publish-Subscribe-Muster bekannt und ist ein Verhaltensmuster im Entwurfsmuster.

Definition:

Das Beobachtermuster definiert eine Eins-zu-viele-Objektabhängigkeitsbeziehung. Wenn sich der Status eines abhängigen Objekts ändert, werden alle davon abhängigen Objekte benachrichtigt.

Umgangssprachliche Erklärung:

Angenommen, Sie gehen in einen Apple Store, um das neueste iPhone 11 zu kaufen. Das iPhone 11 ist gerade erst auf den Markt gekommen und es ist Hochsaison, sodass der Vorrat nicht ausreicht. Wenn Sie in den Store gehen, teilt Ihnen der Verkäufer mit, dass das Produkt vorübergehend nicht vorrätig ist. Sie können jedoch Ihre Kontaktinformationen hinterlassen und werden so schnell wie möglich benachrichtigt, wenn das Produkt wieder eintrifft. Natürlich gehen Sie nicht jeden Tag in den Store, um zu fragen, ob das iPhone 11 angekommen ist, und Sie rufen auch nicht jeden Tag im Store an, da Sie Ihre eigene Arbeit und Ihr eigenes Leben haben und nicht so viel Freizeit haben. Zu diesem Zeitpunkt bittet Sie der Verkäufer daher, Ihre Kontaktinformationen zu hinterlassen und Sie zu benachrichtigen, sobald das Produkt wieder eintrifft. Dies verursacht für Sie keine Probleme und Sie müssen nur auf den Anruf vom Store warten. Diese Methode ist ein typischer Beobachtermodus.

Lassen Sie es uns zunächst analysieren:

1. Abonnementmethode: Wenn Sie dem Verkäufer Ihre Kontaktinformationen mitteilen, handelt es sich um ein Nachrichtenabonnement, denn nur so können Sie rechtzeitig über die Ankunft des iPhone 11 informiert werden. Daher benötigen wir für das Abonnementverhalten eine bestimmte Methode.

2. Reservierungsliste: Sie sollten wissen, dass das iPhone 11 eine neue Version des iPhone ist. Sie sind also definitiv nicht der Einzige, der eine Reservierung vornimmt. Daher benötigt der Sachbearbeiter eine Reservierungsliste, um die Kontaktinformationen aller Bucher und die Informationen zur Mobiltelefonversion zu zählen, um Statistiken erstellen zu können. Daher definieren wir es hier als Objekt. Der Schlüssel stellt die Kontaktinformationen des Buchers dar und der Wert stellt die Informationen zur Mobiltelefonversion dar.

3. Freigabemethode: Wenn das iPhone 11 eintrifft, muss der Store die Nachricht einheitlich gemäß der Reservierungsliste freigeben („Das iPhone 11 ist angekommen, alle beeilen sich und schnappen es sich!!!“), daher benötigt der Store eine Freigabemethode, um ein bestimmtes Freigabeverhalten zu implementieren.

4. Abbestellen: Alles ist relativ. Wenn Sie sich anmelden können, können Sie sich auch abmelden. Wenn Sie auf die Benachrichtigung über die Ankunft des iPhone 11 warten, haben Sie es eilig, das Telefon zu benutzen, also kaufen Sie direkt ein Huawei-Modell. Daher ist das iPhone 11 für Sie im Moment nicht sehr gefragt. Da Sie bereits ein Telefon haben, ist es für Sie nicht von Bedeutung, ob das iPhone 11 im Geschäft angekommen ist oder nicht. Sie möchten also zu diesem Zeitpunkt nicht gestört werden und müssen sich von der Benachrichtigung abmelden. Daher benötigen wir eine Abmeldemethode, um das spezifische Abmeldeverhalten zu implementieren.

Anwendungsszenarien des Beobachtermusters

1. DOM-Ereignisse

Wenn Sie ein Front-End-Entwickler sind, haben Sie das Observer-Muster sicher schon einmal verwendet, unabhängig davon, ob Sie es vor dem Lesen dieses Artikels kannten oder nicht.

document.body.addEventListener('klicken', function() {
    console.log('Hallo Welt!');
});

Kommt Ihnen dieser Code bekannt vor? Ja, dies ist ein DOM-Ereignislistener. Wir abonnieren das Klickereignis für den Textkörper (Klick entspricht der obigen Abonnementmethode), da der Browser nicht weiß, wann Sie mit der Maus klicken. Wenn Sie also das Klickereignis auslösen, wird die Funktion ausgelöst, um Sie zu benachrichtigen (Veröffentlichungsmethode). DOM-Ereignisse sind eine Implementierung des Beobachtermusters.

2. Zweiwege-Bindung des Vue-V-Modells

Als Front-End-Entwickler müssen wir wissen, dass Vue ein Framework im MVVM-Modus ist. Der Kern von Vue ist die bidirektionale Bindung, sodass die Implementierung der bidirektionalen Bindung tatsächlich ein Beobachtermodus ist. Denn nachdem Sie Daten zuerst gebunden haben (Abonnementmethode), weiß der Browser nicht, wann Sie sie ändern. Alle Knoten auf Ihrer Seite, die an die Daten gebunden sind oder von ihnen abhängen, sind tatsächlich eine Reservierungsliste. Nur wenn Sie den Wert der Daten ändern, benachrichtigt Vue (Veröffentlichungsmethode) die Methode/Daten, die von den Daten abhängig sind, um entsprechende Vorgänge auszuführen oder zu aktualisieren.

Natürlich ist das Beobachtermuster keineswegs auf diese beiden Implementierungsszenarien beschränkt. Es gibt viele Beispiele für das Beobachtermuster in unserem Leben und in unseren Geschäftsszenarien. Als wir das Entwurfsmuster im ersten Fabrikmuster einführten, sagten wir, dass das Entwurfsmuster eine Denkweise zur Lösung von Problemen und keine feste Formel ist. Wie implementieren wir also das Beobachtermuster?

Implementierung des Observer-Musters

//Händler definieren var merchants = {};
//Bestellliste definieren merchants.orderList = {};
//Den hinzugefügten Abonnenten zur Reservierungsliste hinzufügen (Abonnementmethode)
Händler.listen = Funktion(ID,Info){
    //Wenn es existiert if(!this.orderList[id]){
        // (Buchungsliste)
        diese.Bestellliste[id] = [];
    }
    // Speichern Sie die reservierten Produktinformationen des Benutzers im Array this.orderList[id].push(info);
}
//Informationen veröffentlichen (Publish-Methode)
Händler.veröffentlichen = function(){
    var id = Array.prototype.shift.call(Argumente);
    var infos = diese.Bestellliste[id];
    wenn(!infos || infos.Länge === 0){
        console.log("Sie haben noch keine Reservierungsinformationen");
        gibt false zurück;
    }

    für(var i = 0;i < infos.Länge;i++){
        console.log("Buchung erfolgreich");
        console.log("Sehr geehrter Benutzer:")
        infos[i].apply(diese,Argumente);
        console.log("Angekommen");
    }
}
//Händler abbestellen.remove = function(id,fn){
    var infos = diese.Bestellliste[id];
    wenn(!infos){ return false}

    wenn(!fn){
        konsole.log(123);
    }anders{
        für(var i = 0;i < infos.Länge;i++){
            wenn (infos[i] === fn) {
                infos.splice(i,1);
            }
        }
    }
}
lass kundenspezifischA = funktion(){
    console.log("Eine schwarze Premium-Edition");
}

Händler.listen("15172103336",customeA);
Händler.entfernen("15172103336",customeA);
Händler.veröffentlichen("15172103336");

Der obige Code ist etwas lang, aber nicht schwierig. Zuerst definieren wir ein Objekt als Händler, dann definieren wir ein leeres Objekt als Reservierungsliste und implementieren dann Schritt für Schritt unsere Abonnementmethode sowie die Methoden zum Veröffentlichen und Abbestellen. Die Logik ist nicht kompliziert, aber es gibt einige Syntax, die erklärt werden müssen:

In der Veröffentlichungsmethode bedeutet var id = Array.prototype.shift.call(arguments);, dass beim Aufruf von merchants.publish("15172103336"); der erste Parameter zurückgegeben und dann als ID kopiert wird, sodass der ID-Wert zu diesem Zeitpunkt "15172103336"; ist.

infos[i].apply(this,arguments); Diese Methode ist nicht besonders leicht zu verstehen. Zunächst enthält infos die Handynummer und die Handyversionsinformationen des Buchers, daher verwenden wir infos[i].apply(this,arguments); Diese Methode ruft tatsächlich die Handyversionsinformationsfunktion auf, die „15172103336“ entspricht; sie ist tatsächlich gleich infos[i](arguments);

Zusammenfassen

Das Beobachtermuster ist sowohl im Front-End-Bereich als auch im wirklichen Leben sehr verbreitet. Das Erlernen des Beobachtermusters kann uns dabei helfen, den Quellcode von Vue zu erlernen, ist aber nicht darauf beschränkt. Daher lohnt es sich, das Beobachtermuster sorgfältig zu lernen. Mit anderen Worten: „Probieren Sie es, probieren Sie es sorgfältig!“ Die Anstrengungen, die Sie heute unternehmen, werden in Zukunft immer mit Gehalt belohnt!

Oben finden Sie Einzelheiten zur Implementierung des Observer-Musters mit JavaScript. Weitere Informationen zum JavaScript-Observer-Muster finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!