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

JavaScript-Canvas zum Laden von Bildern

In diesem Artikel wird der spezifische Code von J...

So verwenden Sie Nginx als Load Balancer für MySQL

Hinweis: Die Nginx-Version muss 1.9 oder höher se...

So fügen Sie Konfigurationsoptionen zum Discuz!-Forum hinzu

Discuz! Forum verfügt über zahlreiche Konfiguratio...

Elementui exportiert Daten in XLSX- und Excel-Tabellen

Kürzlich habe ich vom Vue-Projekt erfahren und bi...

Optimierung des MySQL Thread_Stack-Verbindungsthreads

MySQL kann nicht nur über das Netzwerk, sondern a...

Detaillierte Erklärung zum Erstellen eines Arrays in JavaScript

Inhaltsverzeichnis Erstellen von Arrays in JavaSc...

Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus

Überblick Dieser Artikel beginnt mit der Einführu...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...

Lösungen für Websites mit hohem Datenverkehr

Erstens: Stellen Sie zunächst sicher, dass die Ser...

Tutorial zur Installation einer MySQL-ZIP-Datei

In diesem Artikel wird die spezifische Methode zu...

Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?

Bevor wir dieses Problem verstehen, schauen wir u...