Définition du modèle d'observateur JavaScript et explication détaillée des instances d'événements DOM

Modèle d'observateur (modèle de publication-abonnement) : il définit une relation de dépendance un-à-plusieurs entre les objets. Lorsque l'état d'un objet change, tous les objets qui en dépendent seront avertis.

En JavaScript, le modèle d'événement est généralement utilisé pour remplacer le modèle d'observateur traditionnel.
Avantages :

(1) peut être largement utilisé dans la programmation asynchrone et constitue une alternative au passage de fonctions de rappel.

(2) peut remplacer le mécanisme de notification codé en dur entre les objets. Un objet n'a plus besoin d'appeler explicitement une interface d'un autre objet. Les deux objets sont facilement découplés.

Événements DOM – exemple classique de modèle d'observateur

Nous devons surveiller le clic de l'utilisateur sur document.body, mais nous n'avons aucun moyen de prédire quand l'utilisateur clique sur document.body. l'utilisateur cliquera.
Donc, nous nous abonnons à l'événement click sur document.body. Lorsque l'on clique sur le nœud body, le nœud body publie ce message aux abonnés !

document.body.addEventListener("click", function() {
  console.log(1);
}, false);

// 可以多个订阅者
document.body.addEventListener("click", function() {
  console.log(2);
}, false);

doucment.body.click();

Un certain site Web a un en-tête, une navigation, une liste de messages et d'autres modules. Le rendu de ces modules nécessite l'obtention des informations de connexion de l'utilisateur.
(1) Écriture générale :

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") {
      // 登录成功，渲染header、nav
      header.setInfo(data.headerInfo);
      nav.setInfo(data.navInfo);
    }
  }
});

(2) Grâce au modèle observateur, il est facile de découpler !

$.ajax({
  ...,
  success: function(data) {
    if(data.status === "success") {
      // 登录成功，发布登陆成功消息
      login.trigger("loginsuccess", data);
    }
  }
});

var header = (function() {
  // 监听消息
  login.listen("loginsuccess", function(data){
    header.setInfo(data.headerInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置header信息");
    }
  };
})();

var nav = (function() {
  login.listen("loginsuccess", function(data){
    nav.setInfo(data.navInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置nav信息");
    }
  }
})();

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!