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

Lernen wir JavaScript objektorientiert kennen

Inhaltsverzeichnis JavaScript-Prototypenkette Obj...

So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux

Auf Unix-ähnlichen Systemen wissen Sie möglicherw...

JavaScript zum Erzielen eines Produktlupeneffekts

In diesem Artikel wird der spezifische JavaScript...

Ausführliche Erklärung des Sperrmechanismus in MySQL

Vorwort Um die Konsistenz und Integrität der Date...

Detaillierte Erläuterung der allgemeinen Schritte zur SQL-Anweisungsoptimierung

Vorwort In diesem Artikel erfahren Sie hauptsächl...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23

Dieser Artikel zeichnet das Installationstutorial...

Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue

1. Zuerst erstellen wir eine JSON-Datei zur inter...

Bedeutung und Verwendung einer Linux-CD

Was bedeutet Linux-CD? Unter Linux bedeutet cd „V...

HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel

1. Dynamisches Laden von Skripten Mit der wachsen...

Die HTML-Tag-ID kann eine Variable sein

<table id=" <%=var1%>">, der...

HTML-Sprachenzyklopädie

123WORDPRESS.COM--HTML超文本标记语言速查手册<!-- --> !D...

Sprechen Sie über implizite Konvertierung in MySQL

Im Laufe der Arbeit werden Sie auf viele Fälle im...