Der Beobachtermodus ändert die Seitenanzahl

Dieses Mal zeige ich Ihnen den Beobachtermodus, um den Geldbetrag auf der Seite zu ändern. Welche Vorsichtsmaßnahmen gibt es beim Ändern des Geldbetrags auf der Seite im Beobachtermodus? . Das Folgende ist ein praktischer Fall.

Das Beispiel in diesem Artikel beschreibt die Methode zum Ändern des Geldbetrags auf der Seite in Echtzeit durch den Beobachtermodus von JSDesignmuster. Teilen Sie es wie folgt mit allen als Referenz:

Konzept des Beobachter-Entwurfsmusters:

Manchmal auch als Publish/Subscribe-Muster bezeichnet, definiert das Beobachtermuster ein One-to -many-Abhängigkeit ermöglicht es mehreren Beobachterobjekten (Hauptkontobetragsfunktion an jedem Standort), ein bestimmtes Themenobjekt (Lieferobjekt, das der Herausgeber nach Änderung des Unterkontobetrags aufruft) gleichzeitig zu überwachen. Dieses Themenobjekt benachrichtigt alle Beobachterobjekte, wenn sich der Status (Aufruf der Deliver-Methode) ändert, sodass sie sich automatisch aktualisieren können.

In einem Mitgliederverwaltungssystem hat das Hauptkonto die Funktion, den Geldbetrag auf das Unterkonto aufzuladen.

Szenario: Das Hauptkonto verfügt über 10.000 Yuan. Wenn die Aufladung des Unterkontos um 1.000 Yuan erhöht wird, sollte der Betrag des Hauptkontos um 1.000 Yuan reduziert und angezeigt werden 9.000 Yuan;

Es gibt mehrere Stellen auf der Seite, die in Echtzeit geändert werden müssen.

Im obigen Bild werden drei Gesamtsalden angezeigt.

Wenn Sie den Kontostand über die Schaltflächen zum Hinzufügen und Subtrahieren anpassen, wird der Das Gesamtgleichgewicht dieser drei Stellen ist ebenfalls erforderlich.

Der erste Weg: Fügen Sie mehrere Elementobjekte in einer Funktion hinzu. Dies kann ein Fassadenmodus sein, um den Aufruf wiederholten Codes zu vereinfachen.

function modifyPrice(price) {
 $("#a1").html(price);
 $("#a2").html(price);
 $("#a3").html(price);
 $("#a4").html(price);
}

Der zweite Weg: Verwenden Sie das Beobachter-Entwurfsmuster, wenn sich der Zustand ändert, ändern sich auch die zugehörigen Abhängigkeiten;

// 订阅者
function a1( price ) {
 console.log( price );
 $("#a1").html(price);
}
// 订阅者
function a2( price ) {
 console.log( price );
 $("#a2").html(price);
}
// 订阅者
function a3( price ) {
 console.log( price );
 $("#a3").html(price);
}
// 订阅者
function a4( price ) {
 console.log( price );
 $("#a4").html(price);
}
// 发布者
function PublisherPrice() {
 this.subscribers = [];
 this.addSubscriber = function( subscriber) {
  // some 如果返回true说明this.subscriber数姐中已经有了相同的订阅者了，当遇到第一个比较值是true就返回true，如果没有遇到true最后返回一个false;
  var isExsit = this.subscribers.some(function( el ){
   return el == subscriber
  });
  if ( !isExsit ) {
   this.subscribers.push( subscriber );
  }
  return this;
 }
 this.deliver = function(
  // forEach 相当于是for循环
  this.subscribers.forEach(function( fn ) {
   fn(price);
  });
  return this;
 }
}

Client-Aufruf

var publisherPrice = new PublisherPrice();
publisherPrice.addSubscriber(a1);
publisherPrice.addSubscriber(a2);
publisherPrice.addSubscriber(a3);
publisherPrice.addSubscriber(a4);
publisherPrice.deliver("￥200.00");

Was sind die Vorteile der zweiten Option?

1. Jeder Abonnent ist unabhängig voneinander und hat nur eine Beziehung zum Herausgeber. Es besteht eine Eins-zu-Viele-Beziehung, es kann aber auch eine Eins sein -zu-eins-Beziehung.
2. Jeder Teilnehmer kann nach seinen eigenen Bedürfnissen anrufen, ohne andere Abonnenten zu beeinträchtigen.
3. Im Vergleich zur ersten Methode ist der Code der zweiten Methode besser lesbar und wartbar Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS berechnet automatisch die Kosten für die Hotelübernachtung

Der Effekt der Anzeige des Ladekreises vor dem Bild ist geladen

So erstellen Sie eine öffentliche Teilsequenz in JS

Das obige ist der detaillierte Inhalt vonDer Beobachtermodus ändert die Seitenanzahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!