Parlons brièvement des modèles de publication, d'abonnement et d'observation, et parlons des différences entre les deux.

Cet article vous présentera les modèles de publication-abonnement et d'observateur, et parlera des différences entre eux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

J'ai écrit des promesses une par une sur un coup de tête il y a quelque temps. La promesse se trouve être le mode de publication par abonnement. Le mobx utilisé pour le développement au travail est aussi le mode observateur. Bien qu'ils soient utilisés dans les deux cas, je n'ai jamais pensé à la différence entre les deux, et l'analyse des différences sur Internet prête à confusion. Rédigons un résumé de ma part et la mise en œuvre la plus simple (c'est facile à comprendre car c'est simple) pour partager et approfondir ma compréhension des deux

Abonnez-vous pour publier

1. Idée de mise en œuvre

• arr est un centre de cache pour les événements abonnés
• Poussez ce qui doit être fait dans le tableau de cache arr via In
• en attendant que l'événement se déclenche, émettre l'événement d'exécution en séquence

2 Implémentation du code

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.

Bien qu'elle ait été publiée deux fois, la console dans on n'a finalement été exécutée qu'une seule fois en raison de conditions externes

Mode observateur

1. L'idée de mise en œuvre

est similaire au modèle d'observateur, mais doit être divisée en un observateur et un observé

• L'observateur et les observateurs observés sont liés (en interne sur la base du modèle de publication et d'abonnement)

Mise en œuvre du code

// 被观察者
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. . Résultats de la mise en œuvre

La différence entre les deux

eventHub publier et s'abonner

• on(subscribe ) et publication (emit). Il n'y a pas de connexion directe entre eux. Ils s'appuient sur l'arr intermédiaire pour se connecter et s'abonner d'un seul coup à arr

. Le

le mode observateur est exécuté en séquence

• Il existe une relation entre l'observateur et l'observé (basée sur le modèle de publication-abonnement en interne)
• Passez l'instance de l'observateur en paramètre dans la méthode attach de l'observé et mettez-la en cache dans
• dans le tableau des observateurs. Lorsque l'observateur setState est appelé, la méthode de mise à jour des observateurs dans le tableau de cache observers est appelé dans l'ordre

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!