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

Implementierung der CSS-Rahmenlängensteuerungsfunktion

Wenn die Rahmenlänge früher kleiner als der Conta...

Theorie: Die zwei Jahre User Experience

<br />Es ist nicht länger als zwei Jahre her...

Miniprogramm zur Implementierung des kompletten Einkaufswagens

Das Miniprogramm implementiert einen vollständige...

Verwenden Sie reines JS, um den sekundären Menüeffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische JS...

Sollten nullbare Felder in MySQL auf NULL oder NOT NULL gesetzt werden?

Personen, die MySQL häufig verwenden, können mit ...

CSS-Tricks zum Erstellen von Welleneffekten

Es war schon immer sehr schwierig, Welleneffekte ...

Beispielanalyse der Verwendung von GROUP_CONCAT in MySQL

Dieser Artikel beschreibt anhand eines Beispiels ...

Ein Artikel zum Verständnis von Operatoren in ECMAScript

Inhaltsverzeichnis Unäre Operatoren Boolesche Ope...

OpenSSL-Zertifikate in der Linux-Umgebung generieren

1. Umgebung: CentOS7, Openssl1.1.1k. 2. Konzept: ...

Nginx-Anti-Crawler-Strategie, um UA am Crawlen von Websites zu hindern

Anti-Crawler-Richtliniendatei hinzugefügt: vim /u...

Detaillierte Untersuchung der MySQL-Mehrversions-Parallelitätskontrolle MVCC

MVCC MVCC (Multi-Version Concurrency Control) ist...

Tutorial-Diagramm zur kostenlosen 64-Bit-Installationsversion von MySQL 5.7.31

1. Herunterladen Download-Adresse: https://dev.my...