js einfacher und grober Beispielcode zum Veröffentlichen und Abonnieren

js einfacher und grober Beispielcode zum Veröffentlichen und Abonnieren

Was ist Publizieren/Abonnieren?

Lassen Sie mich Ihnen ein Beispiel geben. Sie gehen in ein Geschäft, um Kleidung zu kaufen. Sie und der Filialleiter kennen sich nicht. Der Filialleiter verkauft nur seine Kleidung und kümmert sich nicht darum, wer sie kauft. Sie kaufen nur die Kleidung, die Sie möchten, und kümmern sich nicht darum, welches Geschäft sie verkauft. Zu diesem Zeitpunkt bilden das Geschäft und Sie eine Publish/Subscribe-Beziehung.

Wenn das Geschäft Kleidungsstile anbietet, suchen Sie nach der Kleidung, die Sie möchten. Wenn Sie sie finden, kaufen Sie sie. Wenn Sie sie nicht finden, verlassen Sie das Geschäft. Der gesamte Vorgang ist so einfach.

Anwendungsszenarien

Asynchrone Kommunikation, Kommunikation zwischen mehreren Seiten, die Methode von Seite A möchte zu einem bestimmten Zeitpunkt ausgelöst werden, wenn die Methode von Seite B aufgerufen wird

Direkt auf dem Code

Klasse Veröffentlichen {
 Konstruktor() {
  diese.listMap = {};
 }
	// Abonnieren auf (Taste, Funktion) {
  this.listMap[Schlüssel]
   ? diese.listMap[Taste].push(fn)
   : diese.listMap[Schlüssel] = [fn];
   
		//Den Index des Abonnements speichern fn const index = this.listMap[key].length - 1;
  
		//Gibt die Abmeldefunktion zurück
  return () => this.clear(Schlüssel, Index);
 }
 
	// Alle Abonnements für diesen Schlüssel kündigen off(key) {
  lösche this.listMap[key];
 }
 
	// Ein durch den Schlüssel angegebenes Abonnement kündigen clear(key, index) {
  index === this.listMap[Schlüssel].Länge - 1
   ? diese.listMap[Schlüssel].pop()
   : this.listMap[Schlüssel][Index] = null;
 }
 
	//Einmal abonnieren und nach einmaligem Auslösen automatisch abbestellen (Taste, Funktion) {
  dies.auf(Schlüssel, (...rest) => {
   fn(...rest);
   dies.aus(Schlüssel);
  });
 }

	// Schlüssel veröffentlichen
 Auslöser(Taste, ...Rest) {
 	if(Schlüssel in dieser.listMap) {
	 	diese.listMap[Schlüssel].forEach(fn => {
	   fn(...rest);
	  });
 	}
 }
}

Anwendung

const ob = new Veröffentlichen();

//Sub1 abonnieren
const sub1 = ob.on('sub1', (a, b) => {
 console.log('sub1', a, b);
});

//Sub1 abonnieren
const sub11 = ob.on('sub1', (a, b) => {
 console.log('sub11', a, b);
});

ob.trigger('sub1', 2, 3);

// Abmeldung von sub1
unter1();

// Abmeldung von sub11
unter11();

//Sub3 abonnieren
ob.on('sub3', (a, b) => {
 console.log('sub3', a, b);
});

//Sub3 abonnieren
ob.on('sub3', (a, b) => {
 console.log('sub33', a, b);
});

ob.trigger('sub3', 6, 7);

// Abmeldung von allen Sub3
ob.off('sub3');

// Einmal abonnieren und automatisch abbestellen ob.once('sub4', (a, b) => {
 console.log('sub4', a, b);
});

ob.trigger('sub4', 8, 9);

Zusammenfassen

Dies ist das Ende dieses Artikels über die einfache und grobe Veröffentlichung und das Abonnement von js. Weitere relevante Inhalte zur einfachen Veröffentlichung und zum Abonnement von js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • JavaScript-Entwurfsmuster: Beobachtermuster (Publisher-Subscriber-Muster)
  • Vollständiges Beispiel für den JS-Modus des einfachen Abonnenten- und Herausgebermodus
  • Ein einfaches Beispiel für das Publish/Subscribe-Muster in JavaScript
  • Analyse der Prinzipien und der Verwendung des JavaScript-Event-Publishing/Subscribing-Modells
  • Detaillierte Erläuterung der JavaScript-Implementierung und Verwendung des Publish/Subscribe-Modus
  • Beispielerklärung des JS-Publish-Subscribe-Modus
  • Einfaches Beispiel für den in js implementierten Abonnement-Publisher-Modus
  • Prinzip und Beispiel für die Implementierungsmethode des JavaScript-Entwurfsmusters „Observer-Modus“ (Veröffentlichungs- und Abonnementmodus)
  • [JS Master Road] Kurse der Design Pattern Series - Beispiele für die Umgestaltung von Einkaufswagen durch Herausgeber und Abonnenten
  • Detaillierte Beispiele für den Proxy-Modus und den Abonnement-Veröffentlichungsmodus im JS-Entwurfsmuster

<<:  Docker-Installationsmethode und detaillierte Erläuterung der vier Netzwerkmodi von Docker

>>:  MySQL 5.7.10 Installationsdokumentation Tutorial

Artikel empfehlen

3 Codes zur automatischen Aktualisierung von Webseiten

Tatsächlich ist es sehr einfach, diesen Effekt zu ...

Detaillierte Schritte zum Konfigurieren von my.ini für mysql5.7 und höher

Im entpackten Paket von Windows 64-Bit MySQL 5.7 ...

Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten

Vorwort Früher habe ich den Cache verwendet, um d...

Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Inhaltsverzeichnis Verwenden Sie bidirektionale B...

Dateiupload über HTML5 auf Mobilgeräten

Meistens werden Plug-Ins zum Hochladen von Dateie...

Optimale Webseitenbreite und ihre kompatible Implementierungsmethode

1. Beim Entwerfen einer Webseite ist das Bestimmen...

Neue Features in MySQL 8: Unsichtbare Indizes

Hintergrund Indizes sind ein zweischneidiges Schw...

Die 6 effektivsten Möglichkeiten zum Schreiben von HTML und CSS

In diesem Artikel werden die sechs wirksamsten Me...

Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text

Auslassungspunkte werden angezeigt, wenn mehrzeil...

Detailliertes Tutorial zum Erstellen eines Gitlab-Servers auf CentOS8.1

Über den Unterschied zwischen Gitlab und Github m...