Lassen Sie uns kurz über die Veröffentlichungs-, Abonnement- und Beobachtermuster sprechen und über die Unterschiede zwischen ihnen sprechen.

Dieser Artikel stellt Ihnen die Publish-Subscribe- und Observer-Muster vor und spricht über die Unterschiede zwischen den beiden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Vor einiger Zeit habe ich aus einer Laune heraus Versprechen geschrieben. Das Mobx, das ich für die Entwicklung bei der Arbeit verwende, ist zwar auch das Beobachtermodell, aber ich habe es nie getan Ich habe über den Unterschied zwischen den beiden nachgedacht. Die Online-Unterschiedsanalyse ist verwirrend. Lassen Sie uns eine Zusammenfassung meiner eigenen und der einfachsten Implementierung zusammenstellen (sie ist auch leicht zu verstehen, weil sie einfach ist), um sie zu teilen und gleichzeitig mein Verständnis der beiden zu vertiefen.

Abonnieren Sie die Veröffentlichung.

dient als Cache-Center für abonnierte Ereignisse. Schieben Sie die Dinge, die erledigt werden müssen, in das arr-Cache-Array durch.

Wenn Sie darauf warten, dass das Ereignis ausgelöst wird, geben Sie der Reihe nach die Ausführung des Ereignisses aus. Code-Implementierung

• interface eventHub {
    arr: Array<Function>;
    on(fn: Function): void;
    emit(): void;
  }
  interface Person {
    age: number;
    name: string;
  }
  let eventHub: eventHub = {
    arr: [] as Array<Function>,
    // 订阅
    on(fn: Function) {
      this.arr.push(fn);
    },
    //   发布
    emit() {
      this.arr.forEach((fn) => fn());
    },
  };
  let person: Person = {} as Person;
  eventHub.on(() => {
  //订阅的事件里判断当 person长度为2时 打印person，
    if (Object.keys(person).length == 2) {
      console.log(person);
    }
  });
  setTimeout(function () {
    person.age = 27;
    //发布的时候去遍历 this.arr 并执行第一次
    eventHub.emit();
  }, 10);
  setTimeout(function () {
    person.name = "Zoe";
    //发布的时候去遍历 this.arr 并执行第二次
    eventHub.emit();
  }, 20);

3. Ergebnis

Obwohl es zweimal veröffentlicht wurde, wurde die Konsole am Ende aufgrund äußerer Bedingungen nur einmal ausgeführt

Implementierungsidee

Ähnlich dem Beobachtermodus, erfordert jedoch die Aufteilung eines Beobachters in einen Beobachter, und es besteht eine Beziehung zwischen dem Beobachter und dem Beobachteten (intern basierend auf dem Veröffentlichungs- und Abonnementmodell)

2. Code-Implementierung

// 被观察者
class Subject {
  name: string; //实例上定义一个name属性
  state: string;
  observers: any[];
  constructor(name:string) {
    this.name = name;
    this.observers = [];
    this.state = "";
  }
  attach(o) {
    //传入观察者
    this.observers.push(o);
  }
  setState(newState) {
    this.state = newState;
    this.observers.forEach((o) => o.update(this));
  }
}
// 观察者
class Observer {
  name: string;
  constructor(name) {
    this.name = name;
  }
  update(interviewee) {
    console.log(`${interviewee.name} say to: ${this.name} ZOE的${interviewee.state}`);
  }
}
let hr = new Subject("HR");
let observer1 = new Observer("内推者");
let observer2 = new Observer("面试者");
hr.attach(observer1);
hr.attach(observer2);
hr.setState("面试通过了");
// baby.setState("面试没通过");

3. Implementierungsergebnisse

Der Unterschied zwischen den beiden: „eventHub veröffentlichen“ und „abonnieren“: Es gibt keine direkte Verbindung zwischen „on“ (Abonnement) und „Publishing“ (Emittieren). das arr in der Mitte, um einen Push mit arr zu verbinden und nacheinander auszusenden. arr ausführen

Beobachtermodus

Es besteht eine Verbindung zwischen dem Beobachter und dem Beobachteten (intern basierend auf dem Publish-Subscribe-Modus) Übergeben Sie die Instanz des Beobachters als Parameter an die Attachment-Methode des Beobachters und speichern Sie sie im Cache-Array Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonLassen Sie uns kurz über die Veröffentlichungs-, Abonnement- und Beobachtermuster sprechen und über die Unterschiede zwischen ihnen sprechen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!